How to get style system inputs data in custom component

Forum|Forum|5 years ago
October 15, 2020
1 reply
1294 views

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.

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 BrianKasingli

@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>

BrianKasingli

Accepted solution

Community Advisor and Adobe Champion

@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>

S

sagrawalAuthor

Level 2

Thanks.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded