Level 2

Solved

How do I implement the out of the box button component within a custom component?

Forum|Forum|2 years ago
February 14, 2023
5 replies
3506 views

I want the button component to come onto my custom component. The button should be customizable like so:

This is dialog box that comes up when you try to configure the button. I would like this to come up when I click on the implemented button within the custom component I built.

For less confusion, the buttons have rendered since I added it to the html file. But I would like to able to configure the button with the dialog box popping up.

Is this possible?

@kautuk_sahni @BrianKasingli @arunpatidar @DEBAL_DAS @santoshsai

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

Best answer by arunpatidar

Hi, so I tried that by editing the content xml file. I changed the supertype to a container.

Do I have to change something else as well? So far, it's not allowing me to add any components.

you don't need to allow button component in your customcomponent.

Add isContainer property to your component.

Example

https://github.com/arunpatidar02/aemaacs-aemlab/blob/master/ui.apps/src/main/content/jcr_root/apps/aemlab/oneweb/concept/components/adaptive-image/adaptive-image.html

Himanshu_Jain

Community Advisor

Embed the OOTB component in your custom one by adding a placeholder like for tabs , accordion where you can drag and drop any other existing component .

Himanshu Jain

C

cosmicthiefAuthor

Level 2

Hi, thank you for your response. I'm very new to AEM so I don't quite understand what you mean by adding a placeholder. How would I do that?
Thanks

Manu_Mathew_

Community Advisor

@cosmicthief You could probably include the dialog of the OOTB button components via /libs/granite/ui/components/coral/foundation/include and customize the HTML/CSS as you would like.

arunpatidar

Community Advisor

you can embed those button using data-sly-resource in custom component.

<div class="custom-comp">

......

<div class="cmp-custom-bt1" data-sly-resource="${@path='btn1', resourceType='mypass/content/button'}"></div>
<div class="cmp-custom-bt2" data-sly-resource="${@path='btn2', resourceType='mypass/content/button'}"></div>


</div>

Arun Patidar

C

cosmicthiefAuthor

Level 2

Hi, thank you for your response. I have already added that to my HTL file. With that only the empty button is rendered. I would like the button to have the options to edit text etc (exactly like the dialog box I attached to the original question). Do you have any recommendations of what I should do? (I am very new to AEM so I may need extra steps that are considered obvious haha.)

Thanks

arunpatidar

Community Advisor

you need to create your custom component as a container and make button components editable within custom components. It is like composite component.

check the button components from left trail content tree

Arun Patidar

Magicr

Level 6

@cosmicthief An off topic question: What is the purpose of mentioning the below users? Does it mean that other users of this forum shall not answer your question?