Client Template

The typicall mos. Application consists of several views. A view in mos. is a combination of a layout and data:

• layout: defines the visual components. Can be changed based on data
• data: information that is displayed inside the view

To support dynamic data, which can change during runtime templates are used. In a template file, you define which data influences which UI element. Templates are generally applied to raw data coming from a database with a table and a query or from network requests.

Template files are JSON-files located in the client_template folder of your configuration.

Combination with layout

To influence ui components, you add an identifier in the layout using the dataKey-attribute. The dataKey does not have to be unique in a layout. Therefore multiple components can be modified with one entry of a template.

/layout/startView.json

...
{
  "type": "text",
  "dataKey": "mainLabel",
  "name": "mainLabel",
  "scaleType": "alignCenter",
  "constraints": [...]
},
...

Example

Folowing example includes a simple layout consisting of one text layer and one color layer.

/layout/startView.json

{
  "name": "startView",
  "layers": [
  {
    "type": "color",
    "dataKey": "backgroundColor",
    "constraints": [...]
  },
  {
    "type": "text",
    "dataKey": "title",
    "constraints": [...]
  }
]
}

The value of the two layers in the template will be set to the value specified in the given template.

/client_template/startView.json

{
  "name": "startView",
  "content": {
    "content":  {
      "backgroundColor": {
        "value": "#F48FB1"
      },
      "title": {
        "value": "This title has been replaced"
      }
    }
  }
}

There are different ways to create a view from the combination of layout and template:

• the showView action
• an insert layer
• a galery layer

Placeholders/Delimiters

Generally the template are mustache like. Which means that the default placeholder is {{}}. This can be changed with several methods like setDelimiters or leadingDelimiter and trailingDelimiter in the showView action.

Default

{
  "title": {
    "value": "{{name}}"
  }
}

Custom Delimiter

{
  "title": {
    "value": "{=name=}"
  }
}

Static templates

Templates can also be used without raw data on which the template can be applied on. Or sometimes no data is available. For these occasions an action like showView has a field staticTemplate. This field also refers to a template in the "client_template" directory. The only difference is, that no placeholders will be replaced.

Example

Usage of a static template if no data is available

{
  "type": "showView",
  "params": {
    "table": "content",
    "query": "byId",
    "queryParams": [ "42" ],
    "layout": "detailView",
    "template": "contentTemplate",
    "staticTemplate": "noContentAvailable"
  }
}