This is the copy & paste ready example for part 5 of the Getting started article of apps.
Note that for the example to work you need to have the workflow with correct data tables imported to ONE DATA. It is necessary to adjust the "dataId" in the config property for the respective datasources ("table_countries", "table_sectors", "table_forbes") in your App, so they match the data table id in your use cases. Both, workflow and dataset are attached at the bottom.
{
"version": "0.1",
"screens": [
{
"layout": "layout1",
"conditions": {
"minScreenWidth": 0
}
}
],
"layouts": [
{
"id": "layout1",
"type": "fixedGrid",
"config": {
"dim": {
"x": 24,
"y": 24
},
"containers": [
{
"id": "tableContainer1",
"pos": {
"x": 1,
"y": 1
},
"size": {
"w": 12,
"h": 12
}
},
{
"id": "tableContainer2",
"pos": {
"x": 13,
"y": 1
},
"size": {
"w": 12,
"h": 12
}
},
{
"id": "chartContainer",
"pos": {
"x": 1,
"y": 13
},
"size": {
"w": 24,
"h": 13
}
}
]
},
"cellPadding": "5px",
"placements": [
{
"containerId": "tableContainer1",
"elementId": "frtTableCountry"
},
{
"containerId": "tableContainer2",
"elementId": "frtTableSector"
},
{
"containerId": "chartContainer",
"elementId": "frtChart"
}
]
}
],
"datasources": [
{
"id": "table_countries",
"origin": "datatable",
"config": {
"schema": "table",
"dataId": "13b8c145-2beb-4d72-a6a5-9102ce84b744",
"filterOptions": {
"enabled": true,
"distinctValues": true
}
}
},
{
"id": "table_sectors",
"origin": "datatable",
"config": {
"schema": "table",
"dataId": "b9c5b904-9f23-4836-a6da-449245e8fde5",
"filterOptions": {
"enabled": true,
"distinctValues": true
}
}
},
{
"id": "table_forbes",
"origin": "datatable",
"config": {
"schema": "table",
"dataId": "fef12c43-f275-4409-8d10-d84d1a9c80fc"
}
}
],
"syncSets": [
{
"id": "forbes_countries",
"sources": [
"table_countries",
"table_sectors",
"table_forbes"
],
"joins": [
{
"datasource": "table_countries",
"columns": [
"Country"
]
},
{
"datasource": "table_sectors",
"columns": [
"Country"
]
},
{
"datasource": "table_forbes",
"columns": [
"Country"
]
}
],
"syncMap": [
{
"source": "table_countries",
"targets": [
"table_sectors",
"table_forbes"
]
},
{
"source": "table_sectors",
"targets": [
"table_countries"
]
}
]
},
{
"id": "forbes_sectors",
"sources": [
"table_sectors",
"table_forbes"
],
"joins": [
{
"datasource": "table_sectors",
"columns": [
"Sector"
]
},
{
"datasource": "table_forbes",
"columns": [
"Sector"
]
}
],
"syncMap": [
{
"source": "table_sectors",
"targets": [
"table_forbes"
]
}
]
}
],
"elements": [
{
"id": "frtTableSector",
"type": "table",
"source": "table_sectors",
"syncSets": [
{
"syncSetId": "forbes_sectors",
"publishFilters": true,
"applyFilters": false
},
{
"syncSetId": "forbes_countries",
"publishFilters": true,
"applyFilters": true
}
],
"config": {
"columns": [
{
"name": "Sector"
}
]
}
},
{
"id": "frtTableCountry",
"type": "table",
"source": "table_countries",
"syncSets": [
{
"syncSetId": "forbes_countries",
"publishFilters": true,
"applyFilters": true
}
],
"config": {
"columns": [
{
"name": "Country"
}
]
}
},
{
"id": "frtChart",
"type": "highcharts",
"source": "table_forbes",
"syncSets": [
{
"syncSetId": "forbes_sectors",
"applyFilters": true,
"publishFilters": false
},
{
"syncSetId": "forbes_countries",
"applyFilters": true,
"publishFilters": false
}
],
"styles": {
"chart": {
"xAxis": {
"labels": {
"color": ""
}
}
}
},
"config": {
"title": {
"text": "Top 10 Companies"
},
"exporting": {},
"chart": {
"type": "bar",
"polar": false
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"animation": false
}
},
"xAxis": {
"columnName": "Company"
},
"series": [
{
"name": "Sales",
"turboThreshold": 0
}
]
}
}
]
}
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article