Template Builder User Guide

Version 2.4 | Published November 17, 2022 ©

Editing Template Layout

Editing a template's layout makes it easy to create fill-in forms for journalist. With drag & drop functionality, creating new fill-in forms is quick and easy.

  • Adding tabs enables you to quickly create fill-in forms based on selected fields or start with an empty space where you can add your chosen field types.

  • The All tab gives you access to the classic form that contains all of the template's field types.

  • Resize, move, edit, add and delete fields quickly.

This section covers the following topics:

Follow the steps below to get started.

Accessing Layout Editing

  1. Open or create a new template and add a scene.

  2. Click Fill-in form:


The default view is then displayed:


Creating a Template

Selecting Fields and Creating a New Tab

To create a new form for journalists to work with, select fields and click the Create New Tab button:


Enter a new for your new tab and click OK:


In the example in above, Selected is marked as the fields have already been selected. Click OK. All of the previously selected fields are now shown:


Creating a Second Tab

You can use the layout editor to drag and drop, resize and reposition elements in the form. This can be a quick way of doing things if you're only using a few fields.

  1. Click the Create Tab button (or ALT +T).

  2. Enter a name for the tab. Select None and click OK:


Adding, Moving, and Resizing Fields

Use drag and drop to add fields:


You can then use your cursor to resize and move the elements around:


You can also create a new tab and click Select All:


This tab then contains all the fields, and is quite similar to the default view:


Deleting Tabs

When you're happy with your design, you can Delete the tabs that you don't want to use, right-click on the tab:


Hiding and Showing Tabs

You can then decide what should be visible to the journalist. All with a line through the eye icon indicates that a tab is hidden:


Make a tab visible by clicking the breadcrumbs beside New Template at the top of the screen:


Deselect Hide generated view and click Close:




Creating a Drop-down Menu

Give the journalist more options to choose from. Click Data entry at the bottom left of the screen. Select Choose from list:


Enter a Name in the menu:


Double-click the Value field:


Edit the Value box:


Right click in the menu and select Insert row below, to create more rows in the same way:


Dynamic Drop-down

When you create a drop-down, you can choose and create one that is dynamic. By choosing a dynamic drop-down, you can populate it with data, which will be used as a data driven drop-down.

To do so, these are the following steps:

  1. Create a new single-line text field that may be called "mySourceField". This acts as the source of the drop-down item.

  2. Secondly, create another single-line text field, this is where your drop-down will be displayed.

  3. In the second single-line text field, click on it so that the parameters are displayed.

  4. In the Data entry property, click on the Dropdown alternative.

  5. Once the alternative is added, a new text field right below called Linked source field will appear.

  6. Fill the Linked source field with the name of your first single text field, which in this example is "mySourceField".

  7. Within that field, you can add data, either directly through the "mySourceField" input, or from the script editor like shown below:

  8. The data must be in a JSON format: [{"label": "my label1", "value": "my value1"}, {"label": "my label2", "value": "my value2"}, {"label": "my label3", "value": "my value3"}]:

    1. The label property is what is displayed in the drop-down.

    2. The value property is what is being stored in the data element (this is sent to Viz Engine).

Note: For more details please see Data Entry.

Changing the Image

Click the circle icon to open a menu to search for a different image:


Select an image and click OK:


Image Constraints


Specify standards for image quality and size using either or both of the following:

  • Minimum size of the image (pixels): number of pixels, irrespective of aspect ratio.

  • Aspect ratio: minimum width and height.

Note: A warning is shown if the image becomes smaller than the minimum permitted.

Saving a Template

Click the Disk icon (or shortcut CTRL + S) to save:


Enter a template name and click Save: