Can you customize the button label in AEM 6.5 while using mutifield

[ajoshi84]

We have nested multiple fields in our component and the default "Add" button is adding lots of confusion. Is there a easy way to customize that without writing complex JavaScript? I would assume Adobe would allow to add a property called "AddButtonLabel" or something to make simple and complete OOB.

Also, is there a way to also apply background color for various nested section?

[Fanindra_Surat · Accepted solution]

Hi @ajoshi84 ,

Refer to https://bimmisoi.blogspot.com/2020/08/colorful-multifields-in-aem.html for adding colours to the nested multi fields.

For Add button label, I am afraid there is no OOTB way; but you can extend the above solution to write a custom javascript and modify the button labels using the classes 'group' and 'item' as identifiers to the parent and child multi fields.

Hope this helps!

Thanks,

Fani

[DEBAL_DAS]

In Coral3 multifield button label called: Add has been defined in /libs/granite/ui/components/coral/foundation/form/multifield/render.jsp as shown below -

So, we need to overlay and make necessary change.

You can refer https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/help-with-aem-multi-field/... , talking about another approach also. 

[rmarczak]

I've done it as follows:

1) add granite:class="some-specific-class" to your dialog multifield

2) create authoring specific clientlib say: "authoring-dialogs" category 

3) in jcr:root node of your dialog add 

extraClientlibs="[authoring-dialogs]"

4) in less file under the clinentlib 

.some-specific-class {
  > button {
    coral-button-label {
      display: none; //this hides the original "Add"
    }

    &:after {
      content: "Add new item" //Add whatever you need
    }
  }