Report Themes

Report Themes are a way to customize the look and feel of your reports. This feature is useful when you want to control the appearance of multiple reports with a single configuration. It could also help provide multi-lingual reports that pull static text such as the report title or table column headers from the linked resource.

Report Theme Structure

A report theme is a JSON object containing a color palette, major and minor font properties, a list of images, and textual values. Currently, ActiveReportsJS does not offer the theme editor, but it is quite easy to create a theme from scratch using the following steps:

• Create a new file with the *.rdlx-json-theme extension.

• Copy the following content into the newly created file and replace values with your own. You can convert image files to base64 strings using an online tool like base64-image.

{
  "Theme": {
    "Colors": {
      "Dark1": "#000000",
      "Dark2": "#1a1a1a",
      "Light1": "#40cddf",
      "Light2": "#e6e6e6",
      "Accent1": "MediumTurquoise",
      "Accent2": "Gold",
      "Accent3": "DeepPink",
      "Accent4": "#557bd2",
      "Accent5": "#8acc1f",
      "Accent6": "#409dcc",
      "Hyperlink": "#aaa",
      "HyperlinkFollowed": "#3c3c3c"
    },
    "Fonts": {
      "MajorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "20pt",
        "Weight": "Medium"
      },
      "MinorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "9pt",
        "Weight": "Normal"
      }
    },
    "Images": [
      {
        "Name": "Logo",
        "MIMEType": "image/png",
        "ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
      }
    ],
    "Constants": [
        {
          "Key": "Title",
          "Value": "Sales Report"
        }
      ]
  }
}

Linking a Report to a Theme

To link a report to a specific theme, follow these steps:

1. Save the theme file with an *.rdlx-json-theme extension in the same folder where your report file is located.

2. Open the report in the report editor. The Theme property dropdown menu should now list all available themes located in the same directory as the report.

   
   

3. Optionally, you can dynamically assign a theme to the report by setting the Theme property to an expression that evaluates to your desired theme name at runtime. For instance, in the Report Theme demo the Theme property of the report is configured with this expression: IIF(Parameters!ThemeID.Value = "dark", "DarkTheme.rdlx-json-theme", "LightTheme.rdlx-json-theme")

   With this setup, the report will apply either the light or dark theme based on the value of the ThemeID parameter that the user selects within the report viewer's interface.

After you selected a theme, you can use the following expressions to reference the theme's values.

^* To use an image from a theme, set the Source property of an image report item to Database.

Style property

Some report items have the Style property, which is the shortcut for setting multiple theme-based values. For example, the Style property of the TextBox contains the list of items that consist of three values separated by a space, such as Light1 Accent1 Major. If you select one of these items, the textbox will use the first value for the text foreground color(f.e. Light1), the second value - for the background color(f.e. Accent1), and the third value - for the font properties(f.e. Major).

Runtime theme resolution

In practice, an application that runs and exports reports or loads them into the viewer component should resolve themes at runtime. To achieve that, you can use the Resource Locator feature. For example, you can save a *.rdlx-json-theme file in an application's static assets and return its content in the code of the resource locator implementation. It is also possible to alter themes dynamically. Visit the live demo for the full code sample of this approach.