Salesforce Lightning Component

Displaying Field According to Its Datatype In Salesforce Lightning Component

For my recent Requirement, I had to show the LookUp field of inside a lightning component. I had to use two components, the parent and child component. But how could I show the data type of the field when and all its functionality, like creating a new record as it works inside a standard Salesforce field on UI.

Parent Component

Inside which there is a table:

Advertisement

<aura:component>
    <table > 
        <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate">S.No</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="LookUp Field">LookUp Field /Master-Detail</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Name"> Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Field1">Field1</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Picklist Field">Picklist Field</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Field2">Field2</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="CheckBox">CheckBox</div>
                </th>
                <th></th>
            </tr>
        </thead>   
        <tbody>
                   
            <aura:iteration items="{!v.objList}" var="item" indexVar="index">
                <c:childComponent objInstance ="{!item}" rowIndex="{!index}" />
            </aura:iteration>
        </tbody>
    </table>
</aura:component>    

dont miss out iconDon't forget to check out: Illustrations in Salesforce Lightning Experience

Instead of writing code for getting the lookup field, you can simply use the <force:inputField>.

<force:inputField> will show the field as it is on a Salesforce object

Child Component

        <td> 
            {!v.rowIndex + 1}
        </td>
        <td>
            <div class="custom-outlook">
            <force:inputField value="{!v.objInstance.MyLookUpField}"/>
        </div>
        </td>
        <td>
            <ui:inputText class="slds-input" value="{!v.objInstance.Name}"/>
        </td>
        <td>
            <ui:inputText class="slds-input" value="{!v.objInstance.Field1}"/>
        </td>
        <td>
            <div class="custom-selectbox">
            <force:inputField value="{!v.objInstance.MyPicklistField}"/>
                </div>
        </td> 
        <td>
                <ui:inputText class="slds-input" value="{!v.objInstance.Field2}"/>
        </td>
       <td>
           <div class="custom-checkbox">
                <force:inputField class="slds-input" value="{!v.objInstance.CheckBox}"/>
               </div>
        </td>

dont miss out iconCheck out another amazing blog by Krati here: How to Get Public Link for Salesforce File

Here, the LookUp field will show, on row 2, and the Picklist field will display its values. In short, if you ever need to use the fields according to their data-type use <force:inputField>, and save yourself the trouble of doing more code.

Responses

Popular Salesforce Blogs