This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/navigation/Navigation.html#configuration-overview
A full example on how to add sidebar navigation to your app.
{
"version": "0.1",
// screens also have to be defined here to prevent parsing errors
"screens": [],
"navigation": {
"type": "app",
"config": {
"enabled": true,
"expandAll": false,
"permanent": false
},
"entries": [
{
"page": "overview",
"label": "Overview 1",
"children": [
{
"label": "Childview 1",
"page": "overview.details"
}
]
},
{
"label": "Overview 2",
"page": "overview2",
"children": [
{
"label": "Childview 2",
"page": "overview2.details"
}
]
}
]
},
"pages": [
{
"id": "overview",
"label": "Übersicht",
"screens": [
{
"layout": "overviewLayout1"
}
],
"children": [
{
"id": "details",
"label": "Details",
"screens": [
{
"layout": "childLayout1"
}
]
}
]
},
{
"id": "overview2",
"label": "Übersicht 2",
"screens": [
{
"layout": "overviewLayout1"
}
],
"children": [
{
"id": "details",
"label": "Details",
"screens": [
{
"layout": "childLayout1"
}
]
}
]
}
],
"layouts": [
{
"id": "overviewLayout1",
"type": "fixedGrid",
"config": {
"dim": {
"x": 24,
"y": 24
},
"containers": [
{
"id": "titlePos",
"pos": {
"x": 1,
"y": 1
},
"size": {
"w": 24,
"h": 4
}
},
{
"id": "chart1",
"pos": {
"x": 1,
"y": 5
},
"size": {
"w": 24,
"h": 8
}
},
{
"id": "chart2",
"pos": {
"x": 1,
"y": 13
},
"size": {
"w": 20,
"h": 12
}
}
]
},
"cellPadding": "5px",
"placements": [
{
"containerId": "titlePos",
"elementId": "overview"
},
{
"containerId": "chart1",
"elementId": "chartVis"
},
{
"containerId": "chart2",
"elementId": "chartVis"
}
]
},
{
"id": "childLayout1",
"type": "fixedGrid",
"config": {
"dim": {
"x": 40,
"y": 25
},
"containers": [
{
"id": "titlePos",
"pos": {
"x": 15,
"y": 1
},
"size": {
"w": 24,
"h": 4
}
},
{
"id": "chart1",
"pos": {
"x": 1,
"y": 5
},
"size": {
"w": 20,
"h": 20
}
},
{
"id": "chart2",
"pos": {
"x": 20,
"y": 5
},
"size": {
"w": 20,
"h": 20
}
}
]
},
"cellPadding": "5px",
"placements": [
{
"containerId": "titlePos",
"elementId": "child"
},
{
"containerId": "chart1",
"elementId": "barChart"
},
{
"containerId": "chart2",
"elementId": "barChart"
}
]
}
],
"datasources": [
{
"id": "raw_testSource",
"origin": "raw",
"config": {
"schema": "table",
"data": [
{
"Categories": "Jan",
"Berlin": 1.5,
"Tokyo": 2.2,
"New York": 2.3,
"London": 1.1
},
{
"Categories": "Feb",
"Berlin": 2.1,
"Tokyo": 2.8,
"New York": 2.9,
"London": 3.1
},
{
"Categories": "Mar",
"Berlin": 1.2,
"Tokyo": 2.8,
"New York": 2.1,
"London": 2.4
},
{
"Categories": "Apr",
"Berlin": 0.2,
"Tokyo": 4.2,
"New York": 3.7,
"London": 2.5
}
]
}
}
],
"elements": [
{
"id": "overview",
"type": "html",
"config": {
"html": "<h1>Overview</h1>"
}
},
{
"id": "child",
"type": "html",
"config": {
"html": "<h2>Childview</h2>"
}
},
{
"id": "chartVis",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "My Chart"
},
"subtitle": {
"text": "My Untitled Chart"
},
"exporting": {},
"chart": {
"type": "area",
"polar": false
},
"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": "barChart",
"type": "highcharts",
"source": "raw_testSource",
"config": {
"title": {
"text": "My Chart"
},
"subtitle": {
"text": "My Untitled Chart"
},
"exporting": {},
"chart": {
"type": "bar",
"polar": false
},
"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": {}
}
}
}
]
}