0

I am building a component using a lightning-record-edit-form, which may either display an existing record for edit, or a new record for create. The component will set the record-id appropriately. One of the fields I need to display is a Lookup field, and it should not be user-editable. When the edit form is displaying an existing record, this field is guaranteed to be pre-populated, so a lightning-output-field would work. When displaying a new record for create, the containing LWC will know the correct record id for the lookup (and should set it prior to save); I need to pre-populate the value and display the field, but I can't figure out how to pass the value so that the lightning-output-field can display it.

The only way I know to pre-populate a value in a lightning-record-edit-form is to use the value attribute of a lightning-input-field component. However, if I do that, the user can change the value, which should not be allowed. I would normally use the read-only attribute, but per the lightning-input-field docs (and confirmed empirically), that does not work for lookup fields - it remains editable.

I tried adding both a hidden lightning-input-field with value attribute to allow me to set the value, and a lightning-output-field to show the value, but that doesn't work - the output field remains blank.

I am aware that I could intercept the submit event and set the lookup id in the fields object before calling this.template.querySelector('lightning-record-edit-form').submit(fields), but displaying the lookup on the form is a requirement.

I considered just displaying the value myself, but assuming that I only have the record Id, I would need to separately query for the related field's display value, and attempt to format to match the rest of the form. I'm saving this as a last resort; I'm hoping there's some way to tell the record-edit-form to populate the lookup field with my id value, and allow an OOB component to display the corresponding record name for that value.

Improve this question
1
  • Have you tried using the disabled attribute instead of read-only for lightning-input-field?
    – adriancg
    Jan 13, 2021 at 15:48

1 Answer 1

Reset to default
2

I did something similar some time ago, but with the aura version of the component (take a look here)... you can implement the same idea easily in LWC, although with this approach you'll have to retrieve the related record to get the Name (you could use @wire and getRecord LDS wire adapter for that).

Edit: thinking about it I remembered a more recent implementation of the view you could take, this one, look at how I display ownerNameValue. Hope that helps.

Improve this answer
3
  • The caveat here is that since he only has the Id he would have to query the related record to get the Name so he can statically render the lookup field markup, right?
    – adriancg
    Jan 14, 2021 at 16:31
  • 1
    Yes, that's correct. (Edited to be more clear)
    – Alba Rivas
    Jan 14, 2021 at 16:35
  • Good point to just wire getRecord - Let LDS worry about optimizing the query.
    – Jason Clark
    May 14, 2021 at 17:43

You must log in to answer this question.

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