1

I am not able to display the salutation pick-list field on the lightning component, I have tried lightning:recordEditForm and force:recordData

Can someone please suggest the right path to show the pick-list field by using LDS?

Using lightning:recordEditForm

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" >
    <aura:attribute name="recordId" type="String" />

        <lightning:card iconName="action:add_contact" title="Add Contact">
            <div class="slds-p-around_small">
            <lightning:recordEditForm 
                                      objectApiName="Contact"
                                      onsuccess="{!c.handleSuccess}">
                <lightning:messages />
                <lightning:inputField fieldName="salutation" />
                <lightning:inputField fieldName="FirstName" />
                <lightning:inputField fieldName="LastName" />
                <lightning:outputField fieldName="Name" />
                <lightning:inputField fieldname="Languages__c" />
                <lightning:inputField fieldName="Birthdate" />
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Email" />
                <lightning:button aura:id="submit" type="submit" label="Save record" class="slds-m-top_medium" />
            </lightning:recordEditForm>
            <lightning:navigation aura:id="navService"/>
            </div>
        </lightning:card>   
</aura:component>

Using Force:recordData

<aura:component implements="lightning:actionOverride,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId" access="global">
    <aura:attribute name="newContact" type="Object"/>
    <aura:attribute name="simpleNewContact" type="Object"/>
    <aura:attribute name="newContactError" type="String"/>
    <force:recordData aura:id="contactRecordCreator"
                      layoutType="FULL"
                      targetRecord="{!v.newContact}"
                      targetFields ="{!v.simpleNewContact}"
                      targetError="{!v.newContactError}"
                      />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!-- Display the new contact form -->
    <div class="Create Contact">
        <lightning:card iconName="action:new_contact" title="Create Contact">
            <div class="slds-p-horizontal--small">
                <lightning:input aura:id="contactField" label="Salutation " value="{!v.simpleNewContact.Salutation}"/>
                <lightning:input aura:id="contactField" label="First Name" value="{!v.simpleNewContact.FirstName}"/>
                <lightning:input aura:id="contactField" label="Last Name"  required="true" value="{!v.simpleNewContact.LastName}"/>
                <lightning:input aura:id="contactField" label="Title" value="{!v.simpleNewContact.Title}"/>
                <br/>
                <lightning:button label="Save Contact" variant="brand" onclick="{!c.handleSaveContact}"/>
            </div>
        </lightning:card>
    </div>
    <!-- Display Lightning Data Service errors -->
    <aura:if isTrue="{!not(empty(v.newContactError))}">
        <div class="recordError">
            {!v.newContactError}</div>
    </aura:if>
</aura:component>
3

Name:- The contact’s combined first name, middle name, last name, and suffix, as displayed on the contact detail page.

  • Lightning:RecordEditForm inherit the property of the field, it will show the field in their datatype whereas all the fields in Force:RecordData will be shown as Text field.

Instead of using FirstName, LastName separately and go for Salutation custom picklist because it is not available in Salesforce to use it as a separate field, You Can use Name field in Lightning:RecordEditForm to display all the three fields as follows:-

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordId" type="String" />

        <lightning:card iconName="action:add_contact" title="Add Contact">
            <div class="slds-p-around_small">
            <lightning:recordEditForm objectApiName="Contact">
                <lightning:messages />
                <lightning:inputField fieldName="Name" />
                <lightning:inputField fieldName="Birthdate" />
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Email" />
                <lightning:button aura:id="submit" type="submit" label="Save record" class="slds-m-top_medium" />
            </lightning:recordEditForm>
            </div>
        </lightning:card>   
</aura:component>

Here is the screenshot:-

enter image description here

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.