Can you customize the button label in AEM 6.5 while using mutifield | Community
Skip to main content
A
ajoshi84
Level 2
March 23, 2022
Solved

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

  • March 23, 2022
  • 3 replies
  • 1945 views

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.
Best answer by Fanindra_Surat

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

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

    DEBAL_DAS
    DEBAL_DAS
    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. 

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

       

      Terms & ConditionsAccessibility statement

      Loading footer...