Demo 3: Page Layout

Demo 3: Page Layout

Demo 3 shows how to generate flexible page layouts in apps by using the OpenCms JSON API to access information from a container page. Container pages can provide content managers with a web based editor that shows pages very similar to the way they will appear in the app later.

View

The demo 3 app

Edit the demo 3 content

In the OpenCms page editor

Consider the following use case: Your app should have a start screen that shows a selection of current content. The content elements and the layout of this start screen is to be frequently changed in order to increase user interaction. To achieve this, you will need:

  • A mechanism to select the content elements that should appear on the start screen.
  • A way to control aspects of the layout of an individual element on the start screen.

OpenCms container pages provide exactly that: A selection of elements that should appear on a page, optionally including individual layout settings.

Development time can be saved using this already existing functionality from OpenCms instead of implementing such logic inside an app.

Guide to evaluation

  • Open the demo 3 app.
  • The app shows the same content used multiple times in different display variations (image left, image right, only image, etc.).
  • Open the same page in the OpenCms page editor.
  • In the page editor, open the element settings dialog (requires login).
  • Change the element settings in the dialog, click save, and see how the changes are reflected in the demo application.
  • Read more about the technical details of the JSON page handler in the OpenCms JSON API documentation.
  • Have a look at the source code of the demo 3 app.

Technical details

Accessing element container pages and element settings

Access to OpenCms container pages is available via the JSON API. A container page URL called with the JSON API will provide a JSON representation of the page, including links to the individual elements and a list of the individual element settings.

Please note that the links in the example(s) below only work if the JSON API is enabled.

Sample JSON element settings for a section content.

Page Request

Element settings such as the sizes and the visibility of texts and headings are part of the JSON page response.

GET /json/sites/default/mercury-json/demo-3/page-editor/index.html
{
  "containers": [
    {
      "elements": [
        {
          "containers": [],
          "formatterKey": "m/section/json",
          "path": "/sites/default/mercury-json/.content/section-m/cs_00002.xml",
          "settings": {
            "hsize": "2",
            "linkOption": "button",
            "pieceLayout": "6",
            "textOption": "default",
            "visualOption": "99"
          }
        },
        {
          "containers": [],
          "formatterKey": "m/section/json",
          "path": "/sites/default/mercury-json/.content/section-m/cs_00002.xml",
          "settings": {
            "hsize": "2",
            "linkOption": "button",
            "pieceLayout": "7",
            "textOption": "default",
            "visualOption": "99"
          }
        },
  ...
}