Header

Feature Configuration

Configuring a Header

Headers in Launcher 4 are now fully customizable using widgets, just like headers in Launcher 3. Each footer configuration is identified by a unique id and includes a layout object that defines its widget details as shown in the table below:

Defining a Header Criteria

The criteria_OR object specifies the conditions under which a specific header configuration should be applied. It consists of the following:

Field	Descriptio
field	The field to evaluate for the criteria. Example: _${session.userId}
pattern	A regex pattern used to match the field value. Example: ^_$

Putting it All Together

In the following configuration, the openzone header widget will have a Login button, whereas the securedzone header widget will show session information and a Logout button. The qualifying criteria is the presence of a ${session.userId}, which is only available when a user is successfully authenticated.

"header": [
  {
    "id": "default_openzone",
    "layout": {
      "widgetId": "openzone-toolbar",
      "widgetType": "toolbar",
      "columnSpan": 4,
      "rowSpan": 1,
      "widgetParams": {
        "toolbarTitle": "Supermarket",
        "backgroundColor": "${launcherState.theme.accentColor}",
        "folderLabel": "Device Tools"
      }
    },
    "criteria_OR": [
      {
        "field": "_${session.userId}",
        "pattern": "^_$"
      }
    ]
  },
  {
    "id": "default_authorized",
    "layout": {
      "widgetId": "session-banner",
      "widgetType": "session",
      "columnSpan": 1,
      "rowSpan": 4,
      "widgetParams": {
        "heading": "${session.userName}",
        "subtitle1": "Store: ${config.ex.siteId}",
        "exitButtonText": "${res.launcher_base_launcher_button_logout}",
        "exitButtonColor": "${launcherState.theme.accentColor}",
        "backgroundColor": "#66C5FF"
      }
    },
    "criteria_OR": [
      {
        "field": "_${session.userId}",
        "pattern": "^_.+$"
      }
    ]
  }
],