Can you customize the button label in AEM 6.5 while using mutifield | Community
Skip to main content
ajoshi84
Level 2
Mar 23, 2022 10:19 PM UTC
Solved

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

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?

  

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Fanindra_Surat
Fanindra_SuratAccepted solution
New Participant
Mar 23, 2022 10:35 PM UTC

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

View reply

3 replies

rmarczak
New Participant
Nov 3, 2022 11:09 AM UTC

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
    }
  }

 

Translate
DEBAL_DAS
DEBAL_DAS
New Participant
Mar 24, 2022 3:32 AM UTC

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/td-p/288688 , talking about another approach also. 

Translate
    Fanindra_Surat
    Fanindra_SuratAccepted solution
    New Participant
    Mar 23, 2022 10:35 PM UTC

    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

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...