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 Theme, you should save an *.rdlx-json-theme file in the same directory as the report file. After that, the editor of the report's Theme property will display available themes in a dropdown list. 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.