Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

How to get style system inputs data in custom component

Avatar

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile

Avatar
Ignite 5
Level 2
sagrawal
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

0 solutions
Top badges earned
Ignite 5
Ignite 3
Ignite 1
Give Back 3
Give Back
View profile
sagrawal
Level 2

15-10-2020

Hi All,

 

I have a use case to display List in multiple ways based on user selection

1. Horizontal List

2. Carousel List

 

In my current approach I am loading both views on component load  and just do a change of CSS "display:none" to block for  selected option.  So drawback is i have to load both views with duplicate data.

 

Is there any way I can get the selected style system data to component HTML like Display="Carousel" so I will load all tag and populate data in respective tag only and other view container will be empty.

 

 

 

 

 

View Entire Topic

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

219 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

591 likes

Total Posts

572 posts

Correct Reply

219 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

16-10-2020

@sagrawal,

You can have 2 blocks of code in the HTL, where HTML is server-side rendered based on a selected attribute of the view option. In this case, you will not display; none, which inserts unwanted duplicated markup to your document; bad for SEO. In this case, the authors will be able to choose a view(./isHorizontalListView) from the TouchUI Component's Dialogue. You can also use Adobe's AEM Style System, but if the markup between the horizontal-list-view and carousel-list-view are juristically different or complicated, then stick to this approach. 

Example:

 

<div class="customlistcomponent">
   <div data-sly-test="${properties.horizontalview}" class="customlistcomponent__horizontal-list">
       // horizontal-list specific html structure goes here
   </div>
   <div data-sly-test="${!properties.horizontalview}"  class="customlistcomponent__carousel-list">
       // carousel-list specific html structure goes here
   </div>
</div>