2. Add Options to the Clock App

Last updated on March 7th, 2024

Table of Contents

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 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:

Modify the App code to accept the configuration values.
Add an init_widget(config) function the player calls when the app has finished loading and passes the JSON configuration parameters.
Provide a UI form specification so Yodeck can create a form to edit 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 specifies the order in which 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"
    }
  }
}