Expand my Community achievements bar.

SOLVED

Policies, clientlibs and styling for custom components.

Avatar

Level 1

Hi,

I'm having a bit of trouble understanding how to style my custom components on 6.4.

Currently I have a clientlibs folder with my css docs inside the apps.component files. This defines the default behaviour of my component and thats working fine.

Now, what if I wanted to create a component, and allow authors to select from a few styles for that particular component? Browsing the documentation has led me to adding CSS from the component policy. The only problem with that is the "Policy" button is not available on custom components I make (can I activate it somehow?). Or is there a better way to do it by putting the component into a container and setting up the CSS via the policy of the container? This doesn't seem like it would allow for internal component specific styling changes.

Assuming I'm able to set up a policy for a custom component or for a core component - once I set up the CSS rules in the policy on AEM, where do I dump my actual stylesheets? Should they go into the clientlibs of that particular component in apps or is it somewhere in policies, templates? Will AEM pick them up automatically?

Sorry for asking multiple questions, but the documentation hasn't made it clear what the best practice is for adding multiple styles to choose from for a custom component.

All help is appreciated! Thanks

1 Accepted Solution

Avatar

Correct answer by
Level 10

To enable component level policy on your custom components, check this  - Re: Add Policy to the custom components

You could store the custom stylesheet within that component as a part of local clientlibs or at a project/page level based on how modular your site-design is/would be and what are your requirements, performance SLAs and other aspects?  The configured class' definition must be available on that page for it to work irrespective of the fact that it is located in global vs local scope.

Check OOB We-retail or WKND site's code  - /apps/weretail/components/content/button/clientlibs

Style system might help as well for your use case --

https://medium.com/adobetech/using-aem-style-system-to-increase-reusability-of-components-8177c5b65c...

Adobe Experience Manager Help | Understanding how to code for the AEM Style System

View solution in original post

1 Reply

Avatar

Correct answer by
Level 10

To enable component level policy on your custom components, check this  - Re: Add Policy to the custom components

You could store the custom stylesheet within that component as a part of local clientlibs or at a project/page level based on how modular your site-design is/would be and what are your requirements, performance SLAs and other aspects?  The configured class' definition must be available on that page for it to work irrespective of the fact that it is located in global vs local scope.

Check OOB We-retail or WKND site's code  - /apps/weretail/components/content/button/clientlibs

Style system might help as well for your use case --

https://medium.com/adobetech/using-aem-style-system-to-increase-reusability-of-components-8177c5b65c...

Adobe Experience Manager Help | Understanding how to code for the AEM Style System