Overview

An ACE UI Template connects the front layer (widgets) with the content layer (domain-objects). Templates are specified per Content type and defines how the content is presented in applications that support ACE UI Framework (such as ACE Content Developer). The template is specified in JSON and is imported into an ACE system and made available to applications by being configured in a special templateList content.

JSON format

Given the (imaginary) content type exampleTypeContent, that has one aspect called exampleAspect containing one field value, a Template to make content of this type available for editing in applications that support it could look like:

{
  "type": "exampleTypeContent",
  "label": "Example Type",

  "dataBindings": [
    {
      "label": "Value",
      "widget": "aceUITextInput",

      "config": {
        "placeholder": "Type here..."
      },

      "domainObject": "exampleAspect/value",
      "required": true
    }
  ]
}

• The "type" property is very important and defines what content type that this template is used for.
• The value of "label" is a display name of the template that applications may use for presentation.
• The list specified in "dataBindings" comprises the essence of the way content may be manipulated by the framework. Each item binds a widget to one or more domain-objects.
• "label" contains a display name for the data binding.
• "widget" contains the name of the widget to use, "aceUITextInput" is a widget provided by ACE UI that can get simple text input from an user.
• "config" contains an object that is injected into the widget that carries various options to customize

Importing

Templates are made available in the system by creating a content with an alias in the _template namespace that has a file called template.json attached to it. To simplify that process, projects typically uses the ACE Maven Plugin to import templates.

Template layouts

A template can optionally also specify a template layout, which provides for a way to group fields (data bindings) which logically belongs to each other in order for them to also be displayed together.

The template layout system provides a few logical layout elements which can be used to group template fields:

• View is the coarsest grouping element available and is the top-level layout element used in a template layout. Typically displayed using tabs in ACE UI applications. A view can - in addition to a list of fields - contain other views and well as rows. May optionally provide a label to be displayed.

• Row is a grouping element that will occupy all horizontal space in it's container. A row can only contain columns.

• Column is a grouping element that can be used to create vertical divider elements. A column can - in addition to a list of fields - contain rows and groups. May optionally provide a label to be displayed.

• "type": "aside" can be set on a column marking it as a column aside from the main content. Will typically look different from the other columns.

• Group is the lowest level grouping element that can used to box fields together. A group can only contain fields. May optionally provide a label to be displayed.

NOTE: Fields / data bindings referenced from a layout are identified using the name property. For fields used in template layouts, this property is mandatory. See the example below.

Example: basic layout

The following template will be displayed as two tabs - Text and Advanced - with the first containing the title and lead fields while the second will only contain the categorization field.

{
  "type": "exampleTypeContent",
  "label": "Example Type",

  "layout": {
    "views": [
      {
        "label": "Text",
        "fields": ["title", "lead"]
      },

      {
        "label": "Advanced",
        "fields": ["categorization"]
      }
    ]
  },

  "dataBindings": [
    {
      "label": "Title",
      "name": "title",

      "widget": "aceUITextInput"
    },

    {
      "label": "Lead",
      "name": "lead",

      "widget": "aceUITextInput"
    },

    {
      "label": "Categorization",
      "name": "categorization",

      "widget": "aceUICategorization"
    }
  ]
}

Example: advanced layout

The following template will be displayed as two tabs - Basics and Advanced. The Advanced tab contains a simple list of fields. The Basics tab is more complicated, being divided into two columns, both also using groups to further group fields.

{
  "type": "exampleTypeContent",
  "label": "Example Type",

  "layout": {
    "views": [
      {
        "label": "Basics",

        "rows": [
          {
            "columns": [
              {
                "groups": [
                  {
                    "label": "Text",
                    "fields": ["title", "lead"]
                  }
                ]
              },

              {
                "type": "aside",
                "groups": [
                  {
                    "label": "Time state",
                    "fields": ["onTime", "offTime"]
                  },

                  {
                    "label": "Publishing",
                    "fields": ["publishedDate"]
                  }
                ]
              }
            ]
          }
        ]
      },

      {
        "label": "Advanced",
        "fields": ["categorization"]
      }
    ]
  },

  "dataBindings": [
    {
      "label": "Title",
      "name": "title",

      "widget": "aceUITextInput"
    },

    {
      "label": "Lead",
      "name": "lead",

      "widget": "aceUITextInput"
    },

    {
      "label": "Categorization",
      "name": "categorization",

      "widget": "aceUICategorization"
    },

    {
      "label": "Publishing date",
      "name": "publishedDate",

      "widget": "aceUIDateTimePicker"
    },

    {
      "label": "On time",
      "name": "onTime",

      "widget": "aceUIDateTimePicker"
    },

    {
      "label": "Off time",
      "name": "offTime",

      "widget": "aceUIDateTimePicker"
    }
  ]
}

Reference

JSON Properties

"type": string required

Identifies what ACE content type this template is describing a set of data bindings for.

"label": string

A display name for the template that the framework can use if it needs to refer to the template in a presentation context.

"namePath": string

A path to a field of an aspect that can represent a display name for an instance of the content.

"dataBindings": Array

The items in this property is the glue that binds the content data model (basically a response from an ACE Content service) to a view (i.e. a widget) in an application. Each item can have the following properties:

{
"label"	string	A display name for presentational purposes
"name"	string	An identifier for this data binding in the context of this template.
"widget"	string	A name of a widget to use.
"config"	object	A map of widget specific configurations to be injected to the widget
"helpText"	string	A short explaining text of this binding to be presented in conjunction with the widget
"expandableHelpText"	string	A longer explaining text of this binding to be presented in conjunction with the widget
"cssClass"	string	When presented in context of html, this value should be added in the class attribute of some html element containing the widget.
"required"	boolean	An hint to the widget that some data has to be set before returning it to the server.
"domainObject"	string	A location path to some data in an ACE content service response that should be bound. A domain object representing that data is injected into the widget.
"domainObjects"	object	Multiple location paths to data in an ACE content service response that should be bound. A map of corresponding domain objects is injected into the widget.
}

"layout": object

Please see the Template layouts section above.