You can define custom settings fields within the manifest.json file of a HTML5 App. Using these you can manage and customize your apps' configuration on the fly from within the sklera CMS, without having to rely on hardcoded settings in your source files.


The fundamental structure of AppConfig entries is as follows:

/*Array of JSON Objects */
{
   "config": [ { JSON Object }, ... ]
}
/*1-n objects*/


Excerpt from a demo manifest.json:

{
   <...>
   "config": [
    {
      "name": "de_hello_world",
      "label": "Hello World Text (German)",
      "type": "string"
    },
    {
      "name": "en_hello_world",
      "label": "Hello World Text (English)",
      "type": "string"
    },
    {
      "name": "show_dark_mode",
      "label": "Show Dark mode",
      "type": "boolean"
    },
    {
      "name": "color",
      "label": "Language text color",
      "type": "select",
      "values": ["red", "green", "blue", "white", "black"],
      "desc": "Select a Textcolor"
    },
    <...>
    {
      "name": "language",
      "label": "Language Select",
      "type": "select",
      "values": [
        { "label": "German", "value": "de" },
        { "label": "English", "value": "en" }
      ],
      "desc": "Select a language"
    }
  ]
}


Usable config fields and attributes


An AppConfig field consists of at least three attributes: 

Attribute
(italics are optional)		TypeDescription
"name"StringInternal field name which is used within the HTML5 App to access the value of this option.
"label"
StringLabel of the field as displayed in the AppSettings in the sklera CMS.
"type"StringDefines the type of config field. Allowed values are:
'string', 'number', 'boolean', 'color', 'password', 'select', 'multiple-select', 'playlist', 'font', 'item', 'folder', 'category' sowie 'array'.
"desc"StringOptional. A short description or help text associated with this option.
"section"StringOptional. If set, all fields sharing the same section name will be grouped together into a Tab within the AppSettings. The title of the Tab is taken from this as well.


Types of config fields

stringAlphanumerical text, displays as an input field.
numberIntegers. Displays as an input field.
booleantrue or false. Displays as a switch
colorSets a hexadecimal color code. Uses the color picker of the CMS for ease of use.
passwordA password field hiding the input.
selectDropdown menu where one of several options may be picked.
If the type is set to 'select' an additional attribute 'values' is required detailing the options.
Values is an Array of Objects containing the attributes 'label' and 'value'.
{
   "name" : "mySelectDropdown",
   "label" : "Dropdown menu – Single Select",
   "type" : "select",
   "values" : [
      { "label" : "Label 1",  "value": "Value1" },
      { "label" : "Label 2", "value": "Value2"}
   ]
}

multiple-selectMultiple-select is almost identical to 'select'. The only difference is the ability to select multiple entries from the dropdown. From within the App this manifests as an Array of values instead of a single value.
playlistPick any playlist you have access to within the current channel.  Returns the playlist ID.
fontPick any font you have access to within the current channel. This includes any uploaded fonts.
itemPick an item from your media library, returns the item ID.
You can additionally limit which item types are displayed in the item picker by setting the 'itemTypes' attribute. If this attribute is not set the picker shows the entire library.

Allowed values: 'image', 'video', 'document', 'website', 'app', 'youtube'.
{
    "name" : "myItem",
    "label" : "Select an item",
    "type" : "item",
    "itemTypes" : [ "image", "video"  ]
}

folderPick a specific folder in the library. Returns the folder's ID.
categoryWith active Advanced Playout in channel: Pick a category from the channel. Returns the category ID, which can e.g. be used from within the HTML5 App to dynamically alter the categories of the sklera player, and thus alter the content displayed on the screen.
date
(from sklera 4.1.1)
Enables you to pick a calendar day. Stores hours/minutes/seconds as midnight of the picked day.
dateTime
(from sklera 4.1.1)
Enables to pick a calendar day as well as hours/minutes. Stores seconds as 0.
arrayAn array of config fields (an arbitrary group of config fields listed above).
If the type is set to 'array' the attribute 'children' is required, which is an array of config fields (all with at least 'name', 'label' and 'type' set).
{
   "name" : "settingsArray",
   "label" : "A collection of settings",
   "type" : "array",
   "children" : [
        {
              "name" : "myCustomName",
              "label" : "Custom Name",
              "type" : "string"
        },
        {
              "name" : "selectedImage",
              "label" : "Pick an image from the library",
              "type" : "item"
              "itemTypes" : [ "image" ]
        },
        {
              "name" : "hideImage",
              "label" : "Hide Image",
              "type" : "boolean"
        }
    ]
}

You can dynamically add and remove such groups of settings from within the AppSettings. Using type 'array' makes sense in situations where you're not sure how many of these groups of collections will be needed. This prevents blowing up the size of the manifest.json .