If you'd like to apply your own styling to your data, Vizlib Writeback Table contains Custom Styling settings in the property panel, with functions to help modify and control presentation and color branding. Vizlib Writeback Table now uses the Color Picker to apply color settings, you can read full instructions here.
Note: When you click a column in the writeback table in edit mode, you'll open the column properties in the property panel.
TABLE OF CONTENTS
Figure 1 shows changes being made to the Checkbox column. The column name is edited, custom tooltip is added, the checkbox border color and header column header background color are customized and the alignment of the column is changed from center to left.
Figure 1: Custom Styling Example
To start using custom styling, toggle the Custom Theme slider to the right to allow you to edit the Custom properties (Figure 2). This example shows the properties for a Checkbox data type.
Figure 2: Custom Theme
There are 2 ways you can select a color in Custom Styling. You can open the color palette and select a color using the slider or the matrix, or enter the color hex code in the expression editor e.g. entering #000000 will set the color to black.
The color settings you can select and adapt for custom styling are listed here.
- Custom Color - used for table components such as highlights and inputs (e.g. when a checkbox field is selected).
- Input Title Color (Form) - used for input titles in Form View (visible when Form View is enabled).
- Checkbox Border Color - used for the border of a checkbox (multiple choice and radio button data types also have this setting).
- Column Header Background - used for the background in the column header.
- Column Header Text - used for text in the column header.
- Column Totals Background - used for the background of column totals.
- Column Totals Text - used for text in the column totals.
- Required Label Color - used for the label text in a column where an input is required.
- Validation Error Color - used for the error message in a column using validation.
Custom Column Tooltip
If you'd like to apply changes to the tooltip in a table column, you can enable the Custom Column Tooltip settings (Figure 4) for a column and choose a Column Tooltip Icon and Column Tooltip Icon Color.
Figure 4: Custom Tooltip