How to get style system inputs data in custom component

[sagrawal]

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.

[BrianKasingli · Accepted solution]

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

[sagrawal]

Thanks.