Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ajithMajithM 

Creating a form dynamically from field set.

Hi, 

I am trying to create a from dynamically from a field set, to do so I am using the apexcontroller method to create a json string for schema.FieldSetmember and using that to create a new component using $A.createComponent which is working for ui markups of type ui:inputText and ui:inputEmail etc... but not with force:inputField


Test.cmp

<aura:component controller="FormController">
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <!-- <aura:attribute name="contact" type="Contact"   default="{ 'sobjectType': 'Contact'}"/> -->
    <form aura:id="form">
        
    
        {!v.body} 
        
    </form>

</aura:component>


TestController.js


    doInit : function(cmp,event) {
    
      //  helper.creatFormElements(cmp);
      //  
       var action = cmp.get("c.getFieldSet");
        
       action.setParams({
            
            "ObjectName": "Contact",
            "FieldSetName" : "New_Contact"
            
        });
        
        action.setCallback(this,function(results){
         
            var fields = JSON.parse(results.getReturnValue());
            
            console.log('label'+fields[0].isRequired);
            console.log('label'+fields[0].fieldLabel);
          
          

            $A.createComponents([
            ["aura:attribute",
            {
                "name":"contact", 
                "type":"Contact",
                "default":"{ 'sobjectType': 'Contact'}"
            }],
            ["ui:inputText",
            {
                "class":"form-control", 
                "aura:id":fields[0].fieldLabel+0,
                "value" : fields[0].fieldLabel
            }],
            ["force:inputField", /* if i replace this with ui:inputfield it works fine */
            {
                "class":"form-control", 
                "aura:id":fields[1].fieldLabel+1,
                "value" : "{!v.contact.lastName}"
            }]
            ],
            function(inputText){
                console.log(inputText);
                //Add the new button to the body array
                if (cmp.isValid()) {
                    console.log('cmp is valid');
                    var body = cmp.get("v.body");
                    body.push(inputText[0]);
                    body.push(inputText[1]);
                     body.push(inputText[2]);
                    cmp.set("v.body", body);
                }
            }
        );
            
        });
        
        $A.enqueueAction(action);
    },


Please let me know if there is a easy way to use FieldSets in Lightning components. 
Andy BoettcherAndy Boettcher
Does this article help you?  http://salesforce.stackexchange.com/questions/56047/how-to-use-fieldsets-with-lightning
ajithMajithM
Hi Andy, 

Thanks for the post!...
I am using similar approach but instead of using "$A.componentService.newComponentAsync" ( which is depricated ) I am using $A.createComponents function. But I am having issues with using "force:inputField"  in this method.  I got the below error message when I am using "force:inputField" and works fine if I change it to ui:inputText .


[null, ui$inputText, ui$inputDate]
app.js:56 cmp is valid
app.js:56 Status is:ERROR
app.js:56   
app.js:56 Message is:An internal server error has occurred
Error ID: 1232003269-36885 (361950105)
app.js:56 Status is:SUCCESS
app.js:56   
app.js:56 Message is:
app.js:56 Status is:SUCCESS





############################

$A.createComponents([
                ["force:inputField",
            {
                "name":"contact", 
                "type":"Contact",
                "value":"{!v.contact.FirstName}"
            }],
            ["ui:inputText",
            {
                "class":"form-control", 
                "aura:id":fields[0].fieldLabel+0,
                "value" : fields[0].fieldLabel
            }],
            ["ui:inputDate",
            {
                "class":"form-control", 
                "aura:id":fields[1].fieldLabel+1,
                "displayDatePicker": true
                
            }]
            ],
            function(newcmps,status,statusMessageList){
                console.log(newcmps);
                //Add the new button to the body array
                if (cmp.isValid()) {
                    console.log('cmp is valid');
                    var body = cmp.get("v.body");
                    body.push(newcmps[0]);
                    body.push(newcmps[1]);
                     body.push(newcmps[2]);
                    cmp.set("v.body", body);
                }
                
                for(m in statusMessageList){
                    
                    console.log('Status is:'+(statusMessageList[m].status));
                    console.log('  ');
                    console.log('Message is:'+(statusMessageList[m].message));
                }
            }
        );