Chapter 4 of the AEM Headless 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 exposes to clients via the composition of Content Services enabled AEM Components.
AEM Editable Templates are used to define the HTTP end-points that will be accessed to expose the Event content as JSON.
In AEM Content Services, editable templates are used to define how the JSON data is exposed.
For the WKND Mobile App, we’ll create a single Editable Template which will be used to drive a single API endpoint. While this example is simple to illustrate the concepts of AEM Headless, you can create multiple Pages (or Endpoints) each exposing different sets of content to create a more complex, and better organized API.
To understand how to compose our API endpoint, and understand what content should be exposed to our WKND Mobile App, let us revisit the design.
As we can see, we have three logical sets of content to provide to the mobile app.
To do this, we can map these requirements to AEM Components (and in our case, AEM WCM Core Components) in order to expose the requisite content as JSON.
To support AEM Content Service’s JSON export of Pages and Components, the Pages and Components must derive from AEM WCM Core Components.
AEM’s WCM Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. All of the WKND Mobile components used in this tutorial (Page, Image, Text, and Content Fragment List) are derived from AEM’s WCM Core Components.
Navigate to Tools > General > Templates > WKND Mobile.
Create the Events API template:
First, we allow the three identified AEM Components we need to model the content by editing the Policy of the Root Layout Container. Ensure the Structure mode is active, select the Layout Container [Root], and tap the Policy button.
Under Properties > Allowed Components search for WKND Mobile. Allow the following components from the WKND Mobile component group so they can be used on the Events API page.
WKND Mobile > Image
WKND Mobile > Text
WKND Mobile > Content Fragment List
Tap the Done check-mark in the upper right corner when complete.
Refresh the browser window to see newly Allowed Components list in the left rail.
From the Components finder in the left rail, drag in the following AEM Components:
For each of the above components, select them and press the unlock button.
However, ensure the layout container is locked to prevent other components from being added, or these three components from being removed.
Tap Page Information > View in Admin to return to the WKND Mobile templates listing. Select the newly created Events API template and tap Enable in the top action bar.
Notice that the components used to surface the content are added to the Template itself, and locked down. This is to allow authors to edit the pre-defined components, but not arbitrarily add or remove components since changing the API itself could break assumptions around the JSON structure and break consuming apps. All APIs need to be stable.
Optionally, install the com.adobe.aem.guides.wknd-mobile.content.chapter-4.zip content package on AEM Author via AEM’s Package Manager. This package contains the configurations and content outlined in this and preceding chapters of the tutorial.