1

I know there are so many questions available in forum regarding Dynamically create Lightning component using $A.createComponent(....);

I have little bit different requirement. while creating the component i am passing the the type dynamically. Means it can be any type of the component. 'Date, String, Text, Textarea, Boolean etc..'

So I have written the code below

var componentTag = '';
var uiComponent = [];
if (fieldSet[0].FieldType == "DOUBLE") {
    componentTag = "lightning:input";
    uiComponent.push("\"aura:id\": \"text-Value\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "DATE") {
    componentTag = "ui:inputDate";
    uiComponent.push('"aura:id": "text-Value","label": "' + fieldSet[0].FieldLabel + '","value": "' + fieldSet[0].FieldValue + '","displayDatePicker": true');
} else if (fieldSet[0].FieldType == "TEXTAREA") {
    componentTag = "lightning:textarea";
    uiComponent.push('\"aura:id\": \"text-Value\",\"label\": "' + fieldSet[0].FieldLabel + '",\"value\": "' + fieldSet[0].FieldValue + '",\"maxlength\": 180,\"class\": "' + fieldSet[0].FieldName + '"');
} else if (fieldSet[0].FieldType == "STRING") {
    componentTag = "lightning:input";
    uiComponent.push('"aura:id": "text-Value","label": "' + fieldSet[0].FieldLabel + '","class": "' + fieldSet[0].FieldName + '"');
} else if (fieldSet[0].FieldType == "PERCENT") {
    componentTag = "lightning:input";
    uiComponent.push("\"aura:id\": \"findableAuraId\",\"type\": \"number\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "CURRENCY") {
    componentTag = "ui:inputCurrency";
    uiComponent.push("\"aura:id\": \"text-Value\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "DATETIME") {
    componentTag = "ui:inputDateTime";
    uiComponent.push("\"aura:id\": \"text-Value\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"displayDatePicker\": true,\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "BOOLEAN") {
    componentTag = "ui:inputCheckbox";
    uiComponent.push("\"aura:id\": \"text-Value\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "PHONE") {
    componentTag = "ui:inputPhone";
    uiComponent.push("\"aura:id\": \"text-Value\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else if (fieldSet[0].FieldType == "ENCRYPTEDSTRING") {
    componentTag = "lightning:input";
    uiComponent.push("\"aura:id\": \"text-Value\",\"type\": \"password\",\"label\": " + fieldSet[0].FieldLabel + ",\"value\": " + fieldSet[0].FieldValue + ",\"class\": " + fieldSet[0].FieldName + "");
} else {
    componentTag = "lightning:input";
    uiComponent.push('\"aura:id\": \"text-Value\",\"label\": "' + fieldSet[0].FieldLabel + '",\"class\": "' + fieldSet[0].FieldName + "'");
}

$A.createComponent(componentTag, {
        uiComponent
    },
    function(result, status, errorMessage) {
        bodyComponents.push(result);
        //Add the new button to the body array
        if (status === "SUCCESS") {
            var body = component.get('v.body');
            body.push(result);
            component.set('v.body', bodyComponents);
        } else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
            // Show offline error
        } else if (status === "ERROR") {
            console.log("Error: " + errorMessage);
            // Show error message
        }
    }
);

Here fieldSet is an array which has all the information regarding FieldType, FieldLabel, FieldName everything. But when it renders it just creates an inputText without any label or anything. I am sure I am doing wrong at assigning values at uiComponent. I tried all the possible ways taking it as a string all other ways I know.

If anyone can help me here it would be great. Let me know if anything clarification is required from my side.

PS - I have all the variable declared. if it is missing in code please assume it is there.

Edit - adding the output screen shot enter image description here

  • I guess you iterating over a list of FieldSets?! If so, be sure you did not hard code [0] but [i] or similar. Did you try to debug fieldSet[i]? what does it show? – Basti Feb 22 '18 at 10:41
  • for now I have only 1 value in fieldSet thats why I have hard coded it. values in FieldSet is coming correctly. – Nupur Bhagat Feb 22 '18 at 10:42
  • it is working when I am creating it as standard way. $A.createComponent( "ui:inputDate", { "aura:id": "text-Value", "multiple": "true", "label": fieldSet[0].FieldLabel, "value": fieldSet[0].FieldValue, "class": fieldSet[0].FieldName } but not if I pass it as above – Nupur Bhagat Feb 22 '18 at 10:49
  • oh okay. Why are you pushing a single string to your uiComponent? the format should be: Map<String, Object>. So it should look like this: uiComponent = {"aura:id" : "text-Value", .... } And than use $A.createComponent( componentTag, uiComponent, – Basti Feb 22 '18 at 10:51
  • Maybe you should get familiar with javascript syntax for objects – Basti Feb 22 '18 at 10:53
1

As I did not find an answer from anywhere.. This is not possible to do it either with Map or array. Better to write the complete code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.