Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

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

Avatar

Level 2

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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.

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

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.

Avatar

Community Advisor

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.