Skip to content

Static Content

The staticContent feature supports various functions:

  • Design customizations: Corporate design
  • Custom logo
  • Static pages: Help, documentation, and information pages
  • Additional sound files

The staticContent must be configured in config.json ClientConfiguration, and the referenced files must be stored on the server as a static-content-<version>.zip. The mobile client downloads the new version on the next logout/login or refresh of the app.

There are two ways to build and upload the static-content zip and the staticContent part of config.json:

  • With insight-cli (recommended): the zip file and the version/css/logo/logoDarkMode settings are generated automatically from your files. You only maintain the plain files, insight-cli takes care of the rest.
  • Without insight-cli (manual): you build the zip yourself and increase staticContent.version in config.json by hand on every change.

Both ways are described below.

Recommendation

We recommend using insight-cli with insight upload client-config (or insight upload all). This automatically generates the zip file and the version. All you need to do is save the plain files and config.json, insight-cli will take care of the rest.

config.json

The settings for staticContent are defined in config.json.

version, css, logo and logoDarkMode are generated automatically by insight-cli and do not need to be maintained manually:

  • version is set to a checksum of the generated zip. It changes automatically whenever a file in static-content changes.
  • css is set to true if static-content/customize.css exists.
  • logo is set to true if static-content/logo.png exists.
  • logoDarkMode is set to true if static-content/logo-dark-mode.png exists.

You only need to maintain pages (see Pages) and any other, non-staticContent, part of config.json yourself.

All fields, including version, css, logo and logoDarkMode, must be maintained by hand. Every time a file in static-content changes, increase version and rebuild static-content-<version>.zip yourself.

Example config.json:

{
    "staticContent": {
        "version": "1.0",
        "logo": true,
        "logoDarkMode": true,
        "css": true,
        "pages": []
    }
}

Folder structure

Where to place the files?

  • Absolute URLs can be provided on every server.
  • Relative URLs must follow the following conventions:
    • They must be stored
      • next to the config.json in static-content
      • in client/config next to the config.json in static-content

insight-cli works with a flat project structure. You only maintain the plain files, insight upload client-config (or insight upload all) builds build/config.json and build/static-content-<checksum>.zip and uploads them:

.
├─ client-config/
│  └─ config.json
├─ static-content/
│  ├─ customize.css
│  ├─ logo.png
│  ├─ logo-dark-mode.png
│  ├─ my-sound.mp3
│  ├─ legal.html
│  └─ help.html
└─ build/                              # generated, do not edit by hand
   ├─ config.json
   └─ static-content-<checksum>.zip
      └─ static-content/
         ├─ customize.css
         ├─ logo.png
         ├─ logo-dark-mode.png
         ├─ my-sound.mp3
         ├─ legal.html
         └─ help.html

See Insight CLI for setup and upload details.

The plain files and the zip must be built and placed manually, either next to the <ui | index>.html:

.
├─ insight
|   └─ <mobile | web>
|       ├─ config.json
|       └─ static-content/
│           ├─ customize.css
│           ├─ logo.png
│           ├─ logo-dark-mode.png
│           ├─ my-sound.mp3
│           ├─ legal.html
│           └─ help.html
│       └─ static-content-1.zip
|           └─ static-content/
│               ├─ customize.css
│               ├─ logo.png
│               ├─ logo-dark-mode.png
│               ├─ legal.html
│               ├─ help.html
│               └─ my-sound.mp3

or in client/config next to the config.json:

.
├─ insight
|   └─ client
|       └─ config
|           ├─ config.json
|           └─ static-content/
│               ├─ customize.css
│               ├─ logo.png
│               ├─ logo-dark-mode.png
│               ├─ legal.html
│               └─ help.html
│           └─ static-content-1.zip
|               └─ static-content/
│                   ├─ customize.css
│                   ├─ logo.png
│                   ├─ logo-dark-mode.png
│                   ├─ legal.html
│                   ├─ help.html
│                   └─ my-sound.mp3

The Insight Client can be set to the customer's CI. It is possible to change colors and display a customer logo. Two files are required for this: logo.png and customize.css. For dark mode, it is possible to add a different logo with the name logo-dark-mode.png. The files are stored in the static-content directory. In addition, settings must be made in config.json (with insight-cli, this is generated automatically, see config.json above).

The customize.css is described here: customize

Examples follows below.

staticContent
version the client checks the version and only downloads the static content if the number increases
css if true, the customize.css in static-content will be used
logo if true, the logo in static-content will be used
logoDarkMode if true, an other logo for dark mode in static-content will be used

Pages

The HTML pages can be integrated into a navigation module or displayed via a menu. In addition, pages can be shown on the login screen. The URL to the page can be relative or absolute. Absolute URL's can only be used online. Relative URL's can be used online and offline if a download package is available.

Page in navigation module with order:

{
    "staticContent": {
        "pages": [
            {
                "name": "legal",
                "title": "Legal",
                "icon": "icon-fire",
                "url": "static-content/legal.html",
                "module": "Infos",
                "order": 5
            }
        ]
    }
}

Hidden page with menu:

{
    "staticContent": {
        "pages": [
            {
                "name": "legal",
                "title": "Legal",
                "icon": "icon-fire",
                "url": "static-content/legal.html",
                "hidden": true
            }
        ]
    }
}

"menus": [
    {
        "label": "Legal",
        "icon": "icon-fire",
        "action": "staticContent",
        "actionValues": [
            {
                "name": "legal"
            }
        ]
    }
]

Show page on the login screen

{
    "staticContent": [
        {
            "name": "legal",
            "title": "Legal",
            "icon": "icon-fire",
            "url": "static-content/legal.html",
            "loginPage": true
        }
    ]
}

Sounds

Sound files can be played in validation functions.