• Categories

  • Centralizing configuration data using an Inherited Paragraph System

    By Peter Crummey

    While recently developing a web site for a large financial services client, the requirement emerged to have common components on all pages of the web site with the same data on each. Creating a header section with these components was relatively easy; getting them all to have the same configuration values but not configuring each page individually, not so much.

     

     

    A Little More on the Problem

     

    We’ve all seen the page header that contains common elements on every page of the web site. They have become essential to the web experience. Within the componentized environment of AEM this is normally a paragraph system with sub-components displayed on each page.

     

    That’s all well and good but what happens when you edit the component’s configuration? The configuration is stored at the page level, meaning that the configuration would have to be set for each and every page in your web site. Imagine having to modify that configuration, editing each page to do so; not my idea of fun or good design.

     

    The Solution         

                         

    To circumvent this issue, we used an Inherited Paragraph System or iparsys. By including it in our base page we can include all of the header components in the iparsys, edit the configuration in one place and have that configuration available to all sub-pages using that template.

     

    (Note that within a section of the site, we needed to break that inheritance and allow that section of the web site, including child pages, to have its own configuration for these header components. We will cover how to break the inheritance in another blog post.)

     

    How did we do this?

     

    First things first, how do we get the iparsys on the template? It is not displayed in the list of available components so it cannot be dragged and dropped onto your page like others. We edited the template code directly and inserted a cq:include to put the iparsys on the template:

     

    <cq:include path="header-ipar" resourceType="foundation/components/iparsys"/>

     

    We then edited the template page (as an author) to drop all the components that are to appear in the common header section.

     

    Once the components are in the iparsys, we then configured each component while editing the template page. When configured here, any page that is based on this template automatically has the header section with the components and component configuration. As previously stated, configuration is at the page level and here the page is the template. In fact the configuration cannot be changed at the child page level; it can only be done on the template.

     

     

    Things we noticed

     

    While implementing this solution, there were a couple of things that we noted:

     

    • The path attribute of the cq:include is important as it is used to identify the iparsys. For our web site, only one template was used. However, if you have more than one template, this path value must be the same on all templates if you want to have the configuration inherited across all templates.
    • The location of the iparsys can be change using different templates as long as they have the same path value.
    • The template has particular names within the iparsys definition (e.g., “fake”, “end”, “start”). They have special meaning to the iparsys.
    • When editing a page with an iparsys, it displays “Inherited Paragraph System” and “Drag components here”. Drag your components into the “Drag components here” as you would with a normal paragraph system.
    • On a child page based on this template only “Inherited Paragraph System” is shown. You cannot drag components into the iparsys here or configure any of its components. This is possible only while editing the page that includes the iparsys (the template in our case).

     

    Conclusion

     

    Using the iparsys provides a modularized way to have common components on multiple pages but centralized configuration, the best of both worlds. While it is not the easiest component to work with, a little direct page editing can provide significant benefits during development and, more importantly, during web site maintenance.

     

     

     

    Need a hand?
    Contact Us