Creating and Adding Templates and Components creating-and-adding-templates-and-components
AEM Mobile On-Demand provides a fully configured app template, an article template, and article components.
The We.Unlimited App is a sample template representing the shell of a fully configurable and manageable AEM Mobile On-Demand application.
Selecting this sample template when creating a new app delivers an AEM Mobile feature rich dashboard.
Creating App Templates creating-app-templates
An App template is used to create a new app and acts as a collection of page templates and components that represent a baseline or foundation of an app. The template stamps out some fundamental properties to lead the app in the appropriate way. In general, a customer would not create too many apps in total.
App templates provide an easy way to leverage existing designs created by devlopers, used for the creation of new apps within AEM.
When creating a new app based on the template of another app, you will get an app that has a starting point representative of the app in which it was created from.
Steps to creating a new app based on an app template:
- Navigate to the AEM Mobile app catalog: <server-url>/aem/apps.html/content/mobileapps
- Select Create –> App as shown below
Once you create an app using this template, you can add articles, banners, and collections to your app. To re-visit, creation of articles, banners, and collections, See Content Management Actions.
Creating Content Templates creating-content-templates
Each entity type has two out-of-the-box templates. These are:
- Default templates: used for content creation with applicable default properties/structure
- Imported templates: used for importing content from AEM Mobile with applicable default properties/structure
Article Templates article-templates
The Unlimited Article is a sample template representing a typical AEM Mobile On-Demand article layout.
-
Click on + in Manage Articles to create a new article. You can choose either an Unlimited Article or a Rich Text Article. The image below shows the option that lets you choose from any of these two article templates.
-
Click Next to define artcle meta data such as Article Name/Title, Description, Author, Abstract, Department, Thumbnail Image, Article Acces, and so on.
-
Click Next to fill in the Advertisement Properties.
-
Click Next to enter Article Image or Social Media Image
-
Click Next to choose a collection link this new Article to.
-
Click Next to enter the details for social sharing.
-
Click Create to finish the process of creating an article using the sample. You either click Done or Edit Article to edit the properties of this article.
Adding Components to Article adding-components-to-article
Once created, an author can edit an article’s content by adding components like text and images. Articles are an extension of AEM page templates.
Select an article, you want to edit and click on Edit to add components to the article.
Choose the ‘+’ on the left panel to add components to your article.
Creating Out-of-the-box templates creating-out-of-the-box-templates
There are no out-of-the-box Article Templates, however there is a default template that custom templates should extend, see Geometrixx Unlimited App’s Article template sample.
The key properties beyond normal AEM template required properties include;
dps-resourceType=“dps:Article”
This property ensures that the AEM page is recognized as an AEM Mobile targeted article page.
As per AEM templates, you can add any default properties or child nodes to the template’s jcr:content.
Banner and Collection Templates banner-and-collection-templates
Creating and Adding Components creating-and-adding-components
Components use and allow access to Widgets and these are used to render the Content.
A simple component is included in the code repository, the source of which can be found in AEM. Subsequently, it can also be opened locally in CRXDE Lite.
You can add components to your page. Any component can be used in an AEM Mobile app but when applied, may not render properly.
However, custom components may not export and upload to AEM Mobile On-Demand Services correctly without a custom export content sync handler that renders in AEM.
Once the component has already been included in an AEM page, along with a few other building block components, you can add another component to the page or edit an existing one.
To add another component to the page:
- Choose that page and ensure you are in Edit mode, via the dropdown at the top right of the Editor’s header
- Toggle the side panel using the leftmost icon in the Editor’s header
- Select the Components tab
- Drag and drop one of the available components onto the page
To edit an existing component:
- Choose that page and ensure you are in Edit mode and select the component
- Tap the wrench icon to configure the component