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.


    Basic steps
    1. get an example branding file ({version}.zip) from, section CloverDX Server Utilities & Extras

    2. edit files within the file

    3. set value of the dataapp.branding.resourceFilePath configuration property to the path to the file

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



    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:


    UI styling

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


    CSS styles

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


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

    .cloverdx-brand {
       display: none !important;

    You can add custom images to <>/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:


    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."; = "footer";
        dataAppEl.parentNode.insertBefore(newEl, dataAppEl.nextSibling);
    }, false);
    Branding file structure
    -- "app.css"
    -- "app.js"
    -- "images"
       |-- "favicon.png"
    -- "messages.json"