AEM parsys and iparsys

sagar karotiasagar karotia
4 min read

In AEM, parsys and iparsys are both components that act as paragraph systems or layout containers. They allow authors to drag and drop other components onto a page, effectively defining editable areas of a page.

However, they differ significantly in how they handle inheritance of content from parent pages, and iparsys is generally considered a legacy approach in modern AEM development, especially with the advent of Editable Templates and Experience Fragments.

Let's break them down:

1. parsys (Paragraph System)

  • Purpose: parsys is the most common and fundamental component for enabling authors to add and arrange other components on a page. It's a "paragraph system" that defines an area where various content components (like Text, Image, Button, Carousel, etc.) can be placed.

  • Behavior:

    • It's a placeholder. When you drag a parsys component onto a page or include it in a page component, it renders an area in the AEM editor where authors can click to "Add New Component" or drag existing components into.

    • The content (components) placed within a parsys is specific to that page. If you have parsys on Page A and Page B, and you add components to Page A's parsys, those components will not automatically appear on Page B's parsys.

    • The allowed components within a parsys are typically configured via Content Policies in Editable Templates (or Design Mode in Static Templates).

  • Usage:

    • It's generally rendered in an HTL file using data-sly-resource.

    • Example HTL: <div data-sly-resource="${'par' @ resourceType='wcm/foundation/components/parsys'}"></div>

  • Modern Context: Still widely used and the standard way to create editable areas on pages, especially when combined with Layout Containers (a responsive variant of parsys that provides grid-based layout capabilities).

2. iparsys (Inherited Paragraph System)

  • Purpose: iparsys was designed to allow content in a paragraph system to be inherited from a parent page to its child pages. This meant you could define a set of common components (like a footer or sidebar) on a parent page, and they would automatically appear on all child pages without having to be added manually to each one.

  • Behavior:

    • When components are added to an iparsys on a parent page, child pages that also include an iparsys with the same name will automatically display those inherited components.

    • Child pages have the option to cancel or disable this inheritance, allowing them to either break the connection entirely or modify the inherited content.

    • The content of the inherited components is not stored on the child page itself unless inheritance is cancelled or modified. Instead, the child page points back to the parent page's iparsys content.

  • Usage (Legacy):

    • Primarily used in older AEM versions with Static Templates to achieve some form of global or shared content areas.

    • Adding an iparsys would typically involve a similar data-sly-resource inclusion, but pointing to the iparsys resource type (e.g., wcm/foundation/components/iparsys).

  • Modern Context (Deprecated):

    • iparsys is largely considered deprecated in modern AEM development (AEM 6.4+ and AEM as a Cloud Service).

    • The functionality iparsys provided for content inheritance is now much better handled by:

      • Editable Templates: For defining the overall structure and allowed components of pages, with structural parts inherited automatically.

      • Experience Fragments: For truly reusable content blocks (including content and layout) that can be authored once and embedded across multiple pages, and even synchronized to other channels. Experience Fragments offer much more control and flexibility for shared content.

      • Page Properties Inheritance: A simpler mechanism for specific properties.

Key Differences Summarized:

Feature

parsys

iparsys

Inheritance

No direct content inheritance

Yes, allows content inheritance from parent pages

Content Scope

Page-specific content

Inherited content from parent, or page-specific if inheritance is cancelled

Storage

Components stored directly on the page node

Inherited components are read from the parent page's JCR node (unless overridden)

Primary Use

Defining flexible content areas on individual pages

Creating common, inherited content sections across a page hierarchy

Status

Current Standard

Legacy/Deprecated (replaced by Editable Templates and Experience Fragments)

In modern AEM projects, you should focus on using parsys (or its more robust variant, Layout Container, which is essentially a parsys with responsive grid capabilities) for defining editable areas, and leverage Editable Templates and Experience Fragments for structural consistency and reusable content, respectively. Avoid using iparsys for new development.

0
Subscribe to my newsletter

Read articles from sagar karotia directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

sagar karotia
sagar karotia

I am a passionate frontend developer