Demo 2: Dynamic Lists

Demo 2: Dynamic Lists

Demo 2 showcases how an app can leverage dynamic OpenCms lists. Lists provide content managers with an editor interface in the web browser that shows contents in the order as they will appear in the app later.

View

The demo 2 app

Edit the demo 2 content

In the OpenCms page editor

OpenCms lists can use multiple filter and sorting criteria. For example, a list may be configured to "show up to 10 articles in the category company news, where the date is not older than 8 weeks".

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

Moreover, if the filter has to be changed, e.g. to include another category, the app does not need to be updated.

Guide to evaluation

  • Open the demo 2 app.
  • See the list containing contents of different types: contacts and articles.
  • Try out the sort selection as well as the show more results button.
  • Open the same list in the OpenCms page editor.
  • Edit, delete, or add some contents in the page editor (requires login) and track the changes in the demo application.
  • In the page editor, edit the list configuration.
  • Change the default sort order from date ascending to title ascending.
  • Reload the demo application and see that the default sort order has changed.
  • Read more about the technical details of the JSON list handler in the OpenCms JSON API documentation.
  • Have a look at the source code of the demo 2 app.

Technical details

The list handler of the OpenCms JSON API allows to directly read the results of a list configuration.

As with folders, the result can be a list of files, or the file content can already be included in the list result.

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

Sample list configuration in the OpenCms backend.

List Request

The list handler of the JSON API renders the list configuration together with the list results.

GET /json/sites/default/mercury-json/.content/list-m/list_00001.xml
{
  "Category": "",
  "CategoryFolderFilter": [],
  "CategoryMode": "OR",
  "SearchFolder": [
    {
      "link": "/mercury-demo/.content/",
      "path": "/sites/default/mercury-demo/.content/"
    }
  ],
  "SortOrder": "DATE_ASC",
  "Title": "Demo 2: Sample List",
  "TypesToCollect": [
    "m-article:m/display/article-elaborate",
    "m-contact:m/display/contact-elaborate"
  ],
  "linkedContents": {},
  "list": [
    {
      "Category": [
        "topic/",
        "topic/people/"
      ],
      "Contact": {
        "AddressChoice": {
          "Address": {
            "Locality": "Düsseldorf",
            "PostalCode": "40545",
            "StreetAddress": "Bolkerstraße 43 - 47"
          }
        },
        "Email": {
          "Email": "claire.dunphy@example.org",
          "ObfuscateEmail": false
        },
        "Mobile": "+49 (160) 123-4567",
        "Phone": "+49 (211) 123-4567"
      },
      "Image": {
        "Image": {
          "link": "/.galleries/people/23.jpg",
          "path": "/sites/default/.galleries/people/23.jpg"
        }
      },
      "Kind": "person",
      "Link": {
        "Text": "Team overview",
        "URI": {
          "link": "/mercury-demo/the-team/",
          "path": "/sites/default/mercury-demo/the-team/"
        }
      },
      "Name": {
        "FirstName": "Claire",
        "LastName": "Dunphy"
      },
      "Order": "222",
      "Organization": "Critical Coders Corp.",
      "Position": "Director HR",
      "linkedContents": {}
    }
  ],
  "listInfo": {
    "numFound": 30
  }
}