How to load specific style systems on a component based on user authoring

[sr1045]

Hello,

Greeting for the day!

We are using a content fragment component which supports title, table & Button models.

Now as per the requirement we have to only show styles based on authoring of model.

Eg. If Button Content Fragment is path is authored on content fragment component than only styles which are applicable for button should be available on the style systems to the author for selection.

Rest all the available styles should be hidden from the author.

Right now, all the styles are available to the author irrespective of model selection. 

Thanks in advance

[MayurSatav · Accepted solution]

Hi @sr1045 ,

To load specific style systems on a component based on user authoring in AEM, you can go for the following approach:

1. In the AEM Style System, create separate style categories or components for each model type (e.g., Title, Table, Button). Define the specific styles that are applicable to each model type within their respective style categories.

2. In the component dialog of the content fragment component, define a field to select the model type (e.g., a dropdown field to select Title, Table, or Button).

3. Use JavaScript to listen for changes in the model type field and trigger an action accordingly. When the model type is changed, update the available styles in the style system based on the selected model type.

4. Modify the style system component's HTML and CSS to hide or show the appropriate styles based on the selected model type. Use CSS classes or data attributes to target and toggle the visibility of the styles in the style system.

[sr1045]

Thank you @MayurSatav 

[Anmol_Bhardwaj]

Hi @sr1045 ,

I would approach this the following way:

1.  Identifying the styles for each model and storing them( in an arraylist probably), and sending the list based on input. ( Would create a function in a util class for this , and access it through a servlet.
2. Create a new clientlib which will call the above servlet based on the user selection if the component.
3. The servlet will respond with the allowed styles.
4. I would then hide ( display:none/visibility:hidden) all the other styles through the JS clientlib.
5. I would add this clientlib as an extraclientlib to the dialog.

That should do it.

[sr1045]

Thank you @Anmol_Bhardwaj