Skip to main content

Content Fragment Container

Overview

The Conditional Content Fragment Container enables authors to show or hide a configurable container on a page based on the value of a field in an Adobe Experience Manager (AEM) Content Fragment. It supports both static (directly selected) and dynamic (reference-driven) fragment inputs and can host any other AEM components inside the container. This allows teams to present context-aware, rule-driven content without editing the page itself—only the underlying Content Fragment.

What it does

  • Accepts Content Fragment input in two modes:
    • Static: Author selects a specific Content Fragment.
    • Dynamic: Author provides a path or query reference that resolves to a fragment at render time (e.g., via fragment reference or page-context bindings).
  • Evaluates a specified Content Fragment field against a chosen condition to determine visibility of the container.
  • Renders (or hides) the container based on the evaluation, including all nested components the author placed in the container.

Supported Visibility Conditions

  • Checkbox / Boolean
  • Date / Time
  • Text / String existence

Authors can pick the controlling field and the condition operator from the component’s dialog. Optional inversion (e.g., “show when NOT checked”) is supported.

Prerequisite: Before using this component make sure you have an content fragment model pre-defined and one or more instances of that content fragment created. Content Fragment Models are created by the EAS Web Services group, they define the properties of the object, such as title, description, latitude, longitude, hours of operation, phone number, email address, etc.. The model also specifies which fields are required versus optional and what the data types for each field are such as number, text, hyperlink, etc..

Related Components:

Content Fragment ListContent Fragment DisplayContent Fragment Hero ImageContent Fragment Models

Authoring

Once you have placed your Content Fragment Container on a page, configure the Content Fragment Container Properties.

Configuring the Properties tab

  • Layout: Defaults to "Responsive Grid"
  • Content Fragment: Select a blank, templated Content Fragment of the model you want to match against.
  • Display Mode: Choose between a set static fragment or dynamically-loaded fragments.
    • Specific fragments will always use the selected fragment's fields for show/hide matching.
    • Dynamic fragments will use the currently-loaded fragment's field values to match against in the component.
  • Element Field Name: Displays the fields that are pulled from the Content Fragment specified in the Content Fragment field.
  • Element Details: Block of options that ties in to the Element Field selected. Select from:
    • Element Type: For the selected Element Field Name, select what field type this field is. Options include Checkbox, Date, and Text.
    • Trigger Type: Determines what to trigger the show/hide on. Different element types have different options.
      • Checkbox: Checked. If this content fragment field's checkbox is checked, then the container displays.
        • Date: After (Now) and Before (Now). If this content fragment field's date is before/after now as set, then the container displays.
        • Text: Value Exists - If this content fragment field's text has any data entered, then the container displays.

Configuring the Desktop tab

Configuring the Mobile tab

Configuring the Dynamic Media Settings

Example

There are 2 Content Fragment Containers effectively hidden at the top of the page, one set to display if the loaded Content Fragment has a Date before now, and another for after now to effectively show and hide content.

Load the page dynamically to see the results display.