Modification of core functionality of multifield in dialog.

[maturubhanu]

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.

[ManviSharma]

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.
     
     
     
     
     

[PRATHYUSHA_VP · Accepted solution]

Hi @maturubhanu 

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

Thanks

[Mahedi_Sabuj]

You can achieve the same functionality using nested multifield.

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

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