4

I have a custom lightning component to create Contact record.

<lightning:recordEditForm objectApiName="Contact">
    <lightning:messages />

    <lightning:inputField fieldName="FirstName" />
    <lightning:inputField fieldName="LastName" />
    <lightning:inputField aura:id="account-field" 
                          fieldName="AccountId" 
                          value="{! v.accountId }" />

    <lightning:button type="submit" label="Create Contact" />
</lightning:recordEditForm>

AccountId field is known upfront, how I can prevent users from editing it?

3 Answers 3

4

Use ui:outputText to show the account Id it cannot be edited.

<ui:outputText value="{!v.accountId}" />
3
  • I've tried it and it doesn't work. <lightning:outputField fieldName="AccountId" /> outputs only label "Account ID" in my form. lightning:outputField is intended to work with lightning:recordFormView only as I understand.
    – edelrabe
    Commented Mar 21, 2018 at 14:15
  • It displays Account Name if I specify contact id, but in my case I don't have contact id, since it is to create new record. I've removed recordId attribute from the lightning:recordEditForm tag to avoid confusion.
    – edelrabe
    Commented Mar 21, 2018 at 14:18
  • @edelrabe, my apologies oversight at my end. changed the answer to a simple output text. this should do for you
    – RedDevil
    Commented Mar 21, 2018 at 17:22
3

just a little change from sunnyhell trick. I just used it myselft with a minor change, I find it looks better with the following css:

.THIS .lookup-disabled, .THIS .lookup-disabled input {
    pointer-events: none;
    border: none;
}
.THIS .lookup-disabled button {
    display: none;
}
2

There is known issue about "disabled" attribute on lightning:inputField for lookups https://success.salesforce.com/issues_view?id=a1p3A000000JWo7QAG

This css trick works for me. Add css class to your lookup inputField, for example:

<lightning:inputField aura:id="account-field" 
                          fieldName="AccountId" 
                          value="{! v.accountId }"
                          class="lookup-disabled" />

And then in component bundle css add the following:

.THIS.lookup-disabled, .THIS.lookup-disabled input {
    pointer-events: none;
    cursor: not-allowed;
    background-color: rgb(236, 235, 234);
    border-color: rgb(201, 199, 197);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .