Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Extend core Button component into multifield

Avatar

Level 3

Hello All,

I have extended the core button component. how can we convert it into multifield button.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You just need to create a component, which will have buttons available as multifield.

Similar to the screenshot attached. You can ignore all other extra tabs

 


Aanchal Sikka

View solution in original post

5 Replies

Avatar

Community Advisor

Hello @sateeshreddy 

 

We can use the Children Editor to have multifield of a specific Component types.

Its used in Carousal, Accordian components in WCM core components. Here you can restrict via policy, which type of components can be used in multifield. Please have a look

aanchalsikka_0-1689066032522.png

 

Similar discussion is available on:

https://github.com/adobe/aem-core-wcm-components/issues/696

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/customizing-the-childrened...


Aanchal Sikka

Avatar

Level 3

Thanks for your response,

 

I need to just convert the button component into a multifield button component.

 

Thank you.

Avatar

Correct answer by
Community Advisor

You just need to create a component, which will have buttons available as multifield.

Similar to the screenshot attached. You can ignore all other extra tabs

 


Aanchal Sikka

Avatar

Community Advisor

Hi @sateeshreddy 

 

The task you want to achieve does not fit to extending component usecase. You chose to extend when to want to add/delete fields/properties in dialog and html OR you want to change styling etc. But here the number of fields are going to be totally different and require full new dialog to achieve it.

You should follow the following steps to achieve your requirments:

  1. Create new component maybe name it as button group component.
  2. In dialog you can use aem multifield in which you will have to define button fields so that these fields can be added for each multifeld item.
  3. Now Create sling model to get list of button fields and return it to HTL and iterate accordingly.

Now, if you really want to go with extending approach. You can chose the way @aanchal-sikka suggested that is you will have to create two component:

  1. Custom button component that extends core button compnent. Change styling html etc.
  2. Group component where create a dialog just like carousel and accordion and author can chose to select custom button component in the list.

Hope it helps!

Thanks,

Nupur

Avatar

Level 3

Hello @sateeshreddy 

As per my knowledge, it will be better if we create a separate component whose cq dialog will have a multifield with a text field that will take a name (nodes of this name will be created under the parent component to save the authored data for every button). You will author the list as many times as you need the button to appear. We will return the list of names we authored from the Sling model and iterate in our sightly. The sightly markup will look like this :

 

<div class="cmp-multibutton-wrapper" data-sly-list.name="${model.nameList}">
    <div class="cmp-multibutton__button-each" data-sly-resource="${ @path=name, 
    resourceType='path/to/core/button/component'}"></div>
</div>

 This will drop multiple OOTB button components to the page and you can style them according to your need by targeting the parent class "cmp-multibutton-wrapper".