Skip to content

30. 'Wizard UI' Editor Window

Valéry Letroye edited this page Dec 11, 2017 · 2 revisions

This window can be accessed via the 'Edit > Wizard_type_ UI' menu of the main screen. It can be used to edit the UI of the Wizards executed during the installation, un-installation, upgrading of the package.

These wizards UI can be either generated using a Json configuration or a shell script. But before being able to edit Wizards UI, you have to add them explicitly in a package, using the menu 'Package > Create Wizard':

Next, you can choose between a json wizard or a wizard to be created dynamically with a shell script.

If later, you want to remove the wizards UI, use the menu 'Package > Remove Wizard':

1. Json Wizards UI

You can find some online help about the creation of Json Wizard UI using the menu '? > Wizard Dev Guide'

This JSon Wizard editor is based on the ZTN Json Editor. More info about this via the menu '? > About Json Editor'

You can import an existing json wizard using the menu 'File > Import' or you can create your own wizard using context menus, by right-clicking nodes 'Array' in the json treeview. Except if you are an expert, use only the menu-items of the Wizard section. Doing so, you will be guided through the creation of a valid Wizard UI.

  1. Add a step: can be added under the root node 'Array'. Each step of the wizard will be displayed as an individual screen.
  2. Add an Item: one or several Items can be added under the Array node of a step. An item can be an option button (singleselect), a checkbox (multiselect), a textfield, a password field or a combobox.
  3. Add a Subitem: one or several Subitems must be added under the Array node of an Item. An item is nothing without at least one Subitem (Ex.: Add one or several 'Radio Buttons' under a 'singleselect' Item. Add one or several 'Check Box' under a 'multiselect' Item). When adding a Subitem, you are prompted for various parameters. The prompt window always has a tab 'Help' with a description for each parameters supported by a Json Wizard UI.

Add a step:

Add an Item:

Add a 'Radio Button' Subitem under a 'singleselect' Item

Add a 'Check Box' Subitem under a 'multiselect' Item

Add a 'Text Box' Subitem under a 'textfield' Item

Add a 'Password box' Subitem under a 'password' Item

Add a 'Combo Box' Subitem under a 'combobox' Item

Each pane can be resized: The Json treeview on the left, the preview on the right and the json string in the middle.

You can edit manually the Json string in the string editor. All changes, if correct, are immediately reflected in the Json treeview. The Json is not valid, an error message will be displayed in the bottom-right, in red: INVALID JSon format. Pay however attention that some syntax error could break the treeview. In such a case, click Cancel to close the editor without persisting your changes. Notice that you can use CTRL-Z/CTRL-Y to undo/redo changes done manually in the string editor.

Click 'OK' to commit all changes done and close the window. All changes are persisted immediately under the subfolder 'WIZARD_UIFILES'.

Click 'Cancel' to abort all changes and close the window.

2. Wizard created via a shell script

If you choose for a shell script to generate your wizard, you will see the "standard" Shell Script Editor

The idea is here to generate the Json string, for example by running a php script as illustrated above (This is the installation Wizard of my Package 'MODS_SPKTracer.spk'). The advantage is that using a shell script, one can inject dynamically values in the Json. In the example above, I am reading the model name of my Synology from the synoinfo.conf file and I inject that name in the Json of my Wizard.

The Json must be stored in the temporary log file used by Synology during the installation of the package. The fullname of this file is in the Synology variable $SYNOPKG_TEMP_LOGFILE.