<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_horizon"
      data-sap-ui-async="true"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatversion="edge"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-componentpreload="off"
      data-sap-ui-xx-waitfortheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function(UIComponent, Device) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

    init: function () {
      UIComponent.prototype.init.apply(this, arguments);
      this.setDensity().getRouter().initialize();
    },

    setDensity: function ({
      styleClass = Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy",
      targetElement = document.body,
    } = {}) {
      targetElement.classList.add(styleClass);
      return this;
    },

  });
});
{
  "_version": "1.40.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "App Title",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {
      "myDataSource": {
        "type": "JSON",
        "uri": "model/demoData.json"
      }
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.77.1",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {
      "": {
        "dataSource": "myDataSource"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    },
    "routing": {
      "routes": {
        "home": {
          "pattern": "",
          "target": "home"
        }
      },
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "level": 1
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "level": 98
        }
      },
      "config": {
        "routerClass": "sap.m.routing.Router",
        "async": true,
        "type": "View",
        "viewType": "XML",
        "path": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}
<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
  height="100%"
>
  <App id="rootApp" autoFocus="false">
    <pages>
      <!-- will be added by Router -->
    </pages>
  </App>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%">
  <Page id="homePage"
    title="Displaying nested JSON"
    class="sapUiResponsiveContentPadding">
    <Panel headerText="Using Tree" class="sapUiNoContentPadding">
      <Tree items="{
        path: '/',
        factory: '.createTreeItem',
        templateShareable: false,
        key: 'ID'
      }"/>
    </Panel>
    <Panel headerText="Using Two List Controls"
      class="sapUiNoContentPadding sapUiLargeMarginTop">
      <List headerText="Select Department"
        mode="SingleSelectMaster"
        selectionChange=".onSelectionChange"
        items="{
          path: '/Departments',
          templateShareable: false,
          key: 'ID'
        }">
        <StandardListItem title="{Name}" />
      </List>
      <Table id="employeeList"
        noDataText="Select a department first"
        headerText="Employees in that selected Department"
        items="{
          path: 'Employees',
          templateShareable: false,
          key: 'ID'
        }">
        <columns>
          <Column>
            <Text text="Last name"/>
          </Column>
        </columns>
        <ColumnListItem>
          <Input value="{LastName}" valueLiveUpdate="true" />
        </ColumnListItem>
      </Table>
    </Panel>
  </Page>
</mvc:View>
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/StandardTreeItem",
  "sap/m/CustomTreeItem",
  "sap/m/Input",
], function(Controller, StandardTreeItem, CustomTreeItem, Input) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {
      this._createTreeItem = {
        "Departments": this.createStandardTreeItem.bind(this),
        "Employees": this.createEmployeeItem.bind(this),
      };
    },

    createTreeItem: function(id, context) {
      const type = context.getPath().split("/").reverse()[1];
      return this._createTreeItem[type](id, context);
    },

    createStandardTreeItem: function(id, context) {
      return new StandardTreeItem(id, {
        title: context.getProperty("Name"),
      });
    },

    createEmployeeItem: function(id, context) {
      return new CustomTreeItem(id, {
        content: new Input(id + "-input", {
          value: "{LastName}",
          valueLiveUpdate: true,
        }),
      });
    },

    onSelectionChange: function(event) {
      const path = event.getParameter("listItem").getBindingContext().getPath();
      this.byId("employeeList").bindObject(path);
    },

    onExit: function() {
      this._createTreeItem = null;
    },

  });
});
{
    "Departments": [
        {
            "ID": "1",
            "Name": "Oil and Gas",
            "Employees": [
                {
                    "ID": "12345",
                    "LastName": "Tom"
                },
                {
                    "ID": "678",
                    "LastName": "Jerry"
                }
            ]
        },
        {
            "ID": "2",
            "Name": "Gasoline",
            "Employees": [
                {
                    "ID": "21",
                    "LastName": "Donald"
                },
                {
                    "ID": "22",
                    "LastName": "Duck"
                }
            ]
        }
    ]
}