Level 2

Solved

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

8 replies
1754 views
Translate

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.

arunpatidarAccepted solution

New Participant

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

Arun Patidar

Varun_Shakya

New Participant

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.

Translate

Mohit_KBansal

Employee

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

Translate

arunpatidar

New Participant

@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

Translate

Arun Patidar

I

iamsakareemAuthor

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.

Translate

T

Tushar_Gupta

Employee

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.

Translate

Sign up

Login with SSO

Login to the community

Login with SSO