Add desired child component in core accordion component | Community
Skip to main content
Level 2
November 25, 2024
Solved

Add desired child component in core accordion component

  • November 25, 2024
  • 2 replies
  • 546 views

Has anyone done the following and if so how to do it?

I am overlaying the core accordion component. In 'items' tab, on the click of add , i want my desired child component to be dynamically added, i.e., i do not want to choose the child component from the dropdown but i want the slide to be added on click of add instead of going to dropdown to select the component.


 

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 Ritesh_Mittal

Hi @zendark ,


You can try below-

  1. Create a Sling Model - The model can manage the slides and includes a method to add a new slide to the JCR.
  2. Script to trigger slide addition:

$('.add-slide-btn').on('click', function() {

    $.ajax({

        url: '/bin/add-slide', // Custom Sling Servlet or endpoint

        type: 'POST',

        success: function() {

            // Reload or dynamically update the Accordion

        }

    });

});

  1. Create a Sling Servlet to call the addSlide() method in the Sling Model and save the slide to the JCR.

This solution allows for dynamic slide addition via a button, with the data being saved for persistence.

Thanks

Ritesh Mittal

2 replies

arunpatidar
Community Advisor
Community Advisor
November 25, 2024

Hi @zendark 
Its a multifield, so you can remove popup/selection logic and just add Title maybe.

And In your sling model read those number of items and , inject the Slider component in HTL.

Arun Patidar
Ritesh_Mittal
Community Advisor and Adobe Champion
Ritesh_MittalCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
November 25, 2024

Hi @zendark ,


You can try below-

  1. Create a Sling Model - The model can manage the slides and includes a method to add a new slide to the JCR.
  2. Script to trigger slide addition:

$('.add-slide-btn').on('click', function() {

    $.ajax({

        url: '/bin/add-slide', // Custom Sling Servlet or endpoint

        type: 'POST',

        success: function() {

            // Reload or dynamically update the Accordion

        }

    });

});

  1. Create a Sling Servlet to call the addSlide() method in the Sling Model and save the slide to the JCR.

This solution allows for dynamic slide addition via a button, with the data being saved for persistence.

Thanks

Ritesh Mittal