Hello All,
I have extended the core button component. how can we convert it into multifield button.
Solved! Go to Solution.
Views
Replies
Total Likes
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
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
Thanks for your response,
I need to just convert the button component into a multifield button component.
Thank you.
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
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:
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:
Hope it helps!
Thanks,
Nupur
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".