Version CloverDX 5.11.2

Branding of Data Apps

What can be rebranded

Using the rebranding support of the CloverDX Data Apps, it is possible to change the following aspects of the web application:

  • UI messages communicated to the user
  • CSS styling of Data Apps
  • images

Additional customization can be done by adding a custom JavaScript code.

Usage

Basic steps

  1. get an example branding file (cloverdx.data-app.branding.{version}.zip) from https://support.cloverdx.com/downloads, section CloverDX Server Utilities & Extras
  2. edit files within the cloverdx.data-app.branding.zip file
  3. set value of the dataapp.branding.resourceFilePath configuration property to the path to the cloverdx.data-app.branding.zip file
    [Note]Note

    On Windows OS, use either forward slashes or double backslashes in the path to the branding file, e.g.:

    dataapp.branding.resourceFilePath=C:/path/to/cloverdx.data-app.branding.5.9.0.zip

    dataapp.branding.resourceFilePath=C:\\path\\to\\cloverdx.data-app.branding.5.9.0.zip

Resource locations

UI messages

UI messages (labels, caption, tooltips, ...) are stored in the messages.json file. Any of these messages can be changed by redefining their values. To increase readability, you can even keep only the modified messages and delete the rest (default messages will be used then). The file is expected to be present at the following location:

<cloverdx.data-app.branding.zip>/messages.json

UI styling
Favicon

A new favicon can be placed on the exact location within the branding library:

<cloverdx.data-app.branding.zip>/images/favicon.png

CSS styles

You can replace or add custom CSS styles in app.css file within the branding library:

<cloverdx.data-app.branding.zip>/app.css

To hide all default images, you can configure the display property for the cloverdx-brand class. 

.cloverdx-brand {
   display: none !important;
}

Images

You can add custom images to <cloverdx.data-app.branding.zip>/images folder. Images are then available on URL /SERVER_CONTEXT/data-app/resource/PATH_TO_IMAGE (e.g. /clover/data-app/resource/images/image.png).

Custom JavaScript

Custom JavaScript can be used to make modifications that cannot be done by CSS.

You can add custom JavaScript code into the app.js file within the branding library:

<cloverdx.data-app.branding.zip>/app.js

For example, the following code will add a custom element (footer) to the bottom of the page: 

window.addEventListener("load", function() {
    const dataAppEl = this.document.querySelector(".content");
    const newEl = document.createElement("div");
    newEl.innerHTML = "Copyright © 2020 My Company, All rights reserved.";
    newEl.id = "footer";
    dataAppEl.parentNode.insertBefore(newEl, dataAppEl.nextSibling);
}, false);

Branding file structure

-- "app.css"
-- "app.js"
-- "images"
   |-- "favicon.png"
-- "messages.json"