Exago Logo
Search
Generic filters
Exact matches only

Create a Custom ExpressView Theme (v2021.1+)

Note

This section applies to ExpressView in v2021.1+ of the application. For previous versions, refer to Create a Custom ExpressView Theme (pre-v2021.1)

theme can be applied to an ExpressView that will change the colors of the elements on the canvas such as the totals, column headers, data rows, borders and divider lines. Themes will also apply in certain situations when the ExpressView is exported.

In addition to several themes provided with Exago, administrators may create their own.

Create an ExpressView Theme

Note

This article references <WebApp> as a placeholder for the Web Application’s install location. The default install location is C:Program FilesExagoExagoWeb or /opt/Exago/ on Linux. However, these directories can be changed during installation.

  1. Copy one of the existing .wrtev2 theme files from the <WebApp>Themes directory.
  2. Edit the properties of the JSON objects in the file, as detailed below in the Theme JSON and Color Definition JSON sections.
  3. Save the file with the name of the new theme back to the <WebApp>Themes directory.
  4. Load the new theme into the Storage Management database by clicking the Admin Console > Storage Management > Load Themes button.

ExpressView Table Elements

Themes apply coloring to common groups of elements. The following figure depicts the uniquely themable elements:

Table_Elements.png
Click the figure for a larger view

The themable elements are:

  • Column Headers
  • Data Records
    • Detail Rows
    • Innermost Group (when Detail Rows are hidden)
  • Group Records
    • Group Rows
    • Group Totals for all levels of grouping (excluding the innermost Group Column when detail rows are hidden)
  • Report Totals
  • Group Divider Lines, the vertical line separating the groups and detail columns as well as the horizontal line that appears after the last record of the outermost group
  • Data Divider Line, separating detail columns
  • Content Border

Theme Definition

An ExpressView theme is a JSON file with a .wrtev2 file extension.

Theme JSON

Name Type Description
ThemeName string The name of the theme
PreviewColors array of strings An array of hexadecimal HTML color codes that will appear in the ExpressView Designer’s Canvas menu preview window
ColumnHeaders Color Definition The font, background and border color definition for the Column Headers
DataRows Color Definition The font, background and border color definition for the Detail Rows
GroupSections Color Definition The font, background and border color definition for the Group Rows and Group Totals
ReportTotals Color Definition The font, background and border color definition for the Report Totals
GroupDivider string A hexadecimal HTML color code for the Group Divider Lines
ContentBorder string A hexadecimal HTML color code for the Content Border
DataDivider string A hexadecimal HTML color code for the Data Divider Lines
CanvasBackground string This property is not implemented and will not affect the theming of the ExpressView

Color Definition JSON

Color Definition objects describe the font color, background color and border color of the Column Headers, Detail Rows, Group Rows, Group Totals and Report Totals.

Name Type Description
FontColor string A hexadecimal HTML color code for the font (text) color in the item
BackgroundColor string A hexadecimal HTML color code for the background color of the item
BorderColor string A hexadecimal HTML color code for the borders of the item

Sample

The following sample theme JSON file creates the built-in Office Park theme.

{
	"ThemeName": "Office Park",
	"PreviewColors": [ "#90D9FD", "#F0F6F8", "#9FC1CE" ],
	"ColumnHeaders": {
		"FontColor": "#2A2D34",
		"BackgroundColor": "#9FC1CE",
		"BorderColor": "#858992"
	},
	"DataRows": {
		"FontColor": "#2A2D34",
		"BackgroundColor": "#FFFFFF",
		"BorderColor": "#E4E5E8"
	},
	"GroupSections": {
		"FontColor": "#2A2D34",
		"BackgroundColor": "#F0F6F8",
		"BorderColor": "#9FC1CE"
	},
	"ReportTotals": {
		"FontColor": "#2A2D34",
		"BackgroundColor": "#90D9FD",
		"BorderColor": "#51AAD5"
	},
	"GroupDivider": "#637A82",
	"ContentBorder": "#C7CACF",
	"DataDivider": "#C7CACF",
	"CanvasBackground": "#F1F1F3"
}

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Table of Contents