Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

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

Avatar

Level 2

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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


Arun Patidar

View solution in original post

8 Replies

Avatar

Level 7

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.

Avatar

Employee Advisor

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

Avatar

Level 2

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.

Avatar

Community Advisor

Hi,

You need to create another policy for this.

Why you can't add another policy?



Arun Patidar

Avatar

Level 2

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?

Avatar

Correct answer by
Community Advisor

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


Arun Patidar