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?

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
    Mar 21 '18 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
    Mar 21 '18 at 14:18
  • @edelrabe, my apologies oversight at my end. changed the answer to a simple output text. this should do for you
    – RedDevil
    Mar 21 '18 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);
}

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.