General
With our HTML5 Apps functionality you can integrate your own Rich Web Apps in sklera. The App is uploaded as a ZIP file to the Media Library, just like any other file, and is subsequently distributed to the players to enable offline support.
To simplify communication of apps with our player software we are offering a JavaScript library.
Structure of an App
An app should, at the least, have the following structure:
manifest.json
index.html
img/thumb.jpg
img/snap.jpg
js/sklera-sdk-VERSION.js
In manifest.json you define name, version number and two preview images for the sklera CMS. Said images need to be included in the ZIP file.
Any additional JS, CSS or media files can be included in the ZIP file as well.
App Manifest
manifest.json describes the app in the following JSON format:
{
"manifest_version": 1,
"name": "Hello World",
"short_name": "Hello World",
"description": "Example Hello World App",
"author": "sklera GmbH",
"version": "0.0.2",
"offline_enabled": true,
"thumbnail": "img/thumb_320x180.jpg",
"snapshot": "img/snap_1280x720.jpg",
"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"
}
]
}App Settings
Config values for the app can be added under the 'config' key as you can see in the example above. For a comprehensive description of the possible config values check the corresponding article.
In the sklera CMS you can give custom values to these Apps by calling the 'App settings' menu in the media library, Spot-Widget or Layout Widget.
To access the config values in the app you can either call the Javascript library method getConfig , or alternately it's supplied as a second parameter of the loaded callback function.
sklera Javascript SDK
To simplify communication of apps with our player software we are offering a JavaScript library , which you can easily include in your web app to access additional features:
- Read player data like name, address, postal code
- Control Pause and Play of the player
- Show/Hide the App
- Show/Hide Layout widgets
- Save and read text data on the player
The SDK is available under the following link, complete with documentation and a sample app: