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": {}
}
}
}
]
}
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