[SalesForce] Set custom placeholder in lightning:recordEditForm

I have a form in Lightning Components written using lightning:recordEditForm. Inside that form I have lightning:inputField which is a lookup. Is it possible to set a custom placeholder in this input?

EDIT:
My lookup field is to object Employee. Therefore, the placeholder generated automatically is 'Search Employee'. I'm wondering if this is possible to change this placeholder.

Best Answer

It seems you cannot provide a custom placeholder text in lookup fields while using lightning:inputField.

Even though the component is rendered as an input type=text with a placeholder attribute you can't override the attribute.

As an example, if I provide something as below:

<lightning:inputField fieldName="AccountId" aura:id="aId"/>

I can see this rendered as below (removed other attributes) with the placeholder attribute in there:

<input id="input-4" type="text" placeholder="Search Accounts..." class="slds-input slds-combobox__input slds-input-has-icon_group-right">

However if I provide the placeholder attribute something as below (the compiler does not complain), but it never works and that the placeholder attribute always had "Search Accounts..." in there and was never overridden.

<lightning:inputField fieldName="AccountId" aura:id="aId" placeholder="My Text"/>

Related Solutions

Lightning Aura Components – How to Get Created Record ID in Lightning:recordEditForm

The below code will give us the created record id.

handleSuccess : function(component, event, helper) {
var payload = event.getParams().response;
console.log(payload.id);
}

lightning-recordeditform – Setting Attribute Required to lightning:inputField

maybe I found a solution to the problem. This is what I have set up:

In the object manager do not set the field in question to required. Rather, create a validation rule that checks for blank values.

In your component bundle create the following styles.

.THIS .customRequired{
 font-weight: 400; } .THIS .customRequired:before{    
 content: "*";
 margin: 0 0.125rem 0 0.125rem;
 color: rgb(194, 57, 52);
 float: left; } .THIS .none{
 display:none; }

In your controller create the following function

showRequiredFields: function(component, event, helper){
$A.util.removeClass(component.find("Input_contract_type__c"), "none");
},

In your component create a recordEditForm and set the onload function. Also, create and inputField and set the class attribute.

<lightning:recordEditForm onload="{!c.showRequiredFields}" aura:id="editForm" recordId="{!v.recordId}" objectApiName="Contract__c"> <lightning:inputField class="customRequired none" aura:id="Input_contract_type__c" fieldName="Contract_type__c" />

The css styles create a red star as label prefix. I figured out that if the star is not hidden on init, it will be displayed before the other fields are displayed. Therefore, I the star is hidden during init and is displayed onload.

Best Answer

Related Solutions

Lightning Aura Components – How to Get Created Record ID in Lightning:recordEditForm

lightning-recordeditform – Setting Attribute Required to lightning:inputField

Related Topic