Properties that can be set for the whole application.


Article Content

  1. AppIcon
  2. App State
  3. Transition
  4. Styles
  5. Messages
  6. KPI Styles
  7. ColumnStyles
  8. Element Properties
  9. 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

PropertyTypeDescriptionExample Value
columnStylesarrayUsed 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:

Number
Format
Formatted String
10000
'0,0.0000'
10,000.0000
0.12'0%'12%

Currency:
Number
Format
Formatted String
1000.234
'$0,0.00'
$1,000.23
1000.234
'0,0.00$'
1,000.23 $

Time:
Number
Format
Formatted String
25
'00:00:00'
0:00:25
238
'00:00:00'
0:03:58

Date:
Number
Format
Fromatted String
1970-01-01
YYYY/MM
1970/01
1970-01-01
MM-DD
01-01


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:

  "h1": {
    "color": "red",
    "fontFamily": "Arial",
    "fontWeight": "bold"
  },
  "h2": {
    "color": "green"
  },
  "h3": {
    "color": "yellow"
  },
  "p": {
    "color": "red"
  }



Property
Type
Description
styles.chart
object
Contains chart element type and its corresponding css style properties


Example:

  "chart": {
    "title": {
      "fontSize": "30px",
      "color": "yellow"
    },
    "subTitle": {
      "fontSize": "30px",
      "color": "yellow"
    },
    "yAxis": {
      "title": {
        "color": "red",
        "fontSize": "26px",
        "fontWeight": "bold",
        "fontFamily": "Helvetica"
      },
      "labels": {
        "color": "blue",
        "fontSize": "24px"
      }
    },
    "xAxis": {
      "title": {
        "color": "red",
        "fontSize": "20px",
        "fontWeight": "bold",
        "fontFamily": "Arial"
      },
      "labels": {
        "color": "green",
        "fontSize": "24px"
      }
    },
    "legend": {
      "color": "green",
      "fontFamily": "sans-serif"
    },
    "dataLabels": {
      "color": "red",
      "fontSize": "14px"
    }
  }



Property
Type
Description
styles.table
object
Contains table element type and its corresponding css style properties


Example:

  "table": {
    "title": {
      "font": {
        "color": "red",
        "fontFamily": "onedata-sans",
        "fontSize": "12px",
        "fontWeight": "bold"
      }
    },
    "subTitle": {
      "font": {
        "color": "red",
        "fontFamily": "onedata-sans",
        "fontSize": "12px",
        "fontWeight": "bold"
      }
    },
    "header": {
      "backgroundColor": "black",
      "font": {
        "color": "yellow",
        "fontFamily": "onedata-sans",
        "fontSize": "12px",
        "fontWeight": "bold"
      }
    },
    "cell": {
      "backgroundColor": "gray",
      "font": {
        "color": "blue",
        "fontFamily": "Helvetica",
        "fontSize": "14px",
        "fontWeight": "bold"
      }
    },
    "dataTypes": {
      "int": {
        "format": "",
        "background": "green",
        "font": {
          "fontFamily": "Arial",
          "color": "black",
          "fontWeight": "bold",
          "fontSize": "22px"
        }
      },
      "double": {
        "format": "",
        "background": "red",
        "font": {
          "fontFamily": "Arial",
          "color": "black",
          "fontWeight": "bold",
          "fontSize": "24px"
        }
      }
    }
  }



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:

  "font": {
    "fontFamily": "Arial",
    "text-align": "left"
  }



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.


{
  "serverSideFiltering": {
    "enabled": true
  }
}