Vizlib Home
Welcome
Login

Vizlib Writeback Table Properties - Custom Styling

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. 


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


Custom Theme


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 inputs in Form View (only displayed when Form View is enabled). 
  • Checkbox Border Color - used for the border of the 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. 


Back to Contents


Adjust Column Width


You can set your own column width by enabling the Adjust Column Width settings and using the slider or entering a number in the expression editor to change the column width (Figure 3). You can also choose how to Align Input in a column by selecting Center, Left or Right from the dropdown. 


Figure 3: Adjust Column Width


Back to Contents


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


Back to Contents






K
Kenneth is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.