The Appearance section contains settings which can be used to alter the look and feel in Vizlib Input Form. You can now use the Color Picker to apply color settings, you can read full instructions here.
TABLE OF CONTENTS
Figure 1 shows a Title being added, the Main Color being changed to red, the Input Background Color changing to blue, the header Custom Background Color changing to blue, and the Footer Background changing to red.
Figure 1: Example
General
With the General settings (Figure 2), you can enable Show Titles to display a Title, Subtitle, and Footnote, and Show Details to display descriptions or data related to any dimensions or measures you're using.
Figure 2: General
Alternate States
With Alternate States (Figure 3), you can assign your visualization to an alternate selection state, where you can perform comparative analysis between sets of multiple data items. If you want to add the object to master visualizations, you need to set State to Inherited. You can find more about alternate states here.
Figure 3: Alternate States
Main Colors Settings
Main colors settings (Figure 4) allow you to customize the colors you use in the visualization. You can choose the color you want by clicking on the color palette or entering your own hex color code in the expression text box (e.g. #FFFFFF is white).
Figure 4: Main Colors Settings
The Main Color and Main Text Color set the background and text color for components like buttons and selections (e.g. ticking a check box). Inputs settings allow you to select colors for entering information in the table.
You can also customize the Input Text Color, Checkbox Border Color, Inline Text Color, the Chips Background Color, Chips Text Color (for the chips data type), and the Evaluated Label Color.
Form Settings
Form settings (Figure 5) control the colors displayed in the input form. You can choose the Form Background Color, the Group Background Color, the Input Title Color and the Suffix Color.
Figure 5: Form Settings
Header Settings
If you choose to enable Show Header, you can use Header Settings (Figure 6) to customize the Header Title, and select the Header Height. In Custom Styling, you can enable Custom settings for the Background Color and Text Color. You can add a Background Image and set the image Size, Vertical Alignment and Horizontal Alignment, and use a Background Gradient (a gradual shading along the header), setting a Start Color, Start Opacity, End Color, End Opacity and Angle.
Figure 6: Header Settings
If you choose to enable Use Image, you can enter the Image URL, set the Vertical Alignment, Horizontal Alignment, Image Height, and Image Width. You can also set a font size for the Title, choose the title Vertical Alignment, and Horizontal Alignment, and enter a Subtitle, customizing the Horizontal Alignment and the Font Size.
Footer Settings
You can use Footer Settings (Figure 7) to customize the Footer Background and the Disabled Color for footer components. In the Buttons section, you can customize a Submit Button Label, choose a Submit Button Icon, show a Form Reset Button, and chose a Reset Button Label and Reset Button Icon. You can also customize the button alignment with Footer Buttons Align and control button spacing with the slider for Footer Buttons Width.
Figure 7: Footer Settings
Others
Others settings (Figure 8) allow you to enable Validate after touch, which means validation errors are only displayed after a user selection or interaction (e.g. an item in the row is changed, or the Writeback button is clicked), show a warning about Browser compatibility and also enable a Non-branded load indicator setting if you'd rather not have the Vizlib logo appear during a reload operation.
Figure 8: Others