Skip to main content
Level 2
Feb 17, 2025 8:42 AM UTC
Solved

Modification of core functionality of multifield in dialog.

Hi,

I have a requirement involving a core multifield dialog. Currently, the 'Add' button is located at the end of the last field. However, I need the 'Add' button to appear under each field. For example, if there are 6 text fields, the 'Add' button should be present under each of the 6 fields. Is it possible to achieve this? If so, could you please guide me on how to do it?.

Multifield means the granite one.

 

Thanks,

Bhanu M.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
PRATHYUSHA_VP
PRATHYUSHA_VPAccepted solution
Community Advisor
Feb 17, 2025 11:53 AM UTC

Hi @maturubhanu 

 

I would suggest to write a custom script of your own to render the multifield add button similar to OOTB functionality. 

 

Thanks

Prathyusha - AEM Developer

3 replies

ManviSharma
Adobe Employee
Adobe Employee
Feb 17, 2025 10:18 AM UTC

Hi Team,


To customize the multifield, you will need to create an overlay of the existing component. You can do this by copying the multifield component from /libs to /apps so that you can safely make changes without affecting the core implementation.

The Granite UI multifield is part of the Coral UI framework, which provides a set of reusable components for building AEM dialogs. The multifield component is typically defined in the repository under the path /libs/granite/ui/components/coral/foundation/form/multifield.


Then you would need to create an Overlay
:

  • To customize the multifield, you will need to create an overlay of the existing component. You can do this by copying the multifield component from /libs to /apps so that you can safely make changes without affecting the core implementation.
  1. Override the render.jsp:

    • Inside your overlay, locate the render.jsp file. This file controls how the multifield is rendered in the dialog. You will need to modify this file to change the placement of the 'Add' button.

      After that, you can accordingly modify the rendering logic.






Translate
PRATHYUSHA_VP
Community Advisor
PRATHYUSHA_VPCommunity AdvisorAccepted solution
Community Advisor
Feb 17, 2025 11:53 AM UTC

Hi @maturubhanu 

 

I would suggest to write a custom script of your own to render the multifield add button similar to OOTB functionality. 

 

Thanks

Translate
Prathyusha - AEM Developer
Mahedi_Sabuj
Community Advisor
Community Advisor
Feb 17, 2025 7:45 PM UTC

You can achieve the same functionality using nested multifield.

https://aemhints.com/2020/10/24/coral-nested-multifield-aem65/

https://medium.com/p/92ff8d036ba1

Translate
Mahedi Sabuj