The staticContent feature supports various functions:
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:
version/css/logo/logoDarkMode settings are generated automatically from your files. You only maintain the plain files, insight-cli takes care of the rest.staticContent.version in config.json by hand on every change.Both ways are described below.
???+ tip "Recommendation"
We recommend using [insight-cli](../configuration_setup/configuration_setup.md#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.
The settings for staticContent are defined in config.json.
=== "With insight-cli"
`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](#pages)) and any other, non-staticContent, part of config.json yourself.
=== "Without insight-cli"
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:
```json
{
"staticContent": {
"version": "1.0",
"logo": true,
"logoDarkMode": true,
"css": true,
"pages": []
}
}
```
Where to place the files?
client/config next to the config.json in static-content=== "With insight-cli"
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:
```{ .sh .no-copy }
.
├─ 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](../configuration_setup/configuration_setup.md#insight-cli) for setup and upload details.
=== "Without insight-cli"
The plain files and the zip must be built and placed manually, either next to the `<ui | index>.html`:
```{ .sh .no-copy }
.
├─ 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:
```{ .sh .no-copy }
.
├─ 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 |
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.
{
"staticContent": {
"pages": [
{
"name": "legal",
"title": "Legal",
"icon": "icon-fire",
"url": "static-content/legal.html",
"module": "Infos",
"order": 5
}
]
}
}
{
"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"
}
]
}
]
{
"staticContent": [
{
"name": "legal",
"title": "Legal",
"icon": "icon-fire",
"url": "static-content/legal.html",
"loginPage": true
}
]
}
Sound files can be played in validation functions.