"
},
"navigation": [
{
"to": "",
"showLink": false,
"linkElement": false
}
]
},
{
"id": "html_linkFreshdeskIntro",
"type": "html",
"config": {
"html": "Let´s start with 'HTML' below.
"
}
},
{
"id": "htmlLink1Elements",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.htmlPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "htmlLink2Elements",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.kpiPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "htmlLink3Elements",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "htmlLink4Elements",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleHighcharts",
"type": "html",
"config": {
"html": "Elements: Highcharts
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an 'element' which is part of the currently shown Layout.
There are 3 'schema' options within Apps:
- Data as 'list'
- Data as 'string'
- Data as 'table'
Depending on the data source type, not all schema - options can be used.
You can also use a specific 'datasource' which is able to convert:
- tables to lists or strings
- from lists to strings
"
}
},
{
"id": "htmlLink1Highcharts",
"type": "html",
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.barPage",
"label": "Area Chart"
}
],
"config": {
"html": "Area Chart
Get more insights on Area Charts.
"
}
},
{
"id": "htmlLink2Highcharts",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.barPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "htmlLink3Highcharts",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.linePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "htmlLink4Highcharts",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.piePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "explanationTaskBar",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create
"
}
},
{
"id": "resultPictureTaskBar",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": "Check JSON to learn about Bar Chart Properties"
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "cases"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationTaskBar",
"type": "html",
"config": {
"html": "Let's create a Bar Chart for 'My first App'. The Bar Chart will show occurences for every variant. The data for your chart is given below
"
}
},
{
"id": "tableTaskBar",
"type": "table",
"source": "chartTaskBar",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "nextLinkTaskLayout",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.pagesPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskPages",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.navigationPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskNavigation",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskHtml",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.kpiPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskKpi",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskTables",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskBar",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.linePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskLine",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.piePage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskPie",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "nextLinkTaskDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "optionalTextTaskBar",
"type": "html",
"config": {
"html": "Now let's try to create such a bar chart. Here is a template to start with.'Navigate to element definition' below to start with the task!
"
}
},
{
"id": "welcomeTitle",
"type": "html",
"config": {
"html": "Hello World!
"
}
},
{
"id": "titleModuleHtml",
"type": "html",
"config": {
"html": "Elements: HTML
"
}
},
{
"id": "titleTaskHtml",
"type": "html",
"config": {
"html": "Task: Create your HTML title
"
}
},
{
"id": "explanationModuleHtml",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "explanationTaskHtml",
"type": "html",
"config": {
"html": "Below you can see a sample HTML element. Change the text of it to: My first App
If you would like another challenge, make the HTML element link to your next module by linking to 'introPage.elementsPage.kpiPage'
"
}
},
{
"id": "chartModuleHtml",
"type": "html",
"config": {
"html": "Right Click on this text and choose 'Navigate to element definition'
"
},
"navigation": [
{
"to": "",
"showLink": false,
"linkElement": false
}
]
},
{
"id": "titleApp",
"type": "html",
"config": {
"html": "Change Me
"
}
},
{
"id": "optionalTextModuleHtml",
"type": "html",
"config": {
"html": "To learn more about HTML check our documentation
"
}
},
{
"id": "optionalTextTaskHtml",
"type": "html",
"config": {
"html": "The HTML element is used to display any HTML you can think of. There is no additional processing done on the given HTML source
"
}
},
{
"id": "titleModuleKpi",
"type": "html",
"config": {
"html": "Elements: KPI
"
}
},
{
"id": "explanationModuleKpi",
"type": "html",
"config": {
"html": "Using elements with property 'type:KPI' you can create an element like you see below. 'Use the right button click' on the 'Population KPI' below and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "dataExplanationModuleKpi",
"type": "html",
"config": {
"html": "Here you can find the data behind the KPI. Its not necessary to use all 3 columns, if you need to show only the value you can use one column as well.
"
}
},
{
"id": "tableModuleKpi",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleKpi",
"type": "html",
"config": {
"html": "To learn more about KPI check our documentation
"
}
},
{
"id": "titleTaskKpi",
"type": "html",
"config": {
"html": "Task: create first KPI
"
}
},
{
"id": "explanationTaskKpi",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create
"
}
},
{
"id": "kpiApp",
"type": "kpi",
"source": "chartTaskKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "My test KPI",
"subTitle": "This is a test",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {
"column": "kpi_unit"
},
"value": {
"column": "kpi_value"
}
}
},
{
"id": "dataExplanationTaskKpi",
"type": "html",
"config": {
"html": "Let's create a KPI for 'My first App'.
The KPI data is given below
"
}
},
{
"id": "optionalTextTaskKpi",
"type": "html",
"config": {
"html": "Now let's create such a KPI. Below is a template to start with. 'Navigate to element definition' to start with the task!
"
}
},
{
"id": "tableTaskKpi",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "chartModuleKpi",
"type": "kpi",
"source": "chartModuleKpi",
"sourceOptions": {
"sql": ""
},
"styles": {},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "horizontal"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
}
},
{
"id": "titleModuleBar",
"type": "html",
"config": {
"html": "Highcharts Elements: Bar Charts
"
}
},
{
"id": "explanationModuleBar",
"type": "html",
"config": {
"html": "Using elements with property 'type: column' and 'type: bar' you can create an element like you see below. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties"
}
},
{
"id": "chartModuleBar",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "column"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo"
},
{
"name": "London"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModuleBar",
"type": "html",
"config": {
"html": "Below you can find the data behind the chart. The first column of the data set should countain 'title' values, other columns represent the data you want to display.
"
}
},
{
"id": "goodJobElement",
"type": "html",
"config": {
"html": "Done with the Exercise?
Good job!
"
}
},
{
"id": "tableModuleBar",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": [
{
"name": "Tokyo"
},
{
"name": "London"
}
]
}
},
{
"id": "optionalTextModuleBar",
"type": "html",
"config": {
"html": "To learn more about Highcharts check our documentation
"
}
},
{
"id": "titleHome",
"type": "html",
"config": {
"html": "Home page
"
}
},
{
"id": "barApp",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Create your Bar Chart here"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "column"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "titleModulePie",
"type": "html",
"config": {
"html": "Highcharts Elements: Pie Charts
"
}
},
{
"id": "explanationModulePie",
"type": "html",
"config": {
"html": "Using elements with property 'type:highcharts' and the chart 'type:pie' you can create a chart like you see below. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "chartModulePie",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Pie Chart"
},
"subtitle": {
"text": "Check JSON to learn about Pie Chart Properties"
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModulePie",
"type": "html",
"config": {
"html": "Here you can find the data behind the pie chart. If you need to show another city you can use the property 'name:' in 'series' to change it."
}
},
{
"id": "tableModulePie",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModulePie",
"type": "html",
"config": {
"html": "To learn more about highchart elments check our documentation.
"
}
},
{
"id": "taskLinkModulePie",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.piePage.pieTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskPie",
"type": "html",
"config": {
"html": "Highcharts Elements: Pie Charts
"
}
},
{
"id": "dataExplanationTaskPie",
"type": "html",
"config": {
"html": "Let's create a Pie Chart for 'My first App'. The Pie Chart will show occurences for every variant.
The data for your chart is given below.
"
}
},
{
"id": "tableTaskPie",
"type": "table",
"source": "chartTaskPie",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskPie",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create:
"
}
},
{
"id": "resultPictureTaskPie",
"type": "highcharts",
"source": "chartTaskPie",
"config": {
"title": {
"text": "Pie Chart"
},
"subtitle": {
"text": "Check JSON to learn about Pie Chart Properties"
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "cases"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "optionalTextTaskPie",
"type": "html",
"config": {
"html": "Now let's try to create such a pie chart. Here is a template to start with.'Navigate to element definition' below to start with the task!
"
}
},
{
"id": "pieApp",
"type": "highcharts",
"source": "chartTaskPie",
"config": {
"title": {
"text": "Create your Pie Chart here"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "titleModuleLine",
"type": "html",
"config": {
"html": "Highcharts Elements: Line Charts
"
}
},
{
"id": "explanationModuleLine",
"type": "html",
"config": {
"html": "Using elements with property 'type:highcharts' and the chart 'type:line' you can create a chart like you see below. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "chartModuleLine",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Line Chart"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "line"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo",
"turboThreshold": 0
},
{
"name": "New York",
"turboThreshold": 0
},
{
"name": "Berlin",
"turboThreshold": 0
},
{
"name": "London",
"turboThreshold": 0
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModuleLine",
"type": "html",
"config": {
"html": "Here you can find the data behind the line chart. Its not necessary to have all 4 lines, if you need to show only Tokyo you can use one series.
"
}
},
{
"id": "tableModuleLine",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleLine",
"type": "html",
"config": {
"html": "To learn more about highchart elments check our documentation.
"
}
},
{
"id": "taskLinkModuleLine",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.linePage.lineTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskLine",
"type": "html",
"config": {
"html": "Highcharts Elements: Line Charts
"
}
},
{
"id": "dataExplanationTaskLine",
"type": "html",
"config": {
"html": "Let's create a Line Chart for 'My first App'. The Line Chart will show occurences for every variant. The data for your chart is given below.
"
}
},
{
"id": "tableTaskLine",
"type": "table",
"source": "chartTaskBar",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskLine",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create:
"
}
},
{
"id": "resultPictureTaskLine",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Line Chart"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "line"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "cases"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "optionalTextTaskLine",
"type": "html",
"config": {
"html": "Now let's try to create such a line chart. Here is a template to start with.
'Navigate to element definition' below to start with the task!
"
}
},
{
"id": "lineApp",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Create your Line Chart here"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "spline"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "taskLinkModuleHtml",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.htmlPage.htmltaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleKpi",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.kpiPage.kpiTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "resultPictureTaskKpi",
"type": "kpi",
"source": "chartTaskKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Overall KPIs",
"subTitle": "",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {
"column": "kpi_unit"
},
"value": {
"column": "kpi_value"
}
}
},
{
"id": "taskLinkModuleBar",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.barPage.barTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModulePages",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.pagesPage.pagesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleNavigation",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.navigationPage.navigationTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleLayouts",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.layoutsPage.layoutsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titlePages",
"type": "html",
"config": {
"html": "Pages
"
}
},
{
"id": "explanationPages",
"type": "html",
"config": {
"html": "Pages allow you to add multiple APP pages, just as you know it from any web page, allowing you to create a deeper structure. Every page can have its own layout and content. You can also introduce a hierarchy to your pages, which is closely related to the navigation of your APP. In the case of this training, the page hierarchy is structured as 'introduction -> module -> exercise'.
To create a 'pages' object, as child of the overall JSON code of your APP, you need to know some important parameters.
Just 'right-click' on this text and 'Navigate to layout definiton'.
Comments in the code will give you more details
In order to establish a hierarchy between pages, you can also add a 'children' array to the page object. In this array, you can define page objects just the way you learned it from the description given above.
Note: You can also add conditions, which allow for different layout choices depending on the conditions you define – but this will not be covered in this training.
"
}
},
{
"id": "imageStructurePages",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicPages",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModulePages",
"type": "html",
"config": {
"html": "To learn more about Pages check our documentation.
"
}
},
{
"id": "titleTaskPages",
"type": "html",
"config": {
"html": "Task: Create a new Page
"
}
},
{
"id": "explanationTaskPages",
"type": "html",
"config": {
"html": "Try to understand the logic behind it. And follow the instructions to add 'My first App'.
"
}
},
{
"id": "stepbystepTaskPages",
"type": "html",
"config": {
"html": "1. Go to Pages via IDE (press the 'pages' button to the far left in the structure of your APP, then click 'introPage')
2. Follow the instructions in the code editor to change the configuration options
3. Click on 'placeholder' in the IDE
4. Follow the instructions in the code editor"
}
},
{
"id": "titleNavigation",
"type": "html",
"config": {
"html": "Navigation
"
}
},
{
"id": "explanationNavigation",
"type": "html",
"config": {
"html": "To setup an overview of your previously created pages, you will now learn how to work with 'Navigation'.
Within Apps, the Navigation is an integral part of the Sidebar.
You can setup your Page Navigation in two easy steps.
Step I - setup your Navigation layout 'config':
- decide if you would like to setup a Sidebar Navigation
- hide or show 'children' pages
- the Navigationbar can be shown permanently or accessible through an icon
Step II - you can now setup the content via 'entries':
- 'page': copy your Page ID to link your Page to the Nav Bar
- 'label': name the Page that you are jumping to
- 'children': setup your Page logic
Note: The Navigationpath is generally following the Syntax: 'pageId.childPageId.childChildPageId'
"
}
},
{
"id": "imageStructureNavigation",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicNavigation",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleNavigation",
"type": "html",
"config": {
"html": "To learn more about Navigation check our documentation.
"
}
},
{
"id": "titleTaskNavigation",
"type": "html",
"config": {
"html": "Task: Extend the Navigation
"
}
},
{
"id": "explanationTaskNavigation",
"type": "html",
"config": {
"html": " Play with the configuration of the navigation section. Try to understand the logic behind it and follow the instructions to add 'My first App' to the navigation sidebar.
"
}
},
{
"id": "stepbystepTaskNavigation",
"type": "html",
"config": {
"html": "1. Go to Navigation via IDE
2. Follow the instructions in the code editor to create a new page in the navigation sidebar"
}
},
{
"id": "titleLayouts",
"type": "html",
"config": {
"html": "Layouts
"
}
},
{
"id": "explanationLayouts",
"type": "html",
"config": {
"html": "Layouts build the skeleton of your App and your envisioned visualizations. Layouts are defined by a grid of specified columns and rows, which you can build upon to. After setting up your 'layout', you should think about the Placement of the 'elements', like charts or HTML content, that you´d like to display in your final App.
Therefore, you need to place 'containers' in which you later on display your elements.
To build your own layout, we will now introduce you to the most important objects and parameters.
Just 'right-click' on this text and choose 'Navigate to layout definition', to see the values for the Layout of this page.
Comments in the code will give you more details.
"
}
},
{
"id": "imageLogicLayouts",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik"
}
},
{
"id": "optionalTextModuleLayouts",
"type": "html",
"config": {
"html": "To learn more about Layouts check our documentation.
"
}
},
{
"id": "titleTaskLayouts",
"type": "html",
"config": {
"html": "Task: Create a new Layout
"
}
},
{
"id": "explanationTaskLayouts",
"type": "html",
"config": {
"html": "Rearrange the containers below by 'right clicking' on them and 'Navigate to layout definition'.
Follow the comments in the editor.
"
}
},
{
"id": "imageTaskLayouts",
"type": "html",
"config": {
"html": "Hier ein Bild von der App mit Placements und Containern"
}
},
{
"id": "stepbystepTaskLayouts",
"type": "html",
"config": {
"html": "1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Datasources itself do not request any data, this only happens if they are actually used inside an 'element' which is part of the currently shown Layout.
There are 3 'schema' options within Apps:
- Data as 'list'
- Data as 'string'
- Data as 'table'
Depending on the data source type, not all schema - options can be used.
You can also use a specific 'datasource' which is able to convert:
- tables to lists or strings
- from lists to strings
Area Chart
Get more insights on Area Charts.
If you would like another challenge, make the HTML element link to your next module by linking to 'introPage.elementsPage.kpiPage'
Right Click on this text and choose 'Navigate to element definition'
The KPI data is given below
"
}
},
{
"id": "chartModuleBar",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "column"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo"
},
{
"name": "London"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModuleBar",
"type": "html",
"config": {
"html": "Below you can find the data behind the chart. The first column of the data set should countain 'title' values, other columns represent the data you want to display.
"
}
},
{
"id": "goodJobElement",
"type": "html",
"config": {
"html": "Done with the Exercise?
Good job!
"
}
},
{
"id": "tableModuleBar",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": [
{
"name": "Tokyo"
},
{
"name": "London"
}
]
}
},
{
"id": "optionalTextModuleBar",
"type": "html",
"config": {
"html": "To learn more about Highcharts check our documentation
"
}
},
{
"id": "titleHome",
"type": "html",
"config": {
"html": "Home page
"
}
},
{
"id": "barApp",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Create your Bar Chart here"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "column"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "titleModulePie",
"type": "html",
"config": {
"html": "Highcharts Elements: Pie Charts
"
}
},
{
"id": "explanationModulePie",
"type": "html",
"config": {
"html": "Using elements with property 'type:highcharts' and the chart 'type:pie' you can create a chart like you see below. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "chartModulePie",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Pie Chart"
},
"subtitle": {
"text": "Check JSON to learn about Pie Chart Properties"
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModulePie",
"type": "html",
"config": {
"html": "Here you can find the data behind the pie chart. If you need to show another city you can use the property 'name:' in 'series' to change it."
}
},
{
"id": "tableModulePie",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModulePie",
"type": "html",
"config": {
"html": "To learn more about highchart elments check our documentation.
"
}
},
{
"id": "taskLinkModulePie",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.piePage.pieTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskPie",
"type": "html",
"config": {
"html": "Highcharts Elements: Pie Charts
"
}
},
{
"id": "dataExplanationTaskPie",
"type": "html",
"config": {
"html": "Let's create a Pie Chart for 'My first App'. The Pie Chart will show occurences for every variant.
The data for your chart is given below.
"
}
},
{
"id": "tableTaskPie",
"type": "table",
"source": "chartTaskPie",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskPie",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create:
"
}
},
{
"id": "resultPictureTaskPie",
"type": "highcharts",
"source": "chartTaskPie",
"config": {
"title": {
"text": "Pie Chart"
},
"subtitle": {
"text": "Check JSON to learn about Pie Chart Properties"
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "cases"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "optionalTextTaskPie",
"type": "html",
"config": {
"html": "Now let's try to create such a pie chart. Here is a template to start with.'Navigate to element definition' below to start with the task!
"
}
},
{
"id": "pieApp",
"type": "highcharts",
"source": "chartTaskPie",
"config": {
"title": {
"text": "Create your Pie Chart here"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "pie"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "titleModuleLine",
"type": "html",
"config": {
"html": "Highcharts Elements: Line Charts
"
}
},
{
"id": "explanationModuleLine",
"type": "html",
"config": {
"html": "Using elements with property 'type:highcharts' and the chart 'type:line' you can create a chart like you see below. Use the 'right button click' and choose 'Navigate to element definition' to learn more about element properties.
"
}
},
{
"id": "chartModuleLine",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "Line Chart"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "line"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "Tokyo",
"turboThreshold": 0
},
{
"name": "New York",
"turboThreshold": 0
},
{
"name": "Berlin",
"turboThreshold": 0
},
{
"name": "London",
"turboThreshold": 0
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "dataExplanationModuleLine",
"type": "html",
"config": {
"html": "Here you can find the data behind the line chart. Its not necessary to have all 4 lines, if you need to show only Tokyo you can use one series.
"
}
},
{
"id": "tableModuleLine",
"type": "table",
"source": "raw_testSource",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleLine",
"type": "html",
"config": {
"html": "To learn more about highchart elments check our documentation.
"
}
},
{
"id": "taskLinkModuleLine",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.linePage.lineTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskLine",
"type": "html",
"config": {
"html": "Highcharts Elements: Line Charts
"
}
},
{
"id": "dataExplanationTaskLine",
"type": "html",
"config": {
"html": "Let's create a Line Chart for 'My first App'. The Line Chart will show occurences for every variant. The data for your chart is given below.
"
}
},
{
"id": "tableTaskLine",
"type": "table",
"source": "chartTaskBar",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {
"add": true,
"edit": true,
"delete": true
},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskLine",
"type": "html",
"config": {
"html": "Below you can see a picture of the chart which you should create:
"
}
},
{
"id": "resultPictureTaskLine",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Line Chart"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "line"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": "cases"
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "optionalTextTaskLine",
"type": "html",
"config": {
"html": "Now let's try to create such a line chart. Here is a template to start with.
'Navigate to element definition' below to start with the task!
"
}
},
{
"id": "lineApp",
"type": "highcharts",
"source": "chartTaskBar",
"config": {
"title": {
"text": "Create your Line Chart here"
},
"subtitle": {
"text": "Check JSON to learn about Line Chart Properties"
},
"chart": {
"type": "spline"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"name": ""
}
],
"yAxis": {
"title": {}
}
}
},
{
"id": "taskLinkModuleHtml",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.htmlPage.htmltaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleKpi",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.kpiPage.kpiTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "resultPictureTaskKpi",
"type": "kpi",
"source": "chartTaskKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Overall KPIs",
"subTitle": "",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {
"column": "kpi_unit"
},
"value": {
"column": "kpi_value"
}
}
},
{
"id": "taskLinkModuleBar",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.highchartsPage.barPage.barTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModulePages",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.pagesPage.pagesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleNavigation",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.navigationPage.navigationTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLinkModuleLayouts",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.layoutsPage.layoutsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titlePages",
"type": "html",
"config": {
"html": "Pages
"
}
},
{
"id": "explanationPages",
"type": "html",
"config": {
"html": "Pages allow you to add multiple APP pages, just as you know it from any web page, allowing you to create a deeper structure. Every page can have its own layout and content. You can also introduce a hierarchy to your pages, which is closely related to the navigation of your APP. In the case of this training, the page hierarchy is structured as 'introduction -> module -> exercise'.
To create a 'pages' object, as child of the overall JSON code of your APP, you need to know some important parameters.
Just 'right-click' on this text and 'Navigate to layout definiton'.
Comments in the code will give you more details
In order to establish a hierarchy between pages, you can also add a 'children' array to the page object. In this array, you can define page objects just the way you learned it from the description given above.
Note: You can also add conditions, which allow for different layout choices depending on the conditions you define – but this will not be covered in this training.
"
}
},
{
"id": "imageStructurePages",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicPages",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModulePages",
"type": "html",
"config": {
"html": "To learn more about Pages check our documentation.
"
}
},
{
"id": "titleTaskPages",
"type": "html",
"config": {
"html": "Task: Create a new Page
"
}
},
{
"id": "explanationTaskPages",
"type": "html",
"config": {
"html": "Try to understand the logic behind it. And follow the instructions to add 'My first App'.
"
}
},
{
"id": "stepbystepTaskPages",
"type": "html",
"config": {
"html": "1. Go to Pages via IDE (press the 'pages' button to the far left in the structure of your APP, then click 'introPage')
2. Follow the instructions in the code editor to change the configuration options
3. Click on 'placeholder' in the IDE
4. Follow the instructions in the code editor"
}
},
{
"id": "titleNavigation",
"type": "html",
"config": {
"html": "Navigation
"
}
},
{
"id": "explanationNavigation",
"type": "html",
"config": {
"html": "To setup an overview of your previously created pages, you will now learn how to work with 'Navigation'.
Within Apps, the Navigation is an integral part of the Sidebar.
You can setup your Page Navigation in two easy steps.
Step I - setup your Navigation layout 'config':
- decide if you would like to setup a Sidebar Navigation
- hide or show 'children' pages
- the Navigationbar can be shown permanently or accessible through an icon
Step II - you can now setup the content via 'entries':
- 'page': copy your Page ID to link your Page to the Nav Bar
- 'label': name the Page that you are jumping to
- 'children': setup your Page logic
Note: The Navigationpath is generally following the Syntax: 'pageId.childPageId.childChildPageId'
"
}
},
{
"id": "imageStructureNavigation",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicNavigation",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleNavigation",
"type": "html",
"config": {
"html": "To learn more about Navigation check our documentation.
"
}
},
{
"id": "titleTaskNavigation",
"type": "html",
"config": {
"html": "Task: Extend the Navigation
"
}
},
{
"id": "explanationTaskNavigation",
"type": "html",
"config": {
"html": " Play with the configuration of the navigation section. Try to understand the logic behind it and follow the instructions to add 'My first App' to the navigation sidebar.
"
}
},
{
"id": "stepbystepTaskNavigation",
"type": "html",
"config": {
"html": "1. Go to Navigation via IDE
2. Follow the instructions in the code editor to create a new page in the navigation sidebar"
}
},
{
"id": "titleLayouts",
"type": "html",
"config": {
"html": "Layouts
"
}
},
{
"id": "explanationLayouts",
"type": "html",
"config": {
"html": "Layouts build the skeleton of your App and your envisioned visualizations. Layouts are defined by a grid of specified columns and rows, which you can build upon to. After setting up your 'layout', you should think about the Placement of the 'elements', like charts or HTML content, that you´d like to display in your final App.
Therefore, you need to place 'containers' in which you later on display your elements.
To build your own layout, we will now introduce you to the most important objects and parameters.
Just 'right-click' on this text and choose 'Navigate to layout definition', to see the values for the Layout of this page.
Comments in the code will give you more details.
"
}
},
{
"id": "imageLogicLayouts",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik"
}
},
{
"id": "optionalTextModuleLayouts",
"type": "html",
"config": {
"html": "To learn more about Layouts check our documentation.
"
}
},
{
"id": "titleTaskLayouts",
"type": "html",
"config": {
"html": "Task: Create a new Layout
"
}
},
{
"id": "explanationTaskLayouts",
"type": "html",
"config": {
"html": "Rearrange the containers below by 'right clicking' on them and 'Navigate to layout definition'.
Follow the comments in the editor.
"
}
},
{
"id": "imageTaskLayouts",
"type": "html",
"config": {
"html": "Hier ein Bild von der App mit Placements und Containern"
}
},
{
"id": "stepbystepTaskLayouts",
"type": "html",
"config": {
"html": "1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Good job!
The data for your chart is given below.
'Navigate to element definition' below to start with the task!
To create a 'pages' object, as child of the overall JSON code of your APP, you need to know some important parameters.
Just 'right-click' on this text and 'Navigate to layout definiton'.
Comments in the code will give you more details
In order to establish a hierarchy between pages, you can also add a 'children' array to the page object. In this array, you can define page objects just the way you learned it from the description given above.
Note: You can also add conditions, which allow for different layout choices depending on the conditions you define – but this will not be covered in this training.
2. Follow the instructions in the code editor to change the configuration options
3. Click on 'placeholder' in the IDE
4. Follow the instructions in the code editor
"
}
},
{
"id": "titleNavigation",
"type": "html",
"config": {
"html": "Navigation
"
}
},
{
"id": "explanationNavigation",
"type": "html",
"config": {
"html": "To setup an overview of your previously created pages, you will now learn how to work with 'Navigation'.
Within Apps, the Navigation is an integral part of the Sidebar.
You can setup your Page Navigation in two easy steps.
Step I - setup your Navigation layout 'config':
- decide if you would like to setup a Sidebar Navigation
- hide or show 'children' pages
- the Navigationbar can be shown permanently or accessible through an icon
Step II - you can now setup the content via 'entries':
- 'page': copy your Page ID to link your Page to the Nav Bar
- 'label': name the Page that you are jumping to
- 'children': setup your Page logic
Note: The Navigationpath is generally following the Syntax: 'pageId.childPageId.childChildPageId'
"
}
},
{
"id": "imageStructureNavigation",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicNavigation",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleNavigation",
"type": "html",
"config": {
"html": "To learn more about Navigation check our documentation.
"
}
},
{
"id": "titleTaskNavigation",
"type": "html",
"config": {
"html": "Task: Extend the Navigation
"
}
},
{
"id": "explanationTaskNavigation",
"type": "html",
"config": {
"html": " Play with the configuration of the navigation section. Try to understand the logic behind it and follow the instructions to add 'My first App' to the navigation sidebar.
"
}
},
{
"id": "stepbystepTaskNavigation",
"type": "html",
"config": {
"html": "1. Go to Navigation via IDE
2. Follow the instructions in the code editor to create a new page in the navigation sidebar"
}
},
{
"id": "titleLayouts",
"type": "html",
"config": {
"html": "Layouts
"
}
},
{
"id": "explanationLayouts",
"type": "html",
"config": {
"html": "Layouts build the skeleton of your App and your envisioned visualizations. Layouts are defined by a grid of specified columns and rows, which you can build upon to. After setting up your 'layout', you should think about the Placement of the 'elements', like charts or HTML content, that you´d like to display in your final App.
Therefore, you need to place 'containers' in which you later on display your elements.
To build your own layout, we will now introduce you to the most important objects and parameters.
Just 'right-click' on this text and choose 'Navigate to layout definition', to see the values for the Layout of this page.
Comments in the code will give you more details.
"
}
},
{
"id": "imageLogicLayouts",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik"
}
},
{
"id": "optionalTextModuleLayouts",
"type": "html",
"config": {
"html": "To learn more about Layouts check our documentation.
"
}
},
{
"id": "titleTaskLayouts",
"type": "html",
"config": {
"html": "Task: Create a new Layout
"
}
},
{
"id": "explanationTaskLayouts",
"type": "html",
"config": {
"html": "Rearrange the containers below by 'right clicking' on them and 'Navigate to layout definition'.
Follow the comments in the editor.
"
}
},
{
"id": "imageTaskLayouts",
"type": "html",
"config": {
"html": "Hier ein Bild von der App mit Placements und Containern"
}
},
{
"id": "stepbystepTaskLayouts",
"type": "html",
"config": {
"html": "1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Within Apps, the Navigation is an integral part of the Sidebar.
You can setup your Page Navigation in two easy steps.
Step I - setup your Navigation layout 'config':
- decide if you would like to setup a Sidebar Navigation
- hide or show 'children' pages
- the Navigationbar can be shown permanently or accessible through an icon
Step II - you can now setup the content via 'entries':
- 'page': copy your Page ID to link your Page to the Nav Bar
- 'label': name the Page that you are jumping to
- 'children': setup your Page logic
Note: The Navigationpath is generally following the Syntax: 'pageId.childPageId.childChildPageId'
2. Follow the instructions in the code editor to create a new page in the navigation sidebar
"
}
},
{
"id": "titleLayouts",
"type": "html",
"config": {
"html": "Layouts
"
}
},
{
"id": "explanationLayouts",
"type": "html",
"config": {
"html": "Layouts build the skeleton of your App and your envisioned visualizations. Layouts are defined by a grid of specified columns and rows, which you can build upon to. After setting up your 'layout', you should think about the Placement of the 'elements', like charts or HTML content, that you´d like to display in your final App.
Therefore, you need to place 'containers' in which you later on display your elements.
To build your own layout, we will now introduce you to the most important objects and parameters.
Just 'right-click' on this text and choose 'Navigate to layout definition', to see the values for the Layout of this page.
Comments in the code will give you more details.
"
}
},
{
"id": "imageLogicLayouts",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik"
}
},
{
"id": "optionalTextModuleLayouts",
"type": "html",
"config": {
"html": "To learn more about Layouts check our documentation.
"
}
},
{
"id": "titleTaskLayouts",
"type": "html",
"config": {
"html": "Task: Create a new Layout
"
}
},
{
"id": "explanationTaskLayouts",
"type": "html",
"config": {
"html": "Rearrange the containers below by 'right clicking' on them and 'Navigate to layout definition'.
Follow the comments in the editor.
"
}
},
{
"id": "imageTaskLayouts",
"type": "html",
"config": {
"html": "Hier ein Bild von der App mit Placements und Containern"
}
},
{
"id": "stepbystepTaskLayouts",
"type": "html",
"config": {
"html": "1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Therefore, you need to place 'containers' in which you later on display your elements.
To build your own layout, we will now introduce you to the most important objects and parameters.
Just 'right-click' on this text and choose 'Navigate to layout definition', to see the values for the Layout of this page.
Comments in the code will give you more details.
"
}
},
{
"id": "optionalTextModuleLayouts",
"type": "html",
"config": {
"html": "To learn more about Layouts check our documentation.
"
}
},
{
"id": "titleTaskLayouts",
"type": "html",
"config": {
"html": "Task: Create a new Layout
"
}
},
{
"id": "explanationTaskLayouts",
"type": "html",
"config": {
"html": "Rearrange the containers below by 'right clicking' on them and 'Navigate to layout definition'.
Follow the comments in the editor.
"
}
},
{
"id": "imageTaskLayouts",
"type": "html",
"config": {
"html": "Hier ein Bild von der App mit Placements und Containern"
}
},
{
"id": "stepbystepTaskLayouts",
"type": "html",
"config": {
"html": "1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
"
}
},
{
"id": "explanationDatasources",
"type": "html",
"config": {
"html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Follow the comments in the editor.
1. Lege in der IDE ein neues Layout an
2. Kopiere ein vorhandenes Layout (zB 'introSmallScreenLayout')
3. ändere die id auf 'appSmallScreenLayout'
4. Füge so viele Container hinzu wie nötig
5. Füge entsprechend der Anzahl der hinzugefügten Containern Placements hinzu
6. Am Ende solltest Du 8 Container und 8 Placements haben
7. Folgende elementIds sollten in Deinen Placements den Containern zugeordnet werden: 'titleApp', 'filter1App', 'filter2App', 'kpiApp', 'barApp', 'pieApp', 'lineApp', 'tableApp',
"
}
},
{
"id": "titleDatasources",
"type": "html",
"config": {
"html": "Datasources
" } }, { "id": "explanationDatasources", "type": "html", "config": { "html": "Datasources define the data which you would like to be visualized by the before mentioned elements.
Datasources itself do not request any data, this only happens if they are actually used inside an ('element') which is part of the currently shown Layout.
There are 3('schema') options within Apps:
- data as table
- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
"
}
},
{
"id": "imageStructureDatasources",
"type": "html",
"config": {
"html": "Bild von der Struktur
"
}
},
{
"id": "imageLogicDatasources",
"type": "html",
"config": {
"html": "Bild von der dahinterliegenden Logik
"
}
},
{
"id": "optionalTextModuleDatasources",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation.
"
}
},
{
"id": "titleModuleFRTDatasource",
"type": "html",
"config": {
"html": "Datasources: FRT
"
}
},
{
"id": "explanationModuleFRTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleFRTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleFRTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRESTDatasource",
"type": "html",
"config": {
"html": "Datasources: REST
"
}
},
{
"id": "explanationModuleRESTDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRESTDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRESTDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleRAWDatasource",
"type": "html",
"config": {
"html": "Datasources: RAW
"
}
},
{
"id": "explanationModuleRAWDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleRAWDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleRAWDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Datasources: Datasource
"
}
},
{
"id": "explanationModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDatasourceDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Datasources: DATASET
"
}
},
{
"id": "explanationModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
"
}
},
{
"id": "chartModuleDATASETDatasource",
"type": "html",
"config": {
"html": "Bild
"
}
},
{
"id": "optionalTextModuleDATASETDatasource",
"type": "html",
"config": {
"html": "To learn more about Datasources check our documentation
"
}
},
{
"id": "titleTaskDatasources",
"type": "html",
"config": {
"html": "Task: Create a new Datasource
"
}
},
{
"id": "explanationTaskDatasources",
"type": "html",
"config": {
"html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
"
}
},
{
"id": "stepbystepTaskDatasources",
"type": "html",
"config": {
"html": "- data as list (ideal for filling drop-downs)
- data as string (use e.g. for KPIs)
Depending on the data source type not all ('schema') options can be used.
You can also use a specific datasource which is able to convert: - tables to lists or strings
- from lists to strings
Bild von der Struktur
" } }, { "id": "imageLogicDatasources", "type": "html", "config": { "html": "Bild von der dahinterliegenden Logik
" } }, { "id": "optionalTextModuleDatasources", "type": "html", "config": { "html": "To learn more about Datasources check our documentation.
" } }, { "id": "titleModuleFRTDatasource", "type": "html", "config": { "html": "Datasources: FRT
" } }, { "id": "explanationModuleFRTDatasource", "type": "html", "config": { "html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
" } }, { "id": "chartModuleFRTDatasource", "type": "html", "config": { "html": "" } }, { "id": "optionalTextModuleFRTDatasource", "type": "html", "config": { "html": "Bild
To learn more about Datasources check our documentation
" } }, { "id": "titleModuleRESTDatasource", "type": "html", "config": { "html": "Datasources: REST
" } }, { "id": "explanationModuleRESTDatasource", "type": "html", "config": { "html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
" } }, { "id": "chartModuleRESTDatasource", "type": "html", "config": { "html": "" } }, { "id": "optionalTextModuleRESTDatasource", "type": "html", "config": { "html": "Bild
To learn more about Datasources check our documentation
" } }, { "id": "titleModuleRAWDatasource", "type": "html", "config": { "html": "Datasources: RAW
" } }, { "id": "explanationModuleRAWDatasource", "type": "html", "config": { "html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
" } }, { "id": "chartModuleRAWDatasource", "type": "html", "config": { "html": "" } }, { "id": "optionalTextModuleRAWDatasource", "type": "html", "config": { "html": "Bild
To learn more about Datasources check our documentation
" } }, { "id": "titleModuleDatasourceDatasource", "type": "html", "config": { "html": "Datasources: Datasource
" } }, { "id": "explanationModuleDatasourceDatasource", "type": "html", "config": { "html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
" } }, { "id": "chartModuleDatasourceDatasource", "type": "html", "config": { "html": "" } }, { "id": "optionalTextModuleDatasourceDatasource", "type": "html", "config": { "html": "Bild
To learn more about Datasources check our documentation
" } }, { "id": "titleModuleDATASETDatasource", "type": "html", "config": { "html": "Datasources: DATASET
" } }, { "id": "explanationModuleDATASETDatasource", "type": "html", "config": { "html": "Using elements with property 'type:html' you can create titles, add pictures to your app and use all the elements provided by HTML markup language. Use the right button click and choose 'Navigate to the element' and learn more about element properties
" } }, { "id": "chartModuleDATASETDatasource", "type": "html", "config": { "html": "" } }, { "id": "optionalTextModuleDATASETDatasource", "type": "html", "config": { "html": "Bild
To learn more about Datasources check our documentation
" } }, { "id": "titleTaskDatasources", "type": "html", "config": { "html": "Task: Create a new Datasource
" } }, { "id": "explanationTaskDatasources", "type": "html", "config": { "html": "As you can see, Datasources are the meat on the bone for your first App. Without Datasources, there is no actual Value for the Viewer. We will now focus on 'dataset' for our schema.
You can see an empty table element, as there is no data associated to it. But we have a pre-created 'dataset' for you to use.
The datset ID is:
'dfe26ec0-7641-4ac3-ba72-060c06682b21'
Your task is now to make this data visible in the table element.
Use 'right-click' on the table and 'Navigate to datasource definition'. Alter it so that the data with the ID above is used.
Use 'right-click on the table and 'Navigate to element definition'. Make it use the datasource you've just created.
1. Go to Datasources via IDE
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
"
}
},
{
"id": "taskLinkModuleDatasources",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.datasourcesPage.datasourcesTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleSyncsets",
"type": "html",
"config": {
"html": "Syncsets
"
}
},
{
"id": "explanationSyncsets",
"type": "html",
"config": {
"html": "SyncSets are a powerful tool to give your APP more interactivity by linking elements together. Doing so, the selection or click of a part of an element can change the view of another element. Try it out by clicking on X in the preview!
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively."
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
2. Open the Datasources 'raw_testSource' and 'chartModuleBar'
3. Follow the instructions in the code editor
Setting up a SyncSet is done in two major steps:
Step 1
Create a 'SyncSet' entry in your first App and add a unique 'id' to this. Next, add the 'sources', which represent the datasources you'd like to sync. After doing so, in the 'joins' array you have to define the two columns (one for each dataset), which are to be joined. Last but not least, a so-called 'SyncMap' needs to be created, which specifies the direction of the sync happening. You can make it one- or two-directional.
Step 2
Add the respective 'SyncSet' to your element. To do so, add the 'syncSets' array to your element, which references with the first object the SyncSet via 'syncSetId', and the second object (which is an element of its own!) as respectively synced element. Keep in mind that this second element needs to contain the SyncSet reference as well. To both SyncSet references, you can set the parameters 'applyFilters' (if filters from other elements are to be applied) and 'publishFilters' (if other elements should be notified about filter changes) to 'true' or 'false' respectively.
"
}
},
{
"id": "filter1Syncsets",
"type": "filter",
"source": "chartModuleKpi",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "kpi_name",
"columnType": "STRING",
"label": "Filter City"
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2Syncsets",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "kpiSyncsets",
"type": "kpi",
"source": "chartModuleKpi",
"styles": {},
"sourceOptions": {
"sql": ""
},
"config": {
"title": "Population",
"subTitle": "in million",
"layout": {
"orientation": "vertical"
},
"kpiName": {
"column": "kpi_name"
},
"unit": {},
"value": {
"column": "kpi_value"
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "chartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "tableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "singleselectfilter_syncset",
"applyFilters": true,
"publishFilters": false
}
]
},
{
"id": "optionalTextModuleSyncsets",
"type": "html",
"config": {
"html": "To learn more about Syncsets and Filters check our documentation.
"
}
},
{
"id": "taskLinkSyncsets",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.syncsetsPage.syncsetsTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "taskLink2Syncsets",
"type": "html",
"config": {
"html": ""
},
"navigation": [
{
"label": "Complete a task",
"to": "introPage.syncsetsPage.filtersTaskPage"
}
]
},
{
"id": "titleTaskSyncsets",
"type": "html",
"config": {
"html": "Task: Create a new Syncset
"
}
},
{
"id": "explanationTaskSyncsets",
"type": "html",
"config": {
"html": "Try to create your own Snycset. By clicking on the bar the table should be filterd based on the selected city. Therefor you have to navigate to syncSets and then choose ExerciseSyncset via IDE and define the correct column. Then follow the comments in the code editor.
"
}
},
{
"id": "stepbystepTaskSyncsets",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "titleTaskFilters",
"type": "html",
"config": {
"html": "Task: Create two new Filters
"
}
},
{
"id": "explanationTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "stepbystepTaskFilters",
"type": "html",
"config": {
"html": "Let us introduce different Elements of app. Elements are used for visualization. Click on the square below to learn more about different Elements:
"
}
},
{
"id": "filter1App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "filter2App",
"type": "filter",
"source": "",
"styles": {
"backgroundColor": ""
},
"config": {
"column": "",
"columnType": "STRING",
"label": "toDo"
},
"syncSets": [
{
"syncSetId": "",
"applyFilters": true,
"publishFilters": true
}
]
},
{
"id": "titleModuleTable",
"type": "html",
"config": {
"html": "Elements: Table
"
}
},
{
"id": "explanationModuleTable",
"type": "html",
"config": {
"html": "Using elements with property 'type:TABLE' you can create an element like you see below. 'Use the right button click' and choose 'Navigate to element definition' to learn more about table element properties.
"
}
},
{
"id": "chartModuleTable",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "optionalTextModuleTable",
"type": "html",
"config": {
"html": "To learn more about Table Elements check our documentation.
"
}
},
{
"id": "taskLinkModuleTable",
"type": "html",
"styles": {},
"config": {
"html": ""
},
"navigation": [
{
"to": "introPage.elementsPage.tablePage.tableTaskPage",
"showLink": false,
"linkElement": true
}
]
},
{
"id": "titleTaskTable",
"type": "html",
"config": {
"html": "Task: Create a new Table
"
}
},
{
"id": "dataExplanationTaskTable",
"type": "html",
"config": {
"html": "Let's create a Table for 'My first App'.
Below you can see the example for the table you should create:
"
}
},
{
"id": "tableTaskTable",
"type": "table",
"source": "chartTaskKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": true,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "explanationTaskTable",
"type": "html",
"config": {
"html": "Now let's try to create such a table. Here is a template to start with. 'Navigate to element definition below, to start with the task!
"
}
},
{
"id": "tableApp",
"type": "table",
//Change the Data source to 'chartTaskKpi'
"source": "Change me",
"showResetFilter": {
//disable reset filter
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
//disable pagination
"enabled": true,
//disable that the info about pagination is shown
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": false,
"column": "",
"order": "asc"
},
"editing": {
//enable/disable Table editing
"add": true,
"edit": true,
"delete": false
},
//Enable/disbale filter
"valueFilter": true,
"rangeFilter": true,
"columns": []
}
},
{
"id": "element1TaskLayouts",
"type": "html",
"config": {
"html": "1
"
}
},
{
"id": "element2TaskLayouts",
"type": "html",
"config": {
"html": "2
"
}
},
{
"id": "element3TaskLayouts",
"type": "html",
"config": {
"html": "3
"
}
},
{
"id": "element4TaskLayouts",
"type": "html",
"config": {
"html": "4
"
}
},
{
"id": "element5TaskLayouts",
"type": "html",
"config": {
"html": "5
"
}
},
{
"id": "element6TaskLayouts",
"type": "html",
"config": {
"html": "6
"
}
},
{
"id": "exercisechartSyncsets",
"type": "highcharts",
"source": "chartModuleKpi",
"config": {
"title": {
"text": "Bar Chart"
},
"subtitle": {
"text": ""
},
"chart": {
"type": "bar"
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"series": [
{
"type": "bar",
"name": "Values",
"columnName": "kpi_value"
}
],
"yAxis": {
"title": {}
}
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": true
}
]
},
{
"id": "exercisetableSyncsets",
"type": "table",
"source": "chartModuleKpi",
"showResetFilter": {
"enabled": true,
"label": "Reset filter",
"icon": "arrowleft"
},
"config": {
"pagination": {
"enabled": false,
"showInfo": true
},
"striped": false,
"sorting": {
"enabled": true,
"column": "",
"order": "asc"
},
"editing": {},
"valueFilter": true,
"rangeFilter": true,
"columns": []
},
"syncSets": [
{
"syncSetId": "exerciseSyncset",
"applyFilters": false,
"publishFilters": false
}
]
},
{
"id": "titleIntroduction",
"type": "html",
"config": {
"html": "Learn how to build an App
"
}
},
{
"id": "explanationIntroduction",
"type": "html",
"config": {
"html": "The ONE LOGIC App Builder & Viewer based on our Data Science Platform ONE DATA, will make it easy for you, to craft Data into easy to understand and interactive Dashboards and Reports.
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets
"
}
}
],
"syncSets": [
{
"id": "singleselectfilter_syncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
},
{
"id": "exerciseSyncset",
"sources": [
"chartModuleKpi"
],
"joins": [
{
"datasource": "chartModuleKpi",
"columns": [
"kpi_name"
]
}
],
"syncMap": [
{
"source": "chartModuleKpi",
"targets": [
"chartModuleKpi"
]
}
]
}
],
"endpoints": [],
"partials": [],
"customElementPacks": [],
"customHooks": []
}
Below you can see the example for the table you should create:
1
2
3
4
5
6
In this Basic Trainingcourse, you´ll learn how to setup your own App in just six easy steps, covered by the Trainingmodules:
- Layouts
- Pages
- Navigation
- Elements
- Datasources
- Syncsets