Requirement for hiding some styles of a component which is included in other components. | Community
Skip to main content
I
iamsakareem
Level 2
August 3, 2022
Solved

Requirement for hiding some styles of a component which is included in other components.

  • August 3, 2022
  • 3 replies
  • 1750 views

Consider this scenario, I have a CTA component with style system having styles namely, system style A, style B, style C
I have a teaser component, which includes the above CTA component through a data-sly-resource. 

Now, I have  a requirement where I need to display only style A, style B for the CTA added in teaser via data-sly-resource But not style C. 

Is there any possibility to achieve this? Have anyone had chance to tackle this scenario before?

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 arunpatidar

Thats new policy only i have added. Just for your clarity i did the below things.

Created a new policy for cta, Which has only those required styles needed in teaser CTA.
And now i dont know how i can use this policy for only that teaser CTA. 
This is how i have added the cta in a teaser.html
<div class="cta" data-sly-resource="${@ path='cta', resourceType='cah-corp/components/content/cta/v1/cta', decoration=true}"></div>

Now my question is, How can i use that new policy while adding the cta in teaser.html
Is it even possible?


You need to do it like

 

<teaser cq:policy="myapp/components/content/table/policy_myapp_table_all"jcr:primaryType="nt:unstructured"sling:resourceType="wcm/core/components/policies/mapping"> <cah-copr jcr:primaryType="nt:unstructured"> <components jcr:primaryType="nt:unstructured"> <content jcr:primaryType="nt:unstructured"> <cta jcr:primaryType="nt:unstructured"> <v1 jcr:primaryType="nt:unstructured"> <cta cq:policy="myapp/components/content/cta/policy_myapp "jcr:primaryType="nt:unstructured"sling:resourceType="wcm/core/components/policies/mapping"/>

3 replies

T
Adobe Employee
Tushar_GuptaAdobe Employee
Adobe Employee
August 3, 2022

IMO, you should not do this. This is anyways giving your authors lot more flexibility and if other brands/sites likes new style they can opt for it without any extra development effort. 

You should try to push back on this requirement.

OUr comonents should be flexible we should not create componets specific to a need rather make it general so that it can be used at multiple places, this will help you to have a limited no. of components which inturn is beneficial for customer only.

    Mohit_KBansal
    Adobe Employee
    Mohit_KBansalAdobe Employee
    Adobe Employee
    August 3, 2022

    Technically it's possible by using different policies [1] for CTAs, one global policy for CTA, and another for CTA below Teaser. 

    In your policy, configure the styles you need.

     

    [1] https://experienceleague.adobe.com/docs/experience-manager-64/forms/administrator-help/work-with-document-security/creating-policies.html?lang=en 

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      August 3, 2022

      @iamsakareem 

      Agreed with @mohit_kbansal ,  You can also have different policies if component is embedded in another component

      https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-define-policy-for-nested-container-component/td-p/392712 

      Arun Patidar
        I
        iamsakareemAuthor
        Level 2
        August 3, 2022

        My scenario is, I have a teaser component. in teaser.html, I am including the cta with below code snippet. 

        <div class="cta" data-sly-resource="${@ path='cta', resourceType='cah-corp/components/content/cta/v1/cta', decoration=true}"></div>

        I cannot add cq:policy='cah-corp/components/content/carousel/v1/carousel/cah-corp-cta-policy' to this tag, Can you please rewrite and help me how i can achieve if i am including direct component.

          Varun_Shakya
          Community Advisor
          Varun_ShakyaCommunity Advisor
          Community Advisor
          August 3, 2022

          https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/style-system.html?lang=en

           

          check this out you can add different styles to your component and apply accordingly.

            Terms & ConditionsAccessibility statement

            Loading footer...