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.
TABLE OF CONTENTS
Note on Column Order: 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 on Screen Size: 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.
Working with Input Form Fields
Both the Setup Wizard and the Layout Wizard have controls you can use to change the form layout. You can move fields to and from the Fields panel on the left, and above the layout panel there's a dropdown and 3 buttons - Add Field, Add Group, Add Caption and Add Divider. When you use them to add a field or a component, it will appear at the bottom of the Input Form. If you need to move it, you can click on it and drag to the correct position. If you need to remove it, click
.
- Add Field - select a data type from the dropdown. You can use the text box to enter the field name.
- 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 add a condition to be met for the group to be displayed.
- Add Caption - click to add a caption. You can enter caption text in the text area.
- Add Divider - click to add a divider. You can move the divider using drag and drop.
Figure 1 shows a field being added, moved to the top, then deleted.
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 to start adding content to your form.
- You can manage fields by dragging them between the Fields list and the layout panel (if you try to move the other components to the Fields list (e.g. a caption) they'll be deleted).
- 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 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 dropdown. The field should appear at the bottom of the form.
Figure 5 shows a field being added using the Layout Wizard and Add Field.
Figure 5: Layout Wizard and Add Field Example