5

I have a form rendered using just a lightning-record-form - very cool to get so much done by this single LWC (Lightning Web Component).

But I'm trying to replace the labels with the inline help text after rendering (as we want more detailed prompts and labels can only be 40 characters whereas the help text can be 255 characters), using this as the first try:

renderedCallback() {
    this.template.querySelectorAll('.slds-form-element__label').forEach(element => {
        element.innerHTML = 'New label TBD';
    });
}

but the querySelectorAll does not match the labels created by the lightning-record-form.

One of the answers to this post Lightning Web Component Sticky Header - Not able to global do querySelectorAll mentions "you can only select the elements which are created by you in current component". Not too sure what that means, but what I see is that I can't find in the DOM elements created by platform LWC. Please confirm that that is expected behavior.

Any suggestions about different approaches to accomplish this appreciated too.

  • so your goal is to replace label with your own custom ones? – RedDevil Nov 18 '19 at 20:28
  • @RedDevil Yes. The code sample above just has "New label TBD" hardcoded but would be a lookup from the field metadata. Right now querySelectorAll matches no elements so the replacement values are moot. – Keith C Nov 18 '19 at 21:22
  • There is only little customization available on record form, please do have a look at record edit or view form, with them its possible to do a lot more. – Raul Nov 19 '19 at 7:38
  • @keithc, i have done it using record edit forms. i can put sample code for it if that works for you. – RedDevil Nov 19 '19 at 7:39
  • @RedDevil Delighted to get any solution to this. Our UX people want the >40 character labels. – Keith C Nov 19 '19 at 7:48
2

Using record edit form small POC below:

<template>
    <lightning-record-edit-form record-id="003XXXXXXXXXXXXXXX"
       object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <span>Custom label value</span>
        <lightning-input-field field-name="Email" variant="label-hidden">
        </lightning-input-field>
        <lightning-button
            class="slds-m-top_small"
            variant="brand"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </lightning-record-edit-form>
</template>

Basically lightning input field has a variant label hidden, we use that to hide the label of input field and put the custom label you want to.

In our case the fields to show were in a for loop reading from metadata, we read from there and whereever we had to override label we used a boolean to override and hide the label and expose custom label using a span/div tag.

  • Sorry, since I wrote the question I have tried that approach too. The blocker for me on this is that it is hard/impossible to add the DOM id of the input field to the label <label for="???">Custom label value</label> so that the label is clickable. This is particularly problematic for checkboxes. Think the CSS nesting is also a challenge. But well worth posting. – Keith C Nov 19 '19 at 7:57
  • @KeithC, would you mind sharing your code or some playground link? – RedDevil Nov 19 '19 at 8:00
  • It is this mechanism that is the problem stackoverflow.com/questions/12894169/…. Having to click only on the checkbox square rather than being able to click on the label is not a good thing. – Keith C Nov 19 '19 at 8:03
1

Your theory is correct.

When you use a component tag (whether custom or by LWC), it creates a Shadow DOM for its internal structure. This shadow DOM is not something that you can access or modify via DOM manipulation and this is by design. In your case, lightning-record-form is the tag and the label tags are part of its internal shadow DOM.

You can read more about Shadow DOM here where the Access Elements section talks more about what I said.

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.