how to achieve re usability of components within different sites having different designs . Currently we are are working on AEM 6.5 version? | Community
Skip to main content
V
vijayt86226372
Level 2
June 23, 2020
Solved

how to achieve re usability of components within different sites having different designs . Currently we are are working on AEM 6.5 version?

  • June 23, 2020
  • 6 replies
  • 5277 views

We want to resuse the components within multiple sites having different designs.

 

Here, We are having some contraints in using style system as UI team has their framework and are not compatible having style system implementation.

 

Please suggest a better approach . 

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 arunpatidar

You can use CAC(Context-aware Configuration). Save the main clientlib category as CAC and based on site/path you can configure and set a different values. In headerlibs and footerlibs html file read clientlibs category from CAC.

 

https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configuration.html

 

 

 

6 replies

Himanshu_Singhal
Community Advisor
Himanshu_SinghalCommunity Advisor
Community Advisor
June 23, 2020

Well, since you've already mentioned that you're having some constraints using Style system then only thing that make more sense is to having multiple views for the components. 
You can have multiple views for a single component that can be loaded based on domain or any other parameter. E.g. for component X, there's X.html & view1.html & view2.html. Load view1 & view2 based on condition. 
it's not my recommended choice but it's a work around for your situation. 

    V
    vijayt86226372Author
    Level 2
    June 23, 2020
    Thanks Himanshu..!
    ArpitVarshney
    Community Advisor
    ArpitVarshneyCommunity Advisor
    Community Advisor
    June 23, 2020

    Hi @vijayt86226372 

     

    I'm assuming this is probably because of different client libraries for multiple websites. The best way I can think is that you can extract the generic components which need to be used across all the websites. Just create a base clientlib for those components and embed this base clientlib in all the other site client libraries and remove the duplicate code from site-specific clientlibs and then you can use style system to define the variation of your component and author in website accordingly.

     

    Regards,

    Arpit Varshney

      V
      vijayt86226372Author
      Level 2
      June 23, 2020
      yes ...my initial solution provided was the same. Business rejected it saying they will make decisions dynamically. All they would check is the content . If they feel content is something needs to be in another site so they will share the associated component
      A
      Community Advisor
      AlbinIs1Community Advisor
      Community Advisor
      June 23, 2020

      Another option is, define a  site level property(SiteType) to identify the theme(clientlibrary) need to be applied for the website e.g test-site

      Define theme specific css(clientlibrary) e.g test-site.main.css, test1-site.main.css

      Load the css to the website based on the site type configured {SiteType}.main.css

       

       

        V
        vijayt86226372Author
        Level 2
        June 23, 2020
        Thanks for the response..! We do not want any thing on the site level. requirement is for re usability of the components with similar content and also check on page performance
        tatvam
        tatvam
        Level 2
        June 23, 2020

        Only caveat I would add is that - you standardize on markup. Then apply styles as needed - either at site level or more granular. Site level is easier with but more custom code need to be written if you have to make this granular - to template/page specific.

        In order to standardize on markup, I'd probably start from core components. Easier that way. If not, start from a base front-end framework and build on it. Relatively easier to maintain and upgrade.

         

        Also might have to think about versioning components down the line when you make incremental changes

          kautuk_sahni
          Community Manager
          kautuk_sahniCommunity Manager
          Community Manager
          June 30, 2020
          @tatvam nice response.
          Kautuk Sahni
          arunpatidar
          Community Advisor
          arunpatidarCommunity AdvisorAccepted solution
          Community Advisor
          June 23, 2020

          You can use CAC(Context-aware Configuration). Save the main clientlib category as CAC and based on site/path you can configure and set a different values. In headerlibs and footerlibs html file read clientlibs category from CAC.

           

          https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configuration.html

           

           

           

          Arun Patidar
            khamat_bn
            khamat_bn
            Level 4
            June 23, 2020

            @vijayt86226372 

             

            It's because of the different clientlibs for both of the sites. My suggestion is.. give a try for context aware configurations docs once.

            See this video you will get some idea. https://www.youtube.com/watch?v=q6Bk8Fn1PA0 

            Doc- https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configuration.html

            https://wcm.io/caconfig/deploy-configure-caconfig-in-aem.html

             

            ~BK

              V
              vijayt86226372Author
              Level 2
              June 24, 2020
              Thank U so much for your response . Even if we go with the context-aware approach we will have to pre-define the clientlibs associated with the components which will be shared across dynamically. Business is not sure which components they would be sharing as decision would be based on the content associated with that component of a particular site.
              Terms & ConditionsAccessibility statement

              Loading footer...