Routing Issue

[Former Member]

Hello everyone, I am having problems with routing in my application. So basically I have, in my main page, a table with rows of data, each representing an entry in a JSON file. So first, find my manifest.json file and my employees.json file which represents my data. (I will omit the irrelevant parts of my manifest.json file). What I am trying to do, is implement parametrized routing, where clicking on a row will take me to a new page where the employee's information will show up.

 "models": {

      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "sap.ui.demo.project.i18n.i18n"
        }
      },

      "employee": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "model/employees.json"
      }
    },

    "routing": {

      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "sap.ui.demo.project.view",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true,
        "bypassed": {
          "target": "notFound"
        }
      },

      "routes": [{
          "pattern": "",
          "name": "home",
          "target": "home"
        },
        {
          "pattern": "content",
          "name": "content",
          "target": "home"
        },
        {
          "pattern": "employee/{EmployeeID}",
          "name": "employee",
          "target": "employee"
        }
      ],
      "targets": {

        "home": {
          "viewId": "home",
          "viewName": "Home",
          "viewLevel": 1
        },

        "employee": {
          "viewName": "employee.Employee",
          "viewLevel": 2
        },

        "notFound": {
          "viewName": "NotFound",
          "transition": "show"
        }
      }

    },

my employees.json file:

{
  "Employees": [
    {
      "EmployeeID": 1,
      "Name": "Greg",
      "Position Title": "Vice Dean",
      "Campus": "",
      "Faculty": "",
      "Department": "",
      "Start Date": "2018.07.01",
      "End Date": "2019.04.04"
    },

    {
      "EmployeeID": 2,
      "Name": "Al Doe",
      "Position Title": "Chair",
      "Campus": "TBD",
      "Faculty": "Foo",
      "Department": "Bar",
      "Start Date": "2018.07.01",
      "End Date": "2019.04.04"
    },

    {
      "EmployeeID": 3,
      "Name": "John Doe",
      "Position Title": "TBD",
      "Campus": "",
      "Faculty": "",
      "Department": "",
      "Start Date": "2018.07.01",
      "End Date": "2019.04.04"
    }

]

My table renders fine, and I can click on each row, which takes me to a URL that ends with /employees/EmployeeID. The routing aspect is working fine, but here is the problem. When I arrive to the specific URL, I want to present data from that specific individual, which I try to do in a view file called Employee.view.xml:

<mvc:View
    controllerName="sap.ui.demo.project.controller.employee.Employee"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    busyIndicatorDelay="0">
    <Page 
        id="employeePage"
        title="{i18n>EmployeeDetailsOf} {Name}"
        showNavButton="true"
        navButtonPress="onNavBack"
        class="sapUiResponsiveContentPadding">
    </Page

The {Name} part specifically does not render. If I remove it, I have a perfectly working page with {i18n>EmployeeDetailsOf} showing well, with a back button that takes me back to my table, so there are no XML issues (I have omitted a couple of lines here as well). I just can't get the employee name to show up, I even tried replacing {Name} with {employee>Name} but no luck there as well. I will attach my Table view, Table Controller and Employee Controller as well for reference (where the routing takes place).

Employee Controller:

sap.ui.define([
    "sap/ui/demo/project/controller/BaseController"
], function (BaseController) {
    "use strict";
    return BaseController.extend("sap.ui.demo.project.controller.employee.Employee", {
        onInit: function () {
            var oRouter = this.getRouter();
            oRouter.getRoute("employee").attachMatched(this._onRouteMatched, this);
        },
        _onRouteMatched : function (oEvent) {
            var oArgs, oView;
            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();

            oView.bindElement({
                path : "/employees(" + oArgs.EmployeeID + ")",
                events : {
                    change: this._onBindingChange.bind(this),
                    dataRequested: function (oEvent) {
                        oView.setBusy(true);
                    },
                    dataReceived: function (oEvent) {
                        oView.setBusy(false);
                    }
                }
            });
        },
        _onBindingChange : function (oEvent) {
            // No data for the binding
            if (!this.getView().getBindingContext()) {
                this.getRouter().getTargets().display("notFound");
            }
        }
    });
});

Table View (XML)

<mvc:View controllerName="sap.ui.demo.project.controller.employee.EmployeeTable" 
    xmlns="sap.m" 
    xmlns:mvc="sap.ui.core.mvc">

<Table id="empTable" inset="false" class="sapUiResponsiveMargin" width="auto" headerText="{i18n>employeeTableTitle}" items="{
         path : 'employee>/Employees',
         sorter : {
            path : 'Name' 
         }}">

        <columns>
            <Column hAlign="Center" vAlign="Middle" mergeDuplicates="true" width="10em" demandPopin="true">
                <Text text="{i18n>columnName}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle">
                <Text text="{i18n>columnPosition}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle">
                <Text text="{i18n>columnCampus}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle" width="20em" minScreenWidth="Tablet">
                <Text text="{i18n>columnFaculty}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle" width="20em" minScreenWidth="Tablet">
                <Text text="{i18n>columnDept}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle">
                <Text text="{i18n>columnSDate}" />
            </Column>
            <Column hAlign="Center" vAlign="Middle">
                <Text text="{i18n>columnEDate}" />
            </Column>
        </columns>

        <items>
            <ColumnListItem press=".onPress" type="Navigation">
                <cells>
                    <Text text="{employee>Name}" />
                    <Text text="{employee>Position Title}" />
                    <Text text="{employee>Campus}" />
                    <Text text="{employee>Faculty}" />
                    <Text text="{employee>Department}" />
                    <Text text="{employee>Start Date}" />
                    <Text text="{employee>End Date}" />
                </cells>
            </ColumnListItem>
        </items>

    </Table>

</mvc:View>

and finally my table controller

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator"
], function (Controller, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("sap.ui.demo.project.controller.employee.EmployeeTable", {

        onInit: function () {
            
        },

        onPress: function (oEvent) {
            var oItem, oCtx;
            oItem = oEvent.getSource();
            oCtx = oItem.getBindingContext('employee');
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.navTo("employee", {
                EmployeeID: oCtx.getProperty("EmployeeID")
            });
        }

    });
});

I really hope someone can help me, I've been stuck on this for so long and I'm truly clueless about how to proceed next, having tried a lot. Thanks!