The navigation bar is shown at the top of the screen. It contains the close button on the right and can be configured to show a configurable logo and title text on the left. The navbar can be specified as follows:

payload["navbar"] = {
    "logo": utils.encodeImage(os.path.join(image_folder, "myCustomLogo.jpg")),
    "title": "Example title",
    "subtitle": "<small>v1.0</small>"
}

payload.navbar.logo     = utils.encodeImage(fullfile(imageFolder, "myCustomLogo.jpg"));
payload.navbar.title    = "Example title";
payload.navbar.subtitle = "<small>v1.0</small>";

Note that the image file used for the logo cannot be specified as a file name, as the image file will not be available in the browser. Instead the information in the image file must be encoded with the encodeImage utility function and put in the form. The image file must be stored near the guiInit code and its absolute path must be used as input for encodeImage.

Show changes

A warning message can be displayed in the navbar, whenever the form has changes. To enable this feature, specify the showChanged field in the payload. This feature can be turned on and off during initialisation or events.

The change indication is triggered by the form's pristine flag, which is lowered each time the user changes a value. Reverting a changed value to the previous value does not raise the pristine flag again. It is possible to change the pristine flag value during initialisation or events.

payload["showChanged"] = True
payload["pristine"] = True

payload.showChanged = true;
payload.pristine    = true;