Extend core Button component into multifield

[sateeshreddy]

Hello All,

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

[aanchal-sikka]

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

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

[sateeshreddy]

Thanks for your response,

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

Thank you.

[aanchal-sikka · Accepted solution]

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

[Nupur_Jain]

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

[Ankan_Ghosh]

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