Learn how integrated end-to-end grants-related transfer payments management system helps Government of Ontario website provide streamlined services to organizations. The solution is based on Adobe Experience Manager (AEM) Forms, part of Adobe Marketing Cloud.
Tired of missing out on updates in the AEM community – follow @4Point_ on Twitter and stay atop industry news such as the newest digital trends, creative competitions and social events! >>>
You have just arrived at your office and you open your email. You discover that your AEM system is down and you are getting dozens of messages from staff that are asking you what is happening. You know from that moment on its going to be a rough day. Now what do you do?
We invite you to come visit and subscribe to 4Point’s Youtube channel where you’ll find videos about our most successful Adobe based solutions. There you can find 4Point’s webinar records, customer showcases, and other content that will be regularly updated! >>>
The purpose of this blog is to create an environment where our technical team can share their insights, knowledge, opinions and experiences with you. Questions such as how do we move to a mobile platform? Has anyone one else done it? What are the pitfalls? Does it actually work? Read more >>>
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.
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:
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.