Setup and Layout Wizard

In Vizlib Input Form, the Setup Wizard to create a visualization quickly and easily, with a choice of 2 methods - Templates or Layout. You can also choose Manual Configuration and use the Layout Wizard or Add Field settings in the property panel to make changes to your form.

This topic contains the following sections:

• Working with Input Form Fields

• Creating a Form

• Set Up - Templates

• Set Up - Layout

• Manual Configuration

Note: With the current version of Vizlib Input Form, you'll need to disable touch screen mode in Qlik Sense to use drag and drop to re-order columns in the property panel.

Note:

Vizlib Input Form has been designed to work with any screen size.

• If your screen can't display the entire form, a scroll bar will enable automatically.

• You can position input fields to remain in the same place in the form regardless of screen size.

• The Auto option means a cell will resize automatically if the screen size changes, to help prevent large gaps between cells on larger screens.

Note: You can only use the Add Page feature (and input field formatting settings) with version 3.6.0 of Vizlib Input Form and above.

Working with Input Form Fields

Both the Setup Wizard and the Layout Wizard have controls you can use to change the form layout. Above the layout panel there's a drop-down and three buttons - Add Field, Add Group, Add Caption and Add Divider. When you add a field or a component, it will appear in the form below the field you've selected in the wizard. If you do need to move it, you can click and drag it to another position in the form, and you can select multiple items by clicking when you're holding down the CTRL key. If you need to remove it, click at the far right of the text box.

• Add Field - select a Data Type from the drop-down. You can use the text box to enter the field name. There is also a drop-down to choose the field text Size, text Color, enable a Break Line after the field, use Show Item if to display the item only if a condition is met, add Tooltip and Change Page after the field.

• Add Page - click to add a new page. Once you've added the page, you can add items using the controls or drag and drop, helping you to group and organize large amounts of data. You can choose to disable the Next navigation button in the form if validation fails.

• Add Group - click to add a group. You can add items to the group using drag and drop, and use the Show Group If function to display the group only if a condition is met. You can also add Tooltip, and Change Page after the group.

• Add Caption - click to add a caption. You can enter caption text in the text area, and choose a Header or Paragraph format, apply Bold, Italic or Underline formatting, set the text Color, use the Show Text If function to display the caption only if a condition is met, and add a break to Change Page after the caption.

• Add Divider - click to add a divider. You can move the divider using drag and drop, and also set the divider Color, and use the Show Divider If function to display the group only if a condition is met, and Change Page after the group.

Figure 1 shows a new page added for the Contact Information form items, a field State being added and deleted, and the new page structure being demonstrated in analysis mode.

Figure 1: Input Fields Example

Creating a Form

To create a new input form, click on the sheet you'd like to work from in Qlik Sense Hub (Figure 2). When the sheet opens, follow these steps.

• Click on Custom Objects in the far-left menu.

• Select VizLib Collaboration.

• Click and hold the cursor on the Vizlib Input Form option.

• Drag and drop the object into the sheet, and drag the edges to re-size it.

• Select Set up to open the setup wizard, or Manual Configuration to use Input Fields settings in the property panel.

• If you select Set up, the Setup Wizard should open, with two options - Templates and Layout.

• Manual Configuration also has two options - the Layout Wizard or Add Field.

Figure 2: Create New Input Form

Set Up - Templates

The Templates setup allows you to pick a template to apply pre-defined values to your input form. If you'd like to know more about working with Vizlib Templates, please see our article here.

• Click on Templates, then click Continue.

• Select the template you'd like to use to open the Layout Maker.

• Review the fields in the form, then click Continue when you've completed any changes.

• In the Destinations screen, you define the destination type you'll use to enter and retrieve your input form data. You can choose a REST API, a file (QVD-CSV-TXT) or a Server destination. For more information about Vizlib Input Form destinations, please click here.

• Click Save to finish the setup. If you have selected a QVD-CSV-TXT destination, you'll be asked if you want to update the data load script (this will add any new fields to the data model). Click Update to add the fields, or Skip if you don't need to add them. If you add the fields, a confirmation saying Script Injected will display when the update completes.

• The input form should now open in edit mode. If you need to make any other changes, you can find instructions in Manual Configuration.

Figure 3 shows an example of a template format with a REST output type.

Figure 3: Setup Wizard Templates Example

Set Up - Layout

The Layout setup allows you to build your own layout, using the values available in the Fields panel and the 4 Add controls (explained in Working with Input Fields).

• Click on Layout, then click Continue.

• When the Layout Maker opens, use the Add controls at the top to add content to your form.

• You can manage fields by dragging them within the layout panel. If you select a field in the panel, any new items will be added directly below the selected field.

• Review the fields in the form, then click Continue when you've completed any changes.

• In the Destinations screen, you define the destination type you'll use to enter and retrieve your input form data. You can choose a REST API, a file (QVD-CSV-TXT) or a Server destination. For more information about Vizlib Input Form destinations, please click here.

• Click Save to finish the setup. If you have selected a QVD-CSV-TXT destination you'll be asked if you want to update the data load script (this will add any new fields to the data model). Click Update to add the fields, or Skip if you don't need to add them. If you add the fields, a confirmation saying Script Injected will display when the update completes.

• The input form should now open in edit mode. If you need to make any other changes, you can find instructions in Manual Configuration.

Figure 4 shows an example of a layout format with a QVD-CSV-TXT output type.

Figure 4: Setup Wizard Layout Example

Manual Configuration

If you choose to create a form using manual configuration, you can go to Input Fields in the property panel and choose between two options - adding fields using the Layout Wizard or using the Add Field settings.

• In the property panel, go to Input Fields, then Layout Wizard to open the Form Layout Wizard.

• Use the Add Field controls and the Fields list to make any changes (see Working with Input Form Fields for more details).

• Click Save when your changes are finished.

• If you don't want to open the wizard, click Add Field and select a data type from the drop-down. The field should appear at the bottom of the form. If you'd like to move the field to another place in the form, open the layout wizard and drag the field to its new location.

Figure 5 shows a field being added using Add Field and using Layout Wizard to allocate it to a group.

Figure 5: Layout Wizard and Add Field Example