Sometimes when designing your app, you might want to further customize the layout of the menus. TypeEngine provides support for completely customizable Menus using Native UI Templates. These templates are specified in your app’s JSON settings and allow you to change the formatting, placement and wording in your its menus.

Template Example

"settings": {
    "templates": {
        "issueCell": {
            "template": "{0} • {1}",
            "0": "title",
            "1": {
                "value": "date",
                "format": "MMMM d, y"
            }
        },
        "articleCell": {
            "template": "{0}<br>{1}<br>{2}",
            "0": "title",
            "1": "teaser",
            "2": {
                "value": "author",
                "format": "By:&nbsp;{0}"
            }
        }
    }
}

The above template example would output issue selector cells with text in this format:

Issue Title • May 1, 2014

And article selector cells with this format:

An Article Title
Some kind of article teaser
By: Emily Jones

Template Attributes

Both the Issue Selector Cells, and the Article Selector Cells support Native Templates.

If a template is designated in your JSON, the formatting and display options set in the template will override any default menu settings. Templates are formatted using the following attributes which act as default styles for the entire template.

Issue Selectors

format :: fonts :: issueCell
format :: colors :: issueCellText
format :: dimensions :: issueCellLineHeight*
format :: padding :: issueCellPadding
format :: positions :: issueCellAlignment

Article Selectors

format :: fonts :: articleCell
format :: colors :: articleCellText
format :: dimensions :: articleCellLineHeight*
format :: padding :: articleCellPadding
format :: positions :: articleCellAlignment

* Line heights are specified in px units.

A Note About Issue Covers

issueSelectorDisplay :: covers are supported, but not referred to in the template. If you have covers set to display outside of the template, they will appear to the left of the template text.

 

Template Format

Templates are specified in a new JSON element under ::settings:: called ::templates:: Each variable used in the template can either be a String, or an Object, if formatting is required.

Template formatting looks something like this:

"template": "{0} &#x2022; {1}"

{0} and {1} can either be simple String variables, or Objects with further formatting applied.

String Variables

String variables can be on of the following valid values:

  • title: supported with issues and articles
  • teaser: supported with issues and articles
  • date: supported only with issues
  • author: supported only with articles

The format for setting these String variables and their respective values looks something like this:

"0": "title",
"1": "teaser"
Objects

When you want to apply further formatting to the String, you can do so by using an Object. Your JSON will look like this:

"0": "title",
"1": "teaser",
"2": {
  "value": "author",
  "format": "By:&nbsp;{0}"
  }