Level 3

Solved

Extend core Button component into multifield

5 replies
1409 views
Translate All

Hello All,

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

aanchal-sikkaAccepted solution

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

aanchal-sikka

Community Advisor

Hello @sateeshkreddy

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-childreneditor-for-custom-components/td-p/374881

Translate

Aanchal Sikka

S

sateeshkreddyAuthor

Level 3

Thanks for your response,

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

Thank you.

Translate

aanchal-sikka

Accepted solution

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

Translate

Aanchal Sikka

Nupur_Jain

Adobe Employee

Hi @sateeshkreddy

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:

Create new component maybe name it as button group component.
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.
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:

Custom button component that extends core button compnent. Change styling html etc.
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

Translate

Ankan_Ghosh

Level 3

Hello @sateeshkreddy

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

Translate

Sign up

Login with SSO

Login to the community

Login with SSO