Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
SOLVED

Footer with 3 sections in custom dialog

Avatar

Level 2

stefanjank_0-1657698217963.png

I want to create custom footer component like this, which will have footer dialog and inside that user can add 3 titles and add links, how I can achieve this

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

The simplest implementation is : 
Create an container component with parsys example Footer

Create another component i.e. footer-tile, this can have a dialog to add title and links. which can be drag and drop in Footer component

 

If you already have title and link atom then you can use those as well.



Arun Patidar

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

The simplest implementation is : 
Create an container component with parsys example Footer

Create another component i.e. footer-tile, this can have a dialog to add title and links. which can be drag and drop in Footer component

 

If you already have title and link atom then you can use those as well.



Arun Patidar

Avatar

Community Advisor

@stefanjank You can create a Tab Component with the dialog configuration as shown in the below screenshot.

shaileshbassi_0-1657718418212.png

You can make a generic tab as well, if required to specific the no of tabs required.

 

Steps:

1. Read the no of tabs and based on that display the tabs to be configured. This will be optional.

2. Configure the different tabs.

3. In the sling model, either you can fetch the value based on the hard code field Name i.e. 

shaileshbassi_1-1657718586475.png

and write your logic to read and create the custom Map or List from the tabs multifield list.

4. Or you can iterate based on the no of tabs and make it dynamic using the for loop, but in this case the name field should be name something like ./items_1 and iterating in the loop you can fetch the respective values.

5. Return the list from the Sling Model

6. Iterate the sling model from sightly.

 

Hope this helps!

Thanks