Scroll

Create a Custom ExpressView Theme

Starting in version 2017.1, administrators can provide custom ExpressView themes for their users. Themes are made either by using the ExpressView designer or by editing and supplying custom JSON files from a template.

The ExpressView designer allows you to preview themes as you are making them, but it is more limited than editing the files. You may want to get started with the designer, then make any additional changes directly in the theme files.

Using the ExpressView designer

The ExpressView designer lets you make themes in the same manner as you would style individual ExpressViews. Keep in mind that the elements of an ExpressView are styled separately from one another. When you select an element to style, the designer will highlight in blue all the sections that will receive the styling. Applicable elements are:

  • Each level of Group Header
  • Alternating Group Colors (the Radial Menu icon)
  • Each subsequent Column Header (or "Detail Header")
  • Each subsequent Detail Section
  • Each level of each subsequent Group Footer
  • Each subsequent Report Footer
  • Alternating Detail Row colors

To make an ExpressView theme using the designer:

  1. Create or open an ExpressView for editing.
  2. Add enough data fields and groupings to have all the elements you want to style.
  3. Style the ExpressView as normal. See ExpressView: Customizing appearance.
  4. When you have finished, while holding the Ctrl, Shift, and Alt keys, click the Save ExpressViewSave.png icon.
  5. Enter a name and optionally, a report path to save the theme. Then click OK. By default, the theme is saved in the indicated path in your Reports folder. It is not immediately accessible to the environment; themes can be loaded from the Reports folder once the server picks them up. However, you should move the file (indicated with an .wrtev extension) to the Themes folder instead.
    Note: If you are using custom Folder Management, the theme may be immediately saved to Themes storage, depending on your implementation.

Manually editing theme files

You can build ExpressView themes manually by writing JSON to text files with a .wrtev file extension. Instead of building them from scratch, you may want to make themes using the designer first, then edit the files to add what you want. Or locate the Legacy.wrtev theme, which is blank, then make a copy and use that as a template.

Editing theme files gives you some more options, namely the ability to set border colors and widths for the different elements.

First you will have to familiarize yourself with the JSON format. See Using JSON to get started.

ExpressView Theme JSON

The theme JSON is an object with the following properties:

Name Type Description
FormatTheme string Optional: The name and folder path of the theme.
GroupHeaderFormats array of Formats Format of group headers, starting with the outermost group, and moving inward.
GroupFooterFormats array of arrays of Formats Format of group footers for each column, starting with the outermost group and moving inward. Columns from left to right.
ColumnHeaderFormats array of Formats Format of column headers (detail headers), from left to right column.
DetailFormats array of Formats Format of detail rows, from left to right column. BackgroundColor is ignored - use Row Shading instead.
ReportFooterFormats array of Formats Format of report footer, from left to right column.
RowShading array of strings Alternating hex colors for the detail row backgrounds.
GroupColors array of strings Alternating hex colors for the radial menu group icons; starting with the innermost group, and moving outward.

Example

{
  "FormatTheme":         "Example",
  "GroupHeaderFormats":  [ {format}, {format} ],
  "GroupFooterFormats": [[ {format}, {format}, {format} ], 
                         [ {format}, {format}, {format} ]],
  "ColumnHeaderFormats": [ {format}, {format}, {format} ],
  "DetailFormats":       [ {format}, {format}, {format} ],
  "ReportFooterFormats": [ {format}, {format}, {format} ],
  "RowShading":          [ "color", "color" ],
  "GroupColors":         [ "color", "color", "color" ]
}

Format objects define the styling for a particular element. They are described below.

ExpressView element diagram

The following diagram shows how the properties of the theme JSON (see the example above) correspond with the elements of an ExpressView:

expressview_theme_sections.png

 

Format JSON

Name Type Description
FontFamily string Font name, such as "Times New Roman"
FontSize int Font size, in px
FontColor string Hex font color
BackgroundColor string Hex background color
Weight int 0: normal; 1: bold; 2: italic; 3: bold & italic
Underline int 0: none; 1: single; 2: double
HorizontalAlign int 0: left; 1: center; 2: right; 3: justified
VerticalAlign int 0: top; 1: center; 2: bottom
WrapText boolean Whether to wrap long text to a new line, or to cut it off
UniformBorder boolean Whether all borders are the same style
BorderFormatting BorderFormat BorderFormat object

 

BorderFormat JSON

Name Type Description
TopColor string Hex color of top border
TopWeight int Width, in px, of top border
LeftColor string Hex color of left border
LeftWeight int Width, in px, of left border
BottomColor string Hex color of bottom border
BottomWeight int Width, in px, of bottom border
RightColor string Hex color of right border
RightWeight int Width, in px, of right border

 

Example

{
  "FontFamily": "Calibri",
  "FontSize": 14,
  "FontColor": "#FFFFFF",
  "BackgroundColor": "#4C5D60",
  "Weight": 3,
  "Underline": 0,
  "HorizontalAlign": 0,
  "VerticalAlign": 1,
  "WrapText": true,
  "UniformBorder": false,
  "BorderFormatting": {
    "TopColor": "#ededed",
    "TopWeight": 1,
    "LeftColor": "#ededed",
    "LeftWeight": 0,
    "BottomColor": "#ededed",
    "BottomWeight": 1,
    "RightColor": "#ededed",
    "RightWeight": 0
  }
}

Setting a default theme

If you want to make a theme the default for all new ExpressViews in the environment, change the config file setting <expressviewdefaultformattheme> to the name of the theme.


Hidden Article Information

Article Author
Exago Development
created 2017-05-16 14:32:45 UTC
updated 2017-08-10 13:33:42 UTC

Labels
font, json, styling, group, style, format, row, wrtev, formats, color, alignment, shading, header, footer, detail,
Have more questions? Submit a request