Version

    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

    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"