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