2017-04-13 2 views
0

Ich versuche, einige sap.uxap.ObjectPageLayout in meiner App mit drei Ebenen meines OData-Dienstes zu bauen. Wenn ich versuche, die "blocks" -Aggregation als '{path:' node ', template: oTemplate}' zu binden, werden die Bindungen in der Vorlage nicht abgeschlossen, und die Konsole protokolliert viele Fehler.blockiert Aggregation in ObjectPageSubsection + OData thee Ebenen tief

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
 
\t \t <meta charset="utf-8"> 
 

 
\t \t <title>MVC with XmlView</title> 
 

 
\t \t <!-- Load UI5, select "sap_belize" theme and the "sap.m" control library --> 
 
\t \t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t \t data-sap-ui-theme='sap_belize_plus' 
 
\t \t \t data-sap-ui-libs='sap.m, sap.uxap' 
 
\t \t \t data-sap-ui-xx-bindingSyntax='complex'></script> 
 

 

 
\t \t <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES --> 
 

 
\t \t <!-- define a new (simple) View type as an XmlView 
 
\t \t - using data binding for the Button text 
 
\t \t - binding a controller method to the Button's "press" event 
 
\t \t - also mixing in some plain HTML 
 
\t \t note: typically this would be a standalone file --> 
 

 
\t \t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller"> 
 
\t \t \t <App> 
 
\t \t \t \t <Page id="MyPage"/> 
 
\t \t \t </App> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 

 
\t \t <script> 
 
\t \t \t // define a new (simple) Controller type 
 
\t \t \t sap.ui.controller("my.own.controller", { 
 

 
\t \t \t \t // implement an event handler in the Controller 
 
\t \t \t \t onInit: function(){ 
 
\t \t \t \t \t var oPage = this.getView().byId("MyPage"); 
 
\t \t \t \t \t oPage.bindElement("/Employees(9)") 
 
\t \t \t \t \t var oOPL = new sap.uxap.ObjectPageLayout({ 
 
\t \t \t \t \t \t showTitleOnHeader: true, 
 
\t \t \t \t \t \t showTitleInHeaderContent: true, 
 
\t \t \t \t \t \t headerTitle: new sap.uxap.ObjectPageHeader({ 
 
\t \t \t \t \t \t \t isObjectTitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t isObjectSubtitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t objectTitle: "{FirstName} {LastName}", 
 
\t \t \t \t \t \t \t objectSubtitle: "{Title}", 
 
\t \t \t \t \t \t \t objectImageShape: "Circle", 
 
\t \t \t \t \t \t \t objectImageURI: "https://sapui5.hana.ondemand.com/test-resources/sap/uxap/images/imageID_275314.png", 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t headerContent: new sap.m.VBox({ 
 
\t \t \t \t \t \t \t items: [ 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Address}"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{City} ({Region})"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Country}"}), 
 
\t \t \t \t \t \t \t ] 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t sections: [ 
 
\t \t \t \t \t \t \t new sap.uxap.ObjectPageSection({ 
 
\t \t \t \t \t \t \t \t title: "Orders", 
 
\t \t \t \t \t \t \t \t subSections: { 
 
\t \t \t \t \t \t \t \t \t path: "Orders", \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t template: new sap.uxap.ObjectPageSubSection({ 
 
\t \t \t \t \t \t \t \t \t \t title: "Order ID: {OrderID}", 
 
             blocks: { 
 
              path: "Customer", 
 
              template: this.getBlocks() 
 
             } 
 
\t \t \t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t ] \t \t \t \t \t \t 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t oPage.addContent(oOPL); \t \t \t \t \t 
 
\t \t \t \t }, 
 
       
 
       getBlocks: function(){ 
 
        var oInput = new sap.m.Input({value: "{CompanyName}"}) 
 
        //oInput.bindElement("Customer"); 
 
        return oInput; 
 
       } 
 
\t \t \t }); 
 
\t 
 
\t 
 
\t 
 
\t \t \t /*** THIS IS THE "APPLICATION" CODE ***/ 
 
\t \t \t // instantiate the View 
 
\t \t \t var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above 
 

 
\t \t \t // create a Model and assign it to the View 
 
\t \t \t var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access 
 
\t \t \t var oModel = new sap.ui.model.odata.ODataModel(uri, { 
 
\t \t \t \t maxDataServiceVersion: "2.0", 
 
       useBatch: true 
 
\t \t \t }); 
 
\t \t \t myView.setModel(oModel); 
 
\t \t \t // put the View onto the screen 
 
\t \t \t myView.placeAt('content'); 
 

 
\t \t </script> 
 
\t 
 
\t </head> 
 
\t <body id='content' class='sapUiBody'> 
 
\t </body> 
 
</html>

Hier das Snippet: https://jsbin.com/sikihujuha/edit?html,output

ich Umgehung es ein Element zu tun jedes Mal Bindung der Vorlage Steuerung eingebaut ist. Aber es ruft den Dienst einmal pro Eintrag auf, anstatt die Bindung zu erstellen und alle Eigenschaften in einer Stapelanforderung aufzurufen.

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv='X-UA-Compatible' content='IE=edge'> 
 
\t \t <meta charset="utf-8"> 
 

 
\t \t <title>MVC with XmlView</title> 
 

 
\t \t <!-- Load UI5, select "sap_belize" theme and the "sap.m" control library --> 
 
\t \t <script id='sap-ui-bootstrap' 
 
\t \t \t src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' 
 
\t \t \t data-sap-ui-theme='sap_belize_plus' 
 
\t \t \t data-sap-ui-libs='sap.m, sap.uxap' 
 
\t \t \t data-sap-ui-xx-bindingSyntax='complex'></script> 
 

 

 
\t \t <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES --> 
 

 
\t \t <!-- define a new (simple) View type as an XmlView 
 
\t \t - using data binding for the Button text 
 
\t \t - binding a controller method to the Button's "press" event 
 
\t \t - also mixing in some plain HTML 
 
\t \t note: typically this would be a standalone file --> 
 

 
\t \t <script id="view1" type="sapui5/xmlview"> 
 
\t \t <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller"> 
 
\t \t \t <App> 
 
\t \t \t \t <Page id="MyPage"/> 
 
\t \t \t </App> 
 
\t \t </mvc:View> 
 
\t </script> 
 

 

 
\t \t <script> 
 
\t \t \t // define a new (simple) Controller type 
 
\t \t \t sap.ui.controller("my.own.controller", { 
 

 
\t \t \t \t // implement an event handler in the Controller 
 
\t \t \t \t onInit: function(){ 
 
\t \t \t \t \t var oPage = this.getView().byId("MyPage"); 
 
\t \t \t \t \t oPage.bindElement("/Employees(9)") 
 
\t \t \t \t \t var oOPL = new sap.uxap.ObjectPageLayout({ 
 
\t \t \t \t \t \t showTitleOnHeader: true, 
 
\t \t \t \t \t \t showTitleInHeaderContent: true, 
 
\t \t \t \t \t \t headerTitle: new sap.uxap.ObjectPageHeader({ 
 
\t \t \t \t \t \t \t isObjectTitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t isObjectSubtitleAlwaysVisible: false, 
 
\t \t \t \t \t \t \t objectTitle: "{FirstName} {LastName}", 
 
\t \t \t \t \t \t \t objectSubtitle: "{Title}", 
 
\t \t \t \t \t \t \t objectImageShape: "Circle", 
 
\t \t \t \t \t \t \t objectImageURI: "https://sapui5.hana.ondemand.com/test-resources/sap/uxap/images/imageID_275314.png", 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t headerContent: new sap.m.VBox({ 
 
\t \t \t \t \t \t \t items: [ 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Address}"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{City} ({Region})"}), 
 
\t \t \t \t \t \t \t \t new sap.m.Text({text: "{Country}"}), 
 
\t \t \t \t \t \t \t ] 
 
\t \t \t \t \t \t }), 
 
\t \t \t \t \t \t sections: [ 
 
\t \t \t \t \t \t \t new sap.uxap.ObjectPageSection({ 
 
\t \t \t \t \t \t \t \t title: "Orders", 
 
\t \t \t \t \t \t \t \t subSections: { 
 
\t \t \t \t \t \t \t \t \t path: "Orders", \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t template: new sap.uxap.ObjectPageSubSection({ 
 
\t \t \t \t \t \t \t \t \t \t title: "Order ID: {OrderID}", 
 
             blocks: this.getBlocks() 
 
\t \t \t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }) 
 
\t \t \t \t \t \t ] \t \t \t \t \t \t 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t oPage.addContent(oOPL); \t \t \t \t \t 
 
\t \t \t \t }, 
 
       
 
       getBlocks: function(){ 
 
        //var oInput = new sap.m.Input({value: "{Customer/CompanyName}"}) 
 
        var oInput = new sap.m.Input({value: "{CompanyName}"}) 
 
        oInput.bindElement("Customer"); 
 
        return [oInput]; 
 
       } 
 
\t \t \t }); 
 
\t 
 
\t 
 
\t 
 
\t \t \t /*** THIS IS THE "APPLICATION" CODE ***/ 
 
\t \t \t // instantiate the View 
 
\t \t \t var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above 
 

 
\t \t \t // create a Model and assign it to the View 
 
\t \t \t var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access 
 
\t \t \t var oModel = new sap.ui.model.odata.ODataModel(uri, { 
 
\t \t \t \t maxDataServiceVersion: "2.0", 
 
       useBatch: true 
 
\t \t \t }); 
 
\t \t \t myView.setModel(oModel); 
 
\t \t \t // put the View onto the screen 
 
\t \t \t myView.placeAt('content'); 
 

 
\t \t </script> 
 
\t 
 
\t </head> 
 
\t <body id='content' class='sapUiBody'> 
 
\t </body> 
 
</html>

hier Abhilfe: https://jsbin.com/zajacodoce/edit?html,output

Jede Idee, diese zu verbessern?

Danke und Grüße, Rafael Lopez

Antwort

0

Gut fand ich einen Fehler in meinem Code der Abhilfe. Ich habe die erste Elementbindung nicht richtig erweitert, sollte es sein: $ expand = Orders/Customer Ich vermute, es war ein Tippfehler aus meinen Tests.

Jedenfalls funktioniert das erste Snippet nicht, es scheint, als ob die Blocks-Aggregation einen weiteren "$ expand" -Parameter für die URL enthält, und die Fehler erscheinen in der Konsole

Verwandte Themen