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

[iamsakareem]

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?

[tusharbias]

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]

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-doc... 

[arunpatidar]

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

[iamsakareem]

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.

[arunpatidar]

Hi,

You need to create another policy for this.

Why you can't add another policy?

[iamsakareem]

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?

[arunpatidar · Accepted solution]

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"/>
                        

[Varun_Shakya]

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...

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