This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/global/Global.html
Properties that can be set for the whole application.
Article Content
- AppIcon
- App State
- Transition
- Styles
- Messages
- KPI Styles
- ColumnStyles
- Element Properties
- Server Side Filtering
AppIcon
Set a Base64 App Icon which is displayed in the App Viewer.
| Property | Type | Description | Example Value |
| appIcon | object | Used to set the property of the app icon. | "appIcon": { "imageSource": "data:image/svg+xml; base64,PD94bWwgdmV", "backgroundColor": "#ffffff" } |
| appIcon. backgroundColor | string | Used to set the backgroundColor of the icon | "#ffffff" |
| appIcon. imageSource | string | Used to set the base64 image source | "data:image/svg+xml;base64,PD94bWwgdmV" |
App State
| Property | Type | Description | Example Value |
| appState | object | Used to set properties of the App state. | "appState": { "resetSessionIdOnLoad": true || false } |
Transition
| Property | Type | Description | Example Value |
| transition. duration | number | Used to set the duration time in seconds | "duration": "0.5" |
| transition. properties | array | Used to set the duration type | "properties": [ { "property": "opacity" // or "all" } ] |
Styles
Global Properties
| Property | Type | Description | Example Value |
| styles | object | Used to define global styles | { "backgroundColor": "white", "chartColors": [ "#35CC62", "#0ECCCC" ], "color": "yellow" } |
| styles. backgroundColor | string | Used as the background color in the layout and elements | "#35cc62" |
| styles.chartColors[] | string | List of colors used in the chart visualizations | ["#35CC62", "#0ECCCC"] |
| styles.color | string | E.g. used for font color | "yellow" |
Messages
The global Messages configuration can be used to configure execution notification messages for the whole app. Message configurations on a more granular level, for example on the Execute-Button overwrite the global configuration for that button. The following two properties allow to auto-hide messages after a specified time or to disable the message all together, hiding it from the user.
| Property | Type | Description |
| messages. hideAfterSeconds | number | Used to auto hide execution notification messages. By default the message will not be hidden and has to be closed by the user. Setting this value to 4 on the other hand, auto-hides the message after 4 seconds. |
| messages. disabled | boolean | Disables the message all together, hiding it from the user. Defaults to false. |
KPI Styles
| Property | Type | Description | Example Value |
| styles.chart | object | Used to apply styles to the KPI element | "styles": { "chart": {} } |
| styles. chart.title | object | Used to apply styles to the title of the KPI | "chart": { "title": { "color": "blue", "fontSize": "24px", "fontFamily": "Helvetica", "fontWeight": "bold" } } |
| styles. chart.subtitle | object | Used to apply styles to the subtitle, unit and footer of the KPI | "chart": { "subTitle": { "color": "blue", "fontSize": "24px", "fontFamily": "Helvetica", "fontWeight": "bold" } } |
| styles.chart .xAxis.labels | object | Used to apply styles to the label of the KPI | "chart": { "xAxis": { "labels": { "color": "blue", "fontSize": "24px", "fontFamily": "Helvetica", "fontWeight": "bold" } } } |
| styles.kpi | object | Specific KPI styles object to enable or disable the "text-shadow / glow effect" of your KPI values The default is set to "true" and the default shadow color is "white" | "kpi": { "textShadow": { "enabled": true, "color": "white" } } |
ColumnStyles
Global Properties
| Property | Type | Description | Example Value | ||||||||||||||||||||||||||||||||||||
| columnStyles | array | Used to define global column styles | "columnStyles": [ { "name": "int", "unit": "EUR", "format": "0,0.00", "chart": { "format": "", "color": "green" }, "table": { "format": "", "background": "red", "font": { "fontFamily": "", "color": "black", "fontWeight": "bold" } } } ] | ||||||||||||||||||||||||||||||||||||
| columnStyles .name | string | Used to select a column in the table | "name": "int" | ||||||||||||||||||||||||||||||||||||
| columnStyles .unit | string | Used to set a unit to the values ('$', '€' or something like 'EUR') | "unit": "EUR" | ||||||||||||||||||||||||||||||||||||
| columnStyles .format | string | Used to change the format of the column values A full list of possible formats for Date and Times can be found at: https://momentjs.com/docs/#/displaying/ Format for Numbers and Currency ar listed at: http://numeraljs.com/#format | "format": "0,0.00" Numbers:
Currency:
Time:
Date:
| ||||||||||||||||||||||||||||||||||||
| columnStyles .chart | object | If the column is displayed in a highchart you can use this to change the color and the format of the chart | "chart": { "format": "", "color": "green" } | ||||||||||||||||||||||||||||||||||||
| columnStyles .table | object | Used to add an individual styling and format to the selected column/s | "table": { "format": "", "background": "red", "font": { "fontFamily": "Arial", "color": "black", "fontWeight": "bold" } } | ||||||||||||||||||||||||||||||||||||
| columnStyles .kpi | object | If the column is displayed in a kpi you can use this to change the format of the KPIvalues | "kpi": { "name": "int", "format": "" } | ||||||||||||||||||||||||||||||||||||
| columnStyles .datePicker | object | Used to format the placeholder and selected date in a datepicker. The default format is "DD-MM-YYYY" | "datepicker": { "placeholder": { "format": "YYYY-MM" }, "selectedDate": { "formate": "YYYY-MM-DD" } } |
Element Properties
Style properties specific to certain elements. Will be applied to all elements of said type.
| Property | Type | Description |
| sytles.html | object | Contains html element type and its corresponding css style properties |
Example:
| Property | Type | Description |
| styles.chart | object | Contains chart element type and its corresponding css style properties |
Example:
| Property | Type | Description |
| styles.table | object | Contains table element type and its corresponding css style properties |
Example:
| Property | Type | Description |
| styles.*.font | object | Used to add custom font styling css properties to an element. |
Only do this if really needed! → ( https://alistapart.com/article/web-typography-tables/ )
Example:
Server Side Filtering
Server Side Filtering can be used to avoid limitations of the client side (hence the name) Sync Set algorithm that is subject to limitations caused by its reliance of distinct values provided by the server. As server side filtering may in turn have problems with complex sync set structures, it needs to be actively enabled. In addition to enabling it via the following flag in the config, all datasources in the app need to be stored in PostgreSQL.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article