Part 4 of the AEM Content Services tutorial covers the role of AEM Editable Templates in the context of AEM Content Services. Editable Templates are used to define the JSON content structure AEM Content Services will ultimately expose.

Tutorial table of contents

Understanding the role of Templates in AEM Content Services

AEM Editable Templates are used to define the HTTP end-points that will be accessed to expose the FAQ content as JSON. 

Traditionally AEM's Editable Templates are used to define Web pages, however this use is simply a convention. Editable Templates can be used to compose any set of data; how the composition is accessed: as a HTML in a browser, as JSON consumed by JavaScript or a mobile application, or even exported as a Zip is function of the how the "page" created by the editable template is requested.

In AEM Content Services, editable templates are used to define how the JSON data is defined and exposed.

In this use-case two template types are used:

  • FAQ Main API
    • This is the origin API end-point called that provides common data including:
      • Logo
      • Header Background Image
      • Title
      • Introductory Text
      • List of other API end-points that are part of this larger API
  • FAQ Listing API
    • This template defines pages (end-points) that list FAQs by category
    • Pages of this template type are referenced by the FAQ Main API's list of other API end-points.

 

The access pattern by consuming applications is:

  1. Create a HTTP GET call to the origin API to initialize the application.
  2. This page's content is defined by a list of We.Retail Content Fragment componetns (derived from the AEM Core Content Fragment component)
  3. FAQs are retrieved via subsequent HTTP GET calls to FAQ Listing API pages.

Note:

To support AEM Content Service's JSON export of Pages and Components, the Pages and Components must derive from AEM Core Components.

AEM's Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. All of the We.Retail components used in this tutorial (Page, Image, Title, Text and List) are derived from AEM's Core Components.

Defining the FAQ Main API Template

part_4_-_definingthefaqmainapitemplate
  1. Navigate to Tools > General > Templates > We.Retail.

  2. Create the FAQ Main API template:

    1. Tap Create in the top action bar
    2. Select the We.Retail Empty Page template
    3. Tap Next in the top action bar
    4. Enter FAQ Main API in the Template Title field
    5. Tap Create in the top action bar
    6. Tap Open open the new template for editting
  3. Since the FAQ Main API template is created from We.Retail Empty Page template type, the layout container has an applied policy that allows for addition of We.Retail components.

    Add the following components from the We.Retail component group to the layout container on the page.

    • We.Retail > Image
      • The logo for the the app
    • We.Retail > Image
      • The header background image for the app    
    • We.Retail > Title
      • Represents the app's title
    • We.Retail > Text
      • The app's introductory text
    • We.Retail > List
      • The list of FAQ categories available for display in the app

    For each of the above components, select them and press the unlock button. 

    These 4 content components should edit-able but NOT removable from the page author.

    Ensure the layout container is locked.

    The layout container is locked so no components can be added or removed from it by Page authors. This ensures this Main API is "fixed" and the various components and thus their data are accessible via well-known locations in the exposed JSON object.

  4. Close the template editor browser tab to return to the We.Retail templates listing. Select the newly created FAQ Main API template and tap Enable in the top action bar.

Defining the FAQ Listing API Template

part_4_-_definingthefaqlistingapitemplate
  1. Navigate to Tools > General > Templates > We.Retail.

  2. Create the FAQ Listing API template:

    1. Tap Create in the top action bar
    2. Select the We.Retail Empty Page template
    3. Tap Next in the top action bar
    4. Enter FAQ Listing API in the Template Title field
    5. Tap Create in the top action bar
    6. Tap Open open the new template for editting
  3. Select the layout container component, and tap the Policy button.

    Create a new policy named "FAQ Listing API" and ONLY allow We.Retail > We.Retail Content Fragments.

    Tap the checkmark in the top right to save the Policy changes.

  4. In the template editor, select the layout container component,  and tap the lock icon to unlock it.

  5. Close the template editor browser tab to return to the We.Retail templates listing. Select the newly created FAQ Listing API template and tap Enable in the top action bar.

Additional commentary


Next steps

Optionally, install the aem-content-service-tutorial.part4 solution package via AEM's Package Manager. This package contains the configurations and content outlined in this part of the tutorials

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy