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
}
]
}
}
]
}