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