Once you've started working with Vizlib Input Form, you may want to start applying your own styling changes. This article shows you how to use the customization functions available in Vizlib Input Form. here Color Picker
TABLE OF CONTENTS
- Custom Labels
- Text Area - Multiple Rows in Single Cell
- Field Tooltip Example
- Color Customization Example
- Convert to Vizlib Writeback Table
When you add a field to Vizlib Input Form, the field name is displayed in the table as a default, with the Display Label setting Use Field Name. When you enable the Custom setting (Figure 1) you'll be able to enter text or use an expression to create a Custom Display Label, add a Field Tooltip message, add a Suffix, set a Placeholder, set a display condition which needs to be met in Show field if, and make the field read-only with Editable if.
Note: Field Tooltip will only be displayed when the input form is in Analysis mode.
Figure 1: Custom Display Label
You can see an example of a customized label and suffix in Figure 2.
Figure 2: Custom Label Example
The Add-ons section of the property panel controls the Data Handling settings for the input form (Figure 5). You can choose to Include Zero Values by ticking the checkbox, and enter a Calculation condition using the editor.
Figure 5: Add-ons
Field Tooltip Example
You can customize a field tooltip display by opening Input Fields and entering a message in Field Tooltip in the field settings. When you return to Analysis mode, you'll see the tooltip appear when you hover the cursor over the field title (Figure 6).
Figure 6: Input Form Tooltip
Color Customization Example
Vizlib Input Form has color customization options which you can use to give your table a distinctive look. Figure 7 shows an example of a "Dark Mode" input form. You can use the Custom Styling settings in the Input Fields section to customize the colors in a particular field (the example uses the Name field), or use the Appearance section to customize the colors for input form components (in this example the Main Color setting was changed).
Figure 7: Dark Mode Example