[SalesForce] How Do I Work With Field Type Describe Information in Lightning Components

Good evening everyone,

I currently have a requirement where I need to create form fields dynamically from the Case object and render the same field types as on the Case object. I am trying to create functionality like the <apex:inputField> VisualForce tag provides. I have tried the force:inputField component but have not had any success getting that to work. I have seen several forum posts that have mentioned that component doesn't seem to be working correctly, at least not for desktop applications. Therefore, I am trying to find another way to dynamically render field types to a form and then dynamically bind the form field values back to the Case object to create the record in Salesforce on form submission.

My form component markup is below:

<aura:component controller="SelfServiceActionFormStep1Controller">
    <!-- Attributes -->
    <aura:attribute name="userMessage" type="Aura.Component[]"/>
    <aura:attribute name="actionWrapper" type="Object"/>
    <aura:attribute name="fieldset" type="String[]"/>
    <aura:attribute name="case" type="Case"
                    default="{'sobjectType': 'Case',
                             'Type_of_Leave__c': 'Personal',
                             'Total_Time_Off_Unit__c': 'Days',
                             'Origin': 'Self-Service',
                             'Type': 'New Time Off Request',
                             'Start_Date__c': ''
                             }"/>

    <!-- Registered Events -->
    <aura:registerEvent name="SelfServiceTimeOffNextStep" type="c:SelfServiceTimeOffNextStep"/>

    <!-- Event Handlers -->
    <aura:handler value="{!this}" name="init" action="{!c.doInit}"/>

    <div class="container-fluid">
        <div class="row" id="timeOffFormMsgDiv">
            <div class="col-md-6 col-md-offset-3 tc">
                {!v.userMessage}
            </div>
        </div>
        <div class="row mts">
            <div class="col-md-12>">
                <form class="form-horizontal">
                    <aura:iteration items="{!v.actionWrapper.describedFieldListStep1}" var="field">
                        <aura:if isTrue="{!field.type == 'date' ? 'true' : 'false'}">
                            <div class="form-group">
                                <div class="col-sm-5 col-sm-offset-1">
                                    <c:SelfServiceDateCmp aura:id="dateCmp" fieldLabel="{!field.label}" fieldName="{!field.name}" case="{!v.case}"/>
                                </div>
                            </div>
                        </aura:if>
                        <aura:if isTrue="{!field.type == 'double' ? 'true' : 'false'}">
                            <div class="form-group">
                                <div class="col-sm-5 col-sm-offset-1">
                                    <c:SelfServiceInputTextCmp aura:id="inputCmp" fieldLabel="{!field.label}" fieldName="{!field.name}" case="{!v.case}"/>
                                </div>
                            </div>
                        </aura:if>
                        <aura:if isTrue="{!field.type == 'picklist' ? 'true' : 'false'}">
                            <div class="form-group">
                                <div class="col-sm-5 col-sm-offset-1">
                                    <c:SelfServicePicklistTextCmp aura:id="picklistCmp" fieldLabel="{!field.label}" fieldName="{!field.name}" case="{!v.case}" picklistValues="{!field.picklistValues}"/>
                                </div>
                            </div>
                        </aura:if>
                    </aura:iteration> 
                    <div class="form-group">        
                        <div class="col-sm-offset-9 col-sm-3">
                            <button aura:id="step1NextBtn" type="button" class="btn btn-primary btn-custom prl pll" onclick="{!c.validateStep1}">Next</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>                                              
    </div>
<ltng:require scripts="/resource/CommunityResources/js/jquery.min.js, /resource/CommunityResources/js/bootstrap.min.js" afterScriptsLoaded="{!c.OnScriptsLoaded}"/>
</aura:component>

The describedFieldListStep1 attribute you see referenced in the wrapper class I am returning contains the DescribeFieldResult information for all the fields I need to render to the form. I have each form field created as a separate component that I am rendering based on the field type. For example, the <c:SelfServiceDateCmp/> markup is below. You can see where I tried {!v.case.fieldName} to try and dynamically bind the API field name to the Case object, but that didn't work:

<aura:component >
    <!-- Attributes -->
    <aura:attribute name="case" type="Case"/>
    <aura:attribute name="fieldLabel" type="String" />
    <aura:attribute name="fieldName" type="String" />

    <aura:handler value="{!this}" name="init" action="{!c.doInit}"/>

    <div class="container-fluid">
        <div class="row">
            <label class="control-label" for="inputCmp">{!v.fieldLabel}</label>
            <ui:inputDate aura:id="inputDate" class="form-control" value="{!v.case.v.fieldName}" displayDatePicker="true"/>                                                                
        </div>
    </div>                                    
</aura:component>

This part is working fine as far as rendering the correct field types to the page.

The problem I am running into is how to bind the value attribute of the form field components to the Case standard object attribute outlined below that I have declared in this component and then am passing to the child components to update the appropriate fields.

<aura:attribute name="case" type="Case"
                    default="{'sobjectType': 'Case',
                             'Type_of_Leave__c': 'Personal',
                             'Total_Time_Off_Unit__c': 'Days',
                             'Origin': 'Self-Service',
                             'Type': 'New Time Off Request',
                             'Start_Date__c': ''
                             }"/>

I'm not able to simply specify {!v.case.Reason}, for example, because I'm not sure what field may be coming in and which Case field it should map to. I might have 3 different input fields that are created on the form, but I will only have the one <ui:inputText> component with the one value attribute.

I was thinking I might have to go to the client-side controller to get the values of each field individually and somehow build the case object on the Submit click event, but I'm not sure how that would work in Lightning.

Would anyone be able to provide some insight on this one?

Thanks!

Best Answer

You'll need to do this in javascript.

I'm a bit unsure when you want to do the component creation, I'm guessing at init, so in your c.init function, you'll have

var fieldName = cmp.get("v.fieldName");
$A.createComponent("ui:inputDate", { "value": cmp.getReference("v.case." + fieldName) }, function callback(newCmp) {  cmp.set("v.body", newCmp); });

You can see using cmp.getReference() is what creates the link you would normally get by using {!v.case.Reason} in the cmp file.

Related Solutions

[SalesForce] Issue with GlobalDescribe Field Results and Managed Package

This isn't a bug. It's working as documented. Fields and objects do not return their namespace when code from the same namespace calls it. It's a type of scoping mechanism. And yes, subscribers that build a field that duplicates one of your fields will find that your code cannot access it, query it, or in any way interact with it, short of calling the REST or SOAP API without the namespace. And, for the record, you should not be using the namespace for merge fields within your package, but the subscriber would need to use the namespace in their own org's configuration (e.g. validation rules).

The mechanism is meant to protect your code from changes that subscribers might do to break your code (e.g. create a field without a namespace that your code references of the wrong data type, suddenly causing your code to get confused and crash). However, that protection comes at a cost, and that cost is a bit of inaccessibility (shadowing objects and fields), and a bit of confusion. All you need to remember is that your namespace should not be referenced in your code anywhere. Your code is walled off from the subscriber's configuration (more or less), so any request for anything that comes from your own package will always belong to your package.

There are a few obscure namespace bugs, though, that I don't think they've ever sorted out. Notably, "bare" merge fields need to have namespace references in Visualforce pages, but those that are inside tags, like apex:outputText, will be magically patched when it arrives in the subscriber org. Try looking at the source for a Visualforce page in a subscriber org and you'll see what I'm talking about. Your namespace will magically appear in the merge field, even when it was not in the original source.

[SalesForce] Object and Field Describe in Lightning Component

You can do the describe call in the apex class and filter out the value as you want and return those value to lightning controller:

Adding a snap of the apex class method and lightning controller:

Add the following in the Apex class:

public class picklistWrapper {
    @AuraEnabled
    public String strValue {get;set;}
    @AuraEnabled
    public String strLabel {get;set;}

    public picklistWrapper(String strValue, String strLabel) {
        this.strValue = strValue;
        this.strLabel = strLabel;
    }
}

@AuraEnabled
public static List<picklistWrapper> getPicklistValues() {

    List<picklistWrapper> lstPWrapper = new List<picklistWrapper>();
    Schema.DescribeFieldResult fieldResult = Account.BillingStateCode.getDescribe();

    for(Schema.PicklistEntry f : fieldResult.getPicklistValues()) {

        //write your logic to filter the values here
        lstPWrapper.add(new picklistWrapper(f.getValue(), f.getLabel()));
    }
    return lstPWrapper
}

Add the following to the lightning controller:

getInitialData : function(component, event, helper) {
    var action = component.get("c.getPicklistValues");

    action.setCallback(this, function(response){
        var state = response.getState();
        if(state === "SUCCESS") {
            var result = response.getReturnValue();
            console.log('=====result====',result);//you will get picklist values here
        }
    })
    $A.enqueueAction(action);
}

Best Answer

Related Solutions

[SalesForce] Issue with GlobalDescribe Field Results and Managed Package

[SalesForce] Object and Field Describe in Lightning Component

Related Topic