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:
<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>
Don'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>
Check 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