1

I am creating a custom form in lightning to create case. The default create case form shows all the read only fields and is not as user friendly. Using the solution mentioned in this post How to use fieldsets with Lightning?, I created a form that dynamically retrieves fields from fieldset and renders the form. Challenge I am having is when submitting the forms I am not able to retrieve the fields using their id. Setting aura-id in dynamically created components does not work and when using the html id attribute I am not able to retrieve it using document.getElementById. I need to validate to make sure required fields are populated and then submit values to apex controller to create case. Below is code from my component. Any help will be very much appreciated!

.cmp

<aura:component implements="flexipage:availableForAllPageTypes,force:lightningQuickAction" controller="FieldSetController">
    <aura:attribute name="values" type="Object[]"/>
    <aura:attribute name="fields" type="Object[]"/>
    <aura:attribute name="form" type="Aura.Component[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <fieldset class="slds-box slds-theme--default slds-container--medium">
        <legend class="slds-text-heading--small slds-p-vertical--medium">
            Create New Case
        </legend>
        <form id="caseForm" class="slds-form--stacked">
            {!v.form}
        </form>
    </fieldset>
    <ui:inputText label="testbox" aura:id="testboxid" value="test"/>

</aura:component>

controller.js

({
    doInit: function(component, event, helper) {
        console.log('**** INSIDE INIT');
        helper.getFields(component, event);
    },

    doSubmit: function(component, event, helper) {
        console.log('called submit');
        helper.submitForm(component, event);
    },

    fieldOnChange: function(component, event, helper){
        console.log('value changed');
    },

    submit2: function(component, event, helper) {
        //debugger;
        console.log(component.get("v.form")[0].get("domId"));
    }
})

helper.js

({

    /*
     *  Map the Schema.FieldSetMember to the desired component config, including specific attribute values
     *  Source: https://www.salesforce.com/us/developer/docs/apexcode/index_Left.htm#CSHID=apex_class_Schema_FieldSetMember.htm|StartTopic=Content%2Fapex_class_Schema_FieldSetMember.htm|SkinName=webhelp
     *
     *  Change the componentDef and attributes as needed for other components
     */
    configMap: {
        "anytype": { componentDef: "ui:inputText" },
        "base64": { componentDef: "ui:inputText" },
        "boolean": {componentDef: "ui:inputCheckbox" },
        "combobox": { componentDef: "ui:inputSelect" },
        "currency": { componentDef: "ui:inputText" },
        "datacategorygroupreference": { componentDef: "ui:inputText" },
        "date": { componentDef: "ui:inputDate" },
        "datetime": { componentDef: "ui:inputDateTime" },
        "double": { componentDef: "ui:inputNumber", attributes: { values: { format: "0.00"} } },
        "email": { componentDef: "ui:inputEmail" },
        "encryptedstring": { componentDef: "ui:inputText" },
        "id": { componentDef: "ui:inputText" },
        "integer": { componentDef: "ui:inputNumber", attributes: { values: { format: "0"} } },
        "multipicklist": { componentDef: "ui:inputText" },
        "percent": { componentDef: "ui:inputNumber", attributes: { values: { format: "0"} } },
        "picklist": { componentDef: "ui:inputSelect" },
        "reference": { componentDef: "ui:inputText" },
        "string": { componentDef: "ui:inputText" },
        "textarea": { componentDef: "ui:inputTextArea" },
        "time": { componentDef: "ui:inputDateTime", attributes: { values: { format: "h:mm a"} } },
        "url": { componentDef: "ui:inputText" },
        "button": { componentDef: "ui:button" }
    },

    // Adds the component via newComponentAsync and sets the value handler
    addComponent: function(component, facet, config, fieldPath) {
        if(config.attributes.values.fieldtype === 'button'){
            console.log('Inside creating button')
            $A.createComponents(
                [
                    ["aura:html",{
                    "tag": "div",
                    HTMLAttributes:{"class" : "slds-form-element"},
                    }],
                    [config.componentDef,{
                    "label": "Submit",
                    "buttonType": "button",
                    "class": "slds-button slds-button--brand",
                    "press": component.getReference("c.submit2")
                    }]
                ],
                function(components, status, errorMessage){
                    if(status === "SUCCESS"){
                        var cmp1 = components[0];
                        var cmp2 = components[1];
                        cmp1.set("v.body",cmp2);
                        facet.push(cmp1);
                    }
                    else if(status === "INCOMPLETE"){
                        console.log("No response");
                    }
                    else if(status === "ERROR"){
                        console.log("ERROR: " + errorMessage);
                    }
                }
            );
        }
        else{
            $A.createComponents(
                [
                    ["aura:html",{
                    "tag": "div",
                    HTMLAttributes:{"class" : "slds-form-element"},
                    }],
                    ["aura:html",{
                        "tag":"label",
                        HTMLAttributes:{"class" : "slds-form-element__label"}
                    }],
                    ["aura:html",{
                        "tag":"div",
                        HTMLAttributes:{"class" : "slds-form-element__control"}
                    }],
                    [config.componentDef,{
                        "domId" : fieldPath,
                        "label": config.attributes.values.label,
                        "required" : config.attributes.values.required,
                        "onchange" : component.getReference("c.fieldOnChange")
                    }]
                ],
                function(components, status, errorMessage){
                    if(status === "SUCCESS"){
                        var cmp1 = components[0];
                        var cmp2 = components[1];
                        var cmp3 = components[2];
                        var cmp4 = components[3];

                        if(config.attributes.values.fieldtype == 'PICKLIST')
                            cmp4.set("v.options",config.attributes.values.picklistopts);
                        /*cmp4.set("v.id",fieldPath);
                        cmp4.set("v.name",fieldPath);*/

                        console.log('*** ' + cmp4.getLocalId());
                        cmp1.set("v.body",cmp2);
                        cmp1.set("v.body",cmp3);
                        cmp3.set("v.body",cmp4);

                        facet.push(cmp1);
                    }
                    else if(status === "INCOMPLETE"){
                        console.log("No response");
                    }
                    else if(status === "ERROR"){
                        console.log("ERROR: " + errorMessage);
                    }
                }
            );
        }
    },

    // Create a form given the set of fields
    createForm: function(component, fields) {
        var field = null;
        var cmp = null;
        var def = null;
        var config = null;
        var self = this;
        var btn = {"label" : "Submit",
                    "type" : "button",
                    "required" : "false"};
        fields.push(btn);

        // Clear any existing components in the form facet
        component.set("v.form", []);

        var facet = component.get("v.form");
        var values = component.get("v.values");
        for (var i = 0; i < fields.length; i++) {
            field = fields[i];
            // Copy the config, note that this type of copy may not work on all browsers!
            config = JSON.parse(JSON.stringify(this.configMap[field.type.toLowerCase()]));
            // Add attributes if needed
            config.attributes = config.attributes || {};
            // Add attributes.values if needed
            config.attributes.values = config.attributes.values || {};

            // Set the required and label attributes
            config.attributes.values.required = field.required;
            config.attributes.values.label = field.label;
            config.attributes.values.fieldtype = field.type;
            if(field.type == 'PICKLIST'){
                var opts = [];

                for(var j=0; j < field.picklistoptions.length; j++){
                    opts.push({class: "optionClass", label: field.picklistoptions[j], value: field.picklistoptions[j]});
                }
                config.attributes.values.picklistopts = opts;
            }

            // Add the value for each field as a name/value
            values.push({name: field.fieldPath, value: config});
            // Add the component to the facet and configure it
            self.addComponent(component, facet, config, field.fieldPath);

        }
        component.set("v.form", facet);
        component.set("v.values", values);
        console.log('Values list ' + values);
    },



    getFields: function(component) {
        var action = component.get("c.getFields");
        var self = this;
        var typeName = component.get("v.type");
        var fsName = component.get("v.fsName");

        action.setCallback(this, function(a) {
            var fields = a.getReturnValue();
            component.set("v.fields", fields);
            self.createForm(component, fields);
        });
        $A.enqueueAction(action);
    },

    submitForm: function(component, event) {
        //var values = component.get("v.values");
        //var s = JSON.stringify(values, undefined, 2);
        console.log('submit called');

    }
})
  • Setting the aura:id on a dynamically created component is a known issue. See salesforce.stackexchange.com/questions/148634/…. Could you clarify a bit where exactly in this repro you're trying the following: "when using the html id attribute I am not able to retrieve it using document.getElementById". – TrevorBliss Dec 15 '16 at 3:25
  • Did you ever get this resolved? I am curious how to got the fieldsetmember class to populate picklistoptions. Can you post your apex code? – Allen Mann Feb 12 '18 at 21:47

Your Answer

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

Browse other questions tagged or ask your own question.