2. Add Options to the Clock App

Posted by on October 16th, 2020

Most Apps will require some form of configuration options. This configuration can be different for each instance of your App (that is, each time you actually use your App).

For our Simple Clock App, let’s say we want to add the following configuration options:

  • Clock Font Size : specify the exact font size in pixels (Integer)
  • Show Seconds : an option to show the seconds part of the clock or not (Boolean)

To add these options to your App, you need to do 3 things:

  1. Modify the App code to accept the configuration values.
  2. Add an init_widget(config) function that is called by the player when the app has finished loading and passes the JSON configuration parameters.
  3. Provide a UI form specification, so that Yodeck will create a form for editing these options for your App instances.

Modify the App Code

Modify the App code as follows:

index.html

<!DOCTYPE html>
<html>
<head>
<script>

var use_seconds = true;
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = 0
    m = checkTime(m);
	txtEl = document.getElementById('txt')

	if(use_seconds){
		s = today.getSeconds();
    	s = checkTime(s);
		txtEl.innerHTML = h + ":" + m + ":" + s;
	}
	else{
    	txtEl.innerHTML = h + ":" + m;
	}
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function init_widget(config) {
		if (!config) {
			return;
		}
	
		if("clock_font_size" in config){
			var pixels = config.clock_font_size + "px"
			document.getElementById('txt').style.fontSize = pixels;
		}

		if("use_seconds" in config){
			use_seconds = config.use_seconds;
		}
		
		startTime()
		
}
</script>
</head>
<body>

<div id="txt" style="font-size: 48px"></div>

</body>
</html>

Provide a UI Configuration Form for your app

To allow Yodeck to configure your App, you must provide a detailed specification of your configuration fields. To do this, you use the JSON Schema. You just paste the JSON Schema text to the text area.

For the 2 configuration values, we need now,

  • the “schema” value defines the editors for each of your fields,
  • the “fields” value is optional and defines the order the fields will appear in the form.

Here is the JSON Schema to use:

UI Configuration

{
  "fields": [
    "clock_font_size",
    "use_seconds"
  ],
  "schema": {
    "clock_font_size": {
      "editorAttrs": {
        "max": 999,
        "min": 1,
        "step": 1
      },
      "title": "Clock Font Size",
      "type": "Number",
      "validators": [
        "required",
        "number"
      ]
    },
    "use_seconds": {
      "title": "Use Seconds",
      "type": "Checkbox"
    }
  }
}