Extend SAP Fiori crud app with a button to get to a new view and load there data from OData

Question

I´m pretty new in this SAP fiori world and now I´m trying to extend a SAP Fiori Crud Application. I´ll briefly explain what the app shoud do: enter image description here

• In the MasterView i get the name of all the workers (and this works good!); • When I click on one worker from the MasterView I get a list of all the projects available for this specifical worker in the DetailView (In other words: all the projects, where that worker works: and this works as well!); • When I click on the button "Projekt hinzufügen" (down, on the right, in the DetailView: in english it means "add a new Project"), a new view (the "addProject.view") should open (Till here it works, the addProjectView actually opens!). From here on I need your help: In this new View I should have the possibility to load all the available project, in order to add one or more project for that worker which was originally selected in the MasterView.I tried to load some data in these new view, just to see if everything was loaded in the right way before starting with all the List/Checkboxes work. For example I loaded in this new view the WorkerSet (the same which appears in the Master View) and this works, but as soon as I try to load the ProjectSet (the same which is shown in the DetailView) no data are shown! I don´t know what I´m doing wrong!!

Here you find the last part of the manifest.json (I hope i set everything in the right way for "routes" and "targets")... PS: "Mitarbeiter" means "worker" ;-)

 {.....},
    "sap.ui5": {
        "rootView": {
            "viewName": "de.paricon.Mitarbeiter.view.App",
            "type": "XML",
            "id": "app"
        },
        "dependencies": {
            "minUI5Version": "1.30.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {},
                "sap.ui.layout": {},
                "sap.f": {},
                "sap.ushell": {},
                "sap.collaboration": {},
                "sap.ui.comp": {},
                "sap.uxap": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "de.paricon.Mitarbeiter.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "settings": {
                    "metadataUrlParams": {
                        "sap-documentation": "heading"
                    },
                    "defaultBindingMode": "TwoWay"
                }
            }
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "de.paricon.Mitarbeiter.view",
                "controlId": "idAppControl",
                "controlAggregation": "detailPages",
                "bypassed": {
                    "target": [
                        "master",
                        "notFound"
                    ]
                },
                "async": true
            },
            "routes": [
                {
                    "pattern": "",
                    "name": "master",
                    "target": [
                        "object",
                        "master"
                    ]
                },
                {
                    "pattern": "MitarbeiterSet/{Mitarbeiterid}",
                    "name": "object",
                    "target": [
                        "master",
                        "object"
                    ]
                },
                {
                    "pattern": "addProject",
                    "name": "addProject",
                    "target": "addProject"
                }
            ],
            "targets": {
                "master": {
                    "viewName": "Master",
                    "viewLevel": 1,
                    "viewId": "master",
                    "controlAggregation": "masterPages"
                },
                "object": {
                    "viewName": "Detail",
                    "viewId": "detail",
                    "viewLevel": 2
                },
                "create": {
                    "viewName": "CreateEntity",
                    "viewLevel": 2
                },
                "detailObjectNotFound": {
                    "viewName": "DetailObjectNotFound",
                    "viewId": "detailObjectNotFound"
                },
                "detailNoObjectsAvailable": {
                    "viewName": "DetailNoObjectsAvailable",
                    "viewId": "detailNoObjectsAvailable"
                },
                "notFound": {
                    "viewName": "NotFound",
                    "viewId": "notFound"
                },
                "addProject": {
                    "viewType": "XML",
                    "viewName": "addProject"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "",
        "_version": "1.1.0"
    }
}

here is the Button in the Detail.view.xml:

<Button xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns:footerbar="sap.ushell.ui.footerbar" xmlns="sap.m" id="about" visible="true" text="Projekt hinzufügen" enabled="true" icon="sap-icon://add-activity" press="onNewProject">
                    </Button>

here ist the Detail.controller.js for the on press event of the button:

 onNewProject: function(oEvent) {
            //This code was generated by the layout editor.
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("addProject");
  }

In the addProject.controller.js i haven´t done anything: could it be the onInit function my solution? If yes, I still don´t understand why the WorkerSet is shown, while the ProjectSet isn´t....

Let me know if you need more information

Gabriel Gomez Gabriel Gomez · Accepted Answer · 2017-12-08T11:35:08

Hello Tatiana and first of all feel welcome to the „SAP Fiori World“! I believe the reason for your view “addProject.view” to not display the collection “ProjectSet” is because the view should be binded to that dataset. So in a Master/Detail Pattern, the binding takes place through different ways: In the master view - for instance, the binding is carried out in the file Master.view.xml :

            <List
            id="list"
            items="{
                **path: '/WorkerSet'**,
                  ...
            }"

The object “list” is binded to the WorkerSet collection.

The binding in the detail is carried out in the Detail.controller.js and is being made based on the routing parameters:

            _onObjectMatched : function (oEvent) {
            var sObjectId =  oEvent.getParameter("arguments").objectId;
            this.getModel().metadataLoaded().then( function() {
                var sObjectPath = this.getModel().createKey("ProductSet", {
                    ProductId :  sObjectId
                });
                **this._bindView("/" + sObjectPath)**;
            }.bind(this));
        },

And in fact, the whole view is binded (not only an control but the entire view)

Ok so once you are in the “addProject.view” make sure you bind either a combobox (or whatever UI Element you use for selecting the new project), or you bind the entire view to the collection “ProjectSet”

I hope I have understood the question and this answer helps you. Best regards, Gabriel

Extend SAP Fiori crud app with a button to get to a new view and load there data from OData

1 Answers