How to load specific style systems on a component based on user authoring | Community
Skip to main content
S
sr1045
Level 2
June 12, 2023
Solved

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

  • June 12, 2023
  • 2 replies
  • 1422 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MayurSatav

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.

2 replies

MayurSatav
Community Advisor and Adobe Champion
MayurSatavCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
June 12, 2023

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.

    S
    sr1045Author
    Level 2
    June 14, 2023

    Thank you @mayursatav 

      Anmol_Bhardwaj
      Community Advisor
      Anmol_BhardwajCommunity Advisor
      Community Advisor
      June 12, 2023

      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.

        S
        sr1045Author
        Level 2
        June 14, 2023

        Thank you @anmol_bhardwaj 

          Terms & ConditionsAccessibility statement

          Loading footer...