<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/" version="2.0">
  <channel>
    <title>topic Re: How to get style system inputs data in custom component in Adobe Experience Manager Questions</title>
    <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/384007#M12197</link>
    <description>Thanks.</description>
    <pubDate>Wed, 21 Oct 2020 14:18:18 GMT</pubDate>
    <dc:creator>sagrawal</dc:creator>
    <dc:date>2020-10-21T14:18:18Z</dc:date>
    <item>
      <title>How to get style system inputs data in custom component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/383438#M12192</link>
      <description>&lt;P&gt;Hi All,&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;I have a use case to display List in multiple ways based on user selection&lt;/P&gt;&lt;P&gt;1. Horizontal List&lt;/P&gt;&lt;P&gt;2. Carousel List&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;FONT face="inherit"&gt;In my current approach I am loading both views on&amp;nbsp;&lt;/FONT&gt;component&lt;FONT face="inherit"&gt;&amp;nbsp;load&amp;nbsp; and just do a change of CSS "display:none" to block for&amp;nbsp;&amp;nbsp;&lt;/FONT&gt;selected option&lt;FONT face="inherit"&gt;.&amp;nbsp; So &lt;/FONT&gt;drawback&lt;FONT face="inherit"&gt;&amp;nbsp;is i have to load both views with duplicate data.&lt;/FONT&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;FONT face="inherit"&gt;Is there any way I can get the &lt;/FONT&gt;selected&lt;FONT face="inherit"&gt;&amp;nbsp;&lt;/FONT&gt;style system&lt;FONT face="inherit"&gt;&amp;nbsp;data to &lt;/FONT&gt;component&lt;FONT face="inherit"&gt;&amp;nbsp;HTML like Display="Carousel" so I will load all tag and populate data in respective tag only and other view &lt;/FONT&gt;container&lt;FONT face="inherit"&gt;&amp;nbsp;will be empty.&lt;/FONT&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Thu, 15 Oct 2020 19:26:41 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/383438#M12192</guid>
      <dc:creator>sagrawal</dc:creator>
      <dc:date>2020-10-15T19:26:41Z</dc:date>
    </item>
    <item>
      <title>Re: How to get style system inputs data in custom component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/383591#M12194</link>
      <description>&lt;P&gt;&lt;LI-USER uid="17381684"&gt;&lt;/LI-USER&gt;,&lt;/P&gt;&lt;P&gt;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 &lt;STRONG&gt;view(./isHorizontalListView)&lt;/STRONG&gt;&amp;nbsp;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.&amp;nbsp;&lt;/P&gt;&lt;P&gt;&lt;STRONG&gt;Example:&lt;/STRONG&gt;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;LI-CODE lang="markup"&gt;&amp;lt;div class="customlistcomponent"&amp;gt;
   &amp;lt;div data-sly-test="${properties.horizontalview}" class="customlistcomponent__horizontal-list"&amp;gt;
       // horizontal-list specific html structure goes here
   &amp;lt;/div&amp;gt;
   &amp;lt;div data-sly-test="${!properties.horizontalview}"  class="customlistcomponent__carousel-list"&amp;gt;
       // carousel-list specific html structure goes here
   &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;&lt;/LI-CODE&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;&lt;P&gt;&amp;nbsp;&lt;/P&gt;</description>
      <pubDate>Fri, 16 Oct 2020 19:40:32 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/383591#M12194</guid>
      <dc:creator>BrianKasingli</dc:creator>
      <dc:date>2020-10-16T19:40:32Z</dc:date>
    </item>
    <item>
      <title>Re: How to get style system inputs data in custom component</title>
      <link>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/384007#M12197</link>
      <description>Thanks.</description>
      <pubDate>Wed, 21 Oct 2020 14:18:18 GMT</pubDate>
      <guid>https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-get-style-system-inputs-data-in-custom-component/m-p/384007#M12197</guid>
      <dc:creator>sagrawal</dc:creator>
      <dc:date>2020-10-21T14:18:18Z</dc:date>
    </item>
  </channel>
</rss>

