Master Detail met meerdere weergaven en meerdere controllers voor detail in SAP UI5

Voorwoord - Dit bericht maakt deel uit van de UI5-programma's series.

In dit artikel bespreken we Master Detail met meerdere weergaven en meerdere controllers voor detail in SAP UI5. Bezoek deze pagina, voor het geval u op zoek bent naar Master Detail met meerdere fragmenten voor detail en een enkele controller.

Master Detail met meerdere weergaven en meerdere controllers voor detail in SAP UI5

App.weergave.xml

De naam van de UI5-app in onze use case is "admin".

 // verwijdermodus als u niet altijd de Master-sectie wilt weergeven

App.controller.js

Er hoeft niets te worden geschreven in het App.Controller.js-bestand

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("admin.admin.controller.App", { onInit: function ( ) { } }); });

Manifest.json

1. Wijzig de rootView in App

"rootView": { "viewName": "admin.admin.view.App", "type": "XML", "async": true, "id": "app" },

2. Werk de routeringsconfiguratie bij

"routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "admin.admin.view",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [{
                "name": "Login",
                "pattern": "",
                "target": [
                    "masterTarget",
                    "Login"
                ]
            }, {
                "name": "Dashboard",
                "pattern": "Dashboard",
                "target": [
                    "masterTarget",
                    "Dashboard"
                ]
            }, {
                "name": "Appointments",
                "pattern": "Appointments",
                "target": [
                    "masterTarget",
                    "Appointments"
                ]
            }, {
                "name": "Doctors",
                "pattern": "Doctors",
                "target": [
                    "masterTarget",
                    "Doctors"
                ]
            }, {
                "name": "Patient",
                "pattern": "Patient",
                "target": [
                    "masterTarget",
                    "Patient"
                ]
            }, {
                "name": "Subscription",
                "pattern": "Subscription",
                "target": [
                    "masterTarget",
                    "Subscription"
                ]
            }, {
                "name": "Symptoms",
                "pattern": "Symptoms",
                "target": [
                    "masterTarget",
                    "Symptoms"
                ]
            }, {
                "name": "Specialty",
                "pattern": "Specialty",
                "target": [
                    "masterTarget",
                    "Specialty"
                ]
            }, {
                "name": "Tests",
                "pattern": "Tests",
                "target": [
                    "masterTarget",
                    "Tests"
                ]
            }, {
                "name": "Support",
                "pattern": "Support",
                "target": [
                    "masterTarget",
                    "Support"
                ]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Login": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "Login",
                    "viewName": "Login",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Dashboard": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idDashboard",
                    "viewName": "Dashboard",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Appointments": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idAppointments",
                    "viewName": "Appointments",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Doctors": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idDoctors",
                    "viewName": "Doctors",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Patient": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idPatient",
                    "viewName": "Patient",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Subscription": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idSubscription",
                    "viewName": "Subscription",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Symptoms": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idSymptoms",
                    "viewName": "Symptoms",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Specialty": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idSpecialty",
                    "viewName": "Specialty",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tests": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTests",
                    "viewName": "Tests",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Support": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idSupport",
                    "viewName": "Support",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                }
            }
        }

Zoals u kunt zien, hebben we meerdere detailpagina's, en een gemeenschappelijk ding is "masterTarget". Dit is het doel voor hoofdpagina, dwz "Het linkerdeelvenster waar u meerdere tabbladen kunt hebben om van pagina te wisselen".

Hoofdpaginaweergave: Master.view.xml

-->appVersion}"/>

Hoofdcontroller: Master.controller.js

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "gebruik strict"; return Controller.extend("admin.admin.controller.Master", { /** * Aangeroepen wanneer een controller is geïnstantieerd en de weergavebesturingselementen (indien beschikbaar) al zijn gemaakt. * Kan worden gebruikt om de weergave te wijzigen voordat deze wordt weergegeven, om gebeurtenishandlers te binden en andere eenmalige initialisatie uit te voeren. * @memberOf Healthbridge-admin. Healthbridge-admin.view.Master */ onInit: function () { // Get Router Info this.oRouter = this.getOwnerComponent().getRouter();}, /** * onListItemPress wordt aangeroepen bij klikken vanuit de gebruikersinterface. : Sleutel onderhouden in hoofdweergave * Uitvoer: navigatie naar de hoofdpagina */ onListItemPress: function (oEvent) { var that = this; sap.ui.core.BusyIndicator.show(); // var sTimeOutErrorMsg = this.oBundle.getText ("TimeOutError"); var sError; var sToPageId = oEvent.getParameter("item").getKey(); if (sToPageId) { probeer { that.oRouter.navTo(sToPageId); } catch (err) { if (err .statusCode === 401) { // sError = sTimeO utFoutMsg; venster.locatie.herladen(true); sap.ui.core.BusyIndicator.hide(); } else { sError = fout.fout; sap.m.MessageBox.error(sError); venster.locatie.herladen(true); sap.ui.core.BusyIndicator.hide(); } // venster.locatie.href = '../uitloggen'; } } else { venster.locatie.herladen(true); sap.ui.core.BusyIndicator.hide(); } } }); });

Afgezien van het bovenstaande, kunt u eenvoudig uw pagina's en controllers maken en deze blijven koppelen in de hoofdpagina en het manifestbestand.

Wijzigingen in detailpagina's

Op detailpagina's moet u een aantal dingen afhandelen:

  • Binnen de sectie On Init of Route Matched moet u de Master-sectie zichtbaar maken, in dit geval is deze verborgen, aangezien de eerste pagina Login was en we de Master-sectie niet willen tonen. De code is als volgt:
    // Standaard is deze ingesteld op "HideMode" this.getView().getParent().getParent().setMode("ShowHideMode"); // Dit is om de hoofdknop onzichtbaar te verbergen op de hoofdpagina this.getView().getParent().getParent()._oShowMasterBtn.setVisible(false);

    Als u rechtstreeks naar de Master Detail-sectie gaat, verwijdert u gewoon de modus uit App.view.xml

  • U kunt het hoofdtabblad/hoofdsectie verbergen en zichtbaar maken door op een knop te klikken waarvan de code hieronder wordt vermeld
    We hebben de code geschreven voor het indrukken van een knop "onExpandPress":
    Knopcode: Uitvouwen}” druk=”opUitvouwenDruk”/>
    Controllercode:

    /** * onExpandPress wordt aangeroepen vanuit de gebruikersinterface door op de knop Expand te drukken. * Invoer: huidige modus -- Volledig scherm of deelvenster * Uitvoer: tegenovergestelde modus -- Deelvenster of volledig scherm */ onExpandPress: function (oEvent) { var navVisible = this.getView().getParent().getParent(). getModus(); if (navVisible === "ShowHideMode") { this.getView().getParent().getParent().setMode("HideMode"); oEvent.getSource().setIcon("sap-icon://exit-full-screen"); } else { this.getView().getParent().getParent().setMode("ShowHideMode"); oEvent.getSource().setIcon("sap-icon://volledig scherm"); } dit.getView().getParent().getParent()._oShowMasterBtn.setVisible(false); },

     

Auteur


Heb je vragen? Stel ze hier.

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.