In der manifest.json einer HTML5 App können für die Appkonfiguration eigene Felder definiert werden. Mittels dieser können Sie Einstellungen und Daten einer HTML5-App direkt im sklera CMS bei den Einstellungen der App verwalten ohne den Quelltext der eigentlichen App verändern zu müssen.

Grundsätzlich:

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


Beispielhafter Auszug aus einer 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"
    }
  ]
}


Mögliche Konfigurationsfelder sowie Attribute


Ein Konfigurationsfeld besteht mindestens aus drei Attributen:

Attribut
(kursive sind optional)
DatentypBeschreibung
"name"StringInterner Feldname welcher in der HTML5 App zum Ansprechen des Feldes verwendet wird.
"label"
StringBeschriftung des Konfigurationsfeldes innerhalb der AppSettings im sklera CMS
"type"StringDefiniert den Eingabe-/Auswahltyp. Mögliche Werte sind:
'string', 'number', 'boolean', 'color', 'password', 'select', 'multiple-select', 'playlist', 'font', 'item', 'folder', 'category' sowie 'array'.
"desc"StringOptionale Beschreibung einer Einstellung, welche zur Hilfestellung in den AppSettings angezeigt wird
"section"StringOptionales Attribut. Wenn gesetzt, werden in den AppSettings alle Einstellungen mit der selben 'section' in einem gemeinsamen Reiter gruppiert. Der Titel des Reiters ist der hier hinterlegte String.


Eingabe-/Auswahltypen

stringAlphanumerischer Text, wird als Eingabefeld angezeigt.
numberGanzzahlen. Wird als Eingabefeld angezeigt.
booleantrue oder false. Wird als An/Aus Schalter angezeigt
colorSetzt einen Hexadezimalen Farbwert. Verwendet die Farbauswahl des sklera CMS.
passwordPasswort-Eingabefeld mit Maskierung des Inhalts.
selectDropdownmenü, in dem eine von mehreren Optionen ausgewählt werden kann.
Wenn das Konfigurationsfeld vom "type" 'select' ist benötigt es das zusätzliche Attribut 'values'. Values ist ein Array aus Objekten, jedes Objekt hat die Attribute 'label' und 'value'.
{
   "name" : "mySelectDropdown",
   "label" : "Dropdownmenü - Einzelauswahl",
   "type" : "select",
   "values" : [
      { "label" : "Beschriftung",  "value": "Wert1" },
      { "label" : "Beschriftung 2", "value": "Wert2"}
   ]
}

multiple-selectFunktioniert analog zum Dropdownmenü bei type 'select', ermöglicht aber zusätzlich eine Mehrfachauswahl von Optionen. Innerhalb der App nimmt diese Einstellung die Form eines Arrays of Values an.
playlistAuswahl einer Playlist im gegenwärtigen Channel. Liefert die Playlist ID.
fontAuswahlmöglichkeit für die im Channel verfügbaren Schriftarten inkl. ggf. im Channel hochgeladener eigener Schriftarten.
itemAuswahl eines Elementes aus der Mediathek. Liefert die Item ID.
Optional kann hier noch zusätzlich das Attribut 'itemTypes' gesetzt werden um die Auswahl auf bestimmte Mediathek-Elementtypen zu beschränken. Wenn das Attribut nicht gesetzt ist werden alle für den User sichtbaren Elemente in der Mediathek zur Auswahl präsentiert.

Mögliche Werte: 'image', 'video', 'document', 'website', 'app', 'youtube'.
{
    "name" : "myItem",
    "label" : "Wähle ein Mediathekelement",
    "type" : "item",
    "itemTypes" : [ "image", "video"  ]
}

folderAuswahl eines bestimmten Ordners aus der Mediathek. Liefert die Folder ID.
categoryBei aktivem Advanced Playout: Auswahl einer bestimmten im Channel definierten Kategorie. Liefert die Kategorie ID, welche bspw in einer HTML5 App verwendet werden kann um dynamisch die Kategorisierung des sklera Players anzupassen.
date
(ab sklera 4.1.1)
Ermöglicht die Auswahl eines Kalendertages. Wird intern mit der Uhrzeit 00:00:00 gespeichert.
dateTime
(ab sklera 4.1.1)
Ermöglicht die Auswahl eines Kalendertages und minutengenauer Uhrzeit. Sekunden werden intern auf 0 gesetzt.
arrayEin Array aus Konfigurationseinstellungen (eine beliebige Kombination aus Konfigurationseinstellungen die oben genannt sind).
Wenn der type 'array' ist, muss das Attribut 'children' gesetzt werden, welches ein Array von Konfigurationseinstellungen ist (Jeweils mindestens mit 'name', 'label' und 'type' gesetzt):
{
   "name" : "settingsArray",
   "label" : "Eine Gruppe von Einstellungen",
   "type" : "array",
   "children" : [
        {
              "name" : "myCustomName",
              "label" : "Benutzerdef. Name",
              "type" : "string"
        },
        {
              "name" : "selectedImage",
              "label" : "Bild aus Mediathek wählen",
              "type" : "item",
              "itemTypes" : [ "image" ]
        },
        {
              "name" : "hideImage",
              "label" : "Bild verstecken",
              "type" : "boolean"
        }
    ]
}

In den AppSettings in der Mediathek können dann dynamisch diese Gruppen von Einstellungen hinzugefügt bzw. entfernt werden. Die Nutzung vom type 'array' macht in Situationen Sinn wo nicht klar ist, wie viele von diesen Gruppen von Einstellungen benötigt werden und man vermeiden will die manifest.json der App ständig anpassen zu müssen.