Main Template Editor Page #

Upon selecting Create Template (and then selecting the template size) or Edit Template from the Templates Menu, you enter the template editor. For example if you open the precedent template zDeliveryDocket, you will see the following:

(Note we have used screen shots from the Windows version of the app. Mobile versions will show a smaller section of the canvas.)

The page displays the canvas for the template together with various menu buttons. Of note in relation to those menu buttons:

• The Add Widget button in the bottom right of the screen allows you to add a text, image, input or signature widget which will then appear on the canvas.

• The Preview Template button shows what the current template will look like when actually used (ie as a completed docket with sample inputs and signatures. This may differ from what is seen in the Template Editor canvas as widgets on the canvas will have borders where the widget may have no border and text stylings are not shown in the Template Editor. An example of the difference is below:

• The Hidden Menu button. This button is on every page of the app. On every page the user can access the Help Section, Language Settings and also send any Feedback and suggestions about the app. In the Template Editor, it also has options for Ordering Inputs and to display the Controls for handling the canvas and widgets. The options should look something like this:

Canvas and Widget Controls #

On mobile devices:

Touch and move anywhere on the canvas outside a widget will move the canvas.

Pinching/extending with two fingers anywhere on the canvas will zoom in and out. Touch and moving on a space on the canvas outside the widgets will move the canvas.

Touch and move inside a widget will move the widget.

Touching the edge of a widget will cause the widget to enter resizing mode. The borders will change to a blue colour. When in resize mode an edge can be touched and dragged to resize. Touching anywhere but the edge of a widget in resize mode will take that widget out of resize mode.

Note, widgets can be resized manually via the Edit Widget options discussed below.

With Windows:

Left clicking and moving while holding the click outside a widget will move the canvas.

A mouse scroll wheel will zoom in and out of the canvas (if no mouse available, then zoom via the relevant touchpad mechanism such as pinching).

Left clicking and moving while holding the click inside a widget will move the widget.

Left clicking on a widget border will cause the widget to enter resizing mode with the border turning blue. Edges can be moved by left clicking and dragging the edge. Left clicking anywhere other than the edge of a widget in resize mode will take that widget out of resize mode.

A summary of these controls can be found in the Hidden Menu items under the heading Controls when in the Template Editor.

Widget Menus #

To access widget menus for a widget, double click or double tap on that widget. This will bring up the primary widget menu below:

The main widget menus are:

Edit Widget #

The first option is to manually resize the widget. Pressing this button will allow the dimensions of the widget in pixels to be entered directly.

Other than border (thickness and color) and background color options, priority can be set where two widgets overlap each other. Widgets with the higher priority number will sit on top as per the image below:

Edit Content – Text, Image and Signature Widgets #

Editing Content allows for the content and styling of widget to be changed. For example, multi line text can be added and styled in a static Text Widget. Images can be added or replaced in an Image Widget and a label can be added and a pen color can be selected for a Signature Widget.

The various Edit Content menus for the Text, Image and Signature Widgets are shown below:

Edit Content – Input Widgets #

As input widgets are the real workhorse of the docket, there is more variation in options as is seen in the image below:

Of note are the following options:

Internal name: this does not need to be completed as it relates to features that will become available in future releases.

The label name for the input is shown on the form as part of the border of the input, which saves having to create a separate text widget for that label.  Labels can be styled as seen in the Edit Content overlay.

Inputs entered by the user can be restricted to a numerical keyboard if only numbers are being entered or the full general keyboard can be left selected.

Default values can be entered for the input with options for having no value, a custom text value that can be overwritten when a docket is being created or a date and time value as per the image below.

Note when a docket is created, the date and time values are obtained from the device used. This can be over written using a time picker and date picker by the user when completing a document if needed.

If required a currency symbol can be used as a prefix to the input:

Lastly input text can be stylised in the usual way.

Input Order #

When a docket is created from a template, the user is shown the inputs and signatures in a vertical list.

The order of those inputs and signatures are in accordance with the order the widget was created. Sometimes this orders inputs and signatures as seen below:

The order of inputs can be changed via the Order Inputs button in the Hidden Menu. Inputs can be dragged up and down to change the order.