Properties - Appearance

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.

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

This topic contains the following sections:

• General

• Alternate States

• Main Color Settings

• Form Settings

• Header Settings

• Footer Settings

• Others

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