when do you use styling policies VS component dialog properties?

[jayv25585659]

for example: I want to hide sections in the component (example: I want to make the search bar optional in my custom header component). I know I can use either methods (with additional CSS for styling policies) but I would default to using component dialog properties as that's what I'm used to (does NOT necessarily mean it's the correct one)

thoughts?

[kapil_rajoria]

Hi @jayv25585659 

Choosing between using the component dialog properties or the Style System in AEM depends on your specific use case and requirements. Here's a comparison of both approaches to help you decide which one is better for your situation:

Component Dialog Properties

Pros:

1. Ease of Use for Authors: Authors can easily toggle the visibility of elements directly from the component dialog.
2. Explicit Control: Provides a clear and explicit way to control the component's behavior.
3. Simple Implementation: Straightforward to implement without needing additional CSS.

Cons:

1. Component-Specific: This approach is specific to the component, which might not be reusable across different components.
2. Dialog Overhead: Adding more fields to the dialog can clutter the UI, especially if there are many optional elements.

Style System

Pros:

1. Reusability: Styles can be applied across different components, making it easier to manage and maintain consistency.
2. Separation of Concerns: Keeps the styling logic separate from the component logic.
3. Scalability: Easier to scale as you can manage styles centrally.

Cons:

1. Complexity: May require more initial setup and understanding of the Style System.
2. Author Training: Authors need to understand how to apply styles using the Style System, which can be an additional learning curve.

[MukeshYadav_]

Hi @jayv25585659 ,

Apart from centrality and all mentioned in other replies.

If we use css html element will be still there in dom(end user can easily change manipulate) , only display will be none.

However we use component properties with help of sightly  it will render or remove the element itself.

So in general if we want to changes css(style) properties only irrespective of dom element we should go with style system.

If we want to hide/show html or functionality we should go with sightly as it will be secure.

Thanks,

[pulkitvashisth]

Hi @jayv25585659 
If your question is weather to use design dialog or CQ dialog for above configuration of your component, I would advise to keep this configurable at template level ( in component policy ) / Or if you are using experience fragment for custom header then you can keep it configurable at experience fragment itself ( using same component policy or component cq:dialog)
This is because you would want your change at all the pages that are created using a particular template or all the pages where the header experience fragment is present.

But if you want to make it specific to a page/ configurable at page level : then you can keep this as a checkbox in you component CQ dialog. Or if using experience fragment , control the visibility using authored id in experience fragment CQ:dialog.

Let me know if this helps.

[arunpatidar · Accepted solution]

Hi @jayv25585659 

In your case, it's best to use the dialog. While hiding content with CSS can work, it only makes the content invisible to users, leaving it in the source code and still crawlable by SEO. If you want to completely exclude the content, don't generate it in the source at all.

[aanchal-sikka]

@jayv25585659 

For making a feature optional, I would prefer to use:

• Dialog properties if component behaviour is specific to pages
• Policy: if all occurrences of component across a template are supposed to follow consistent show/hide.

I prefer styles to be used for UI aspects. But, enabling/disabling a functionality via configurations.