Skip to main content
ajoshi84
Level 2
March 23, 2022
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
Community Advisor
March 23, 2022

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 in thread

3 replies

Fanindra_Surat
Community Advisor
Fanindra_SuratCommunity AdvisorAccepted solution
Community Advisor
March 23, 2022

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
    DEBAL_DAS
    DEBAL_DAS
    New Member
    March 24, 2022

    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
    Debal Das, Senior AEM Consultant
      rmarczak
      November 3, 2022

      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
      Terms & ConditionsAccessibility statement

      Loading footer...