2

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 I created a form that dynamically retrieves fields from fieldset and renders the form.

The 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!

The component:

<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>

The controller:

({
    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"));
    }
})

The helper:

({

    /*
     *  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');

    }
})
2
  • 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". Commented Dec 15, 2016 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
    Commented Feb 12, 2018 at 21:47

0

You must log in to answer this question.

Browse other questions tagged .