-
-
Save anonymous/e247b8097b6a1ce99cd9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.controller("sap.ui.demo.myFiori.view.App", { | |
| /** | |
| * Navigates to another page | |
| * @param {string} pageId The id of the next page | |
| * @param {sap.ui.model.Context} context The data context to be applied to the next page (optional) | |
| */ | |
| to : function (pageId, context) { | |
| var app = this.getView().app; | |
| // load page on demand | |
| var master = ("Tile" === pageId); | |
| if (app.getPage(pageId, master) === null) { | |
| var page = sap.ui.view({ | |
| id : pageId, | |
| viewName : "sap.ui.demo.myFiori.view." + pageId, | |
| type : "JS" | |
| }); | |
| page.getController().nav = this; | |
| app.addPage(page, master); | |
| jQuery.sap.log.info("app controller > loaded page: " + pageId); | |
| } | |
| // show the page | |
| app.to(pageId); | |
| // set data context on the page | |
| if (context) { | |
| var page = app.getPage(pageId); | |
| page.setBindingContext(context); | |
| } | |
| }, | |
| /** | |
| * Navigates back to a previous page | |
| * @param {string} pageId The id of the next page | |
| */ | |
| back : function (pageId) { | |
| this.getView().app.backToPage(pageId); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.jsview("sap.ui.demo.myFiori.view.App", { | |
| getControllerName: function () { | |
| return "sap.ui.demo.myFiori.view.App"; | |
| }, | |
| createContent: function (oController) { | |
| // to avoid scroll bars on desktop the root view must be set to block display | |
| this.setDisplayBlock(true); | |
| // create app | |
| this.app = new sap.m.App(); | |
| // load the master page | |
| var master = sap.ui.jsview("Tile", "sap.ui.demo.myFiori.view.Tile"); | |
| master.getController().nav = this.getController(); | |
| this.app.addPage(master, true); | |
| // load the detail page | |
| var detail = sap.ui.xmlview("Detail", "sap.ui.demo.myFiori.view.Detail"); | |
| detail.getController().nav = this.getController(); | |
| this.app.addPage(detail, false); | |
| // done | |
| return this.app; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery.sap.declare("sap.ui.demo.myFiori.Component"); | |
| sap.ui.core.UIComponent.extend("sap.ui.demo.myFiori.Component", { | |
| createContent : function() { | |
| // create root view | |
| var oView = sap.ui.view({ | |
| id : "app", | |
| viewName : "sap.ui.demo.myFiori.view.App", | |
| type : "JS", | |
| viewData : { component : this } | |
| }); | |
| // // Using OData model to connect against a real service | |
| // var url = "/proxy/http/<server>:<port>/sap/opu/odata/sap/ZGWSAMPLE_SRV/"; | |
| // var oModel = new sap.ui.model.odata.ODataModel(url, true, "<user>", "<password>"); | |
| // oView.setModel(oModel); | |
| // Using a local model for offline development | |
| var oModel = new sap.ui.model.json.JSONModel("model/mock.json"); | |
| oView.setModel(oModel); | |
| // done | |
| return oView; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.controller("sap.ui.demo.myFiori.view.Detail", { | |
| handleNavButtonPress : function (evt) { | |
| this.nav.back("Master"); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <core:View | |
| controllerName="sap.ui.demo.myFiori.view.Detail" | |
| xmlns="sap.m" | |
| xmlns:core="sap.ui.core" > | |
| <Page | |
| title="~DetailPage~" | |
| showNavButton="true" | |
| navButtonPress="handleNavButtonPress" > | |
| <VBox> | |
| <Text text="{SoId}" /> | |
| <Text text="{GrossAmount}" /> | |
| <Text text="{CreatedAt}" /> | |
| <Text text="{CreatedByBp}" /> | |
| </VBox> | |
| </Page> | |
| </core:View> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta charset="UTF-8"> | |
| <title>My Fiori 0</title> | |
| <script | |
| id="sap-ui-bootstrap" | |
| src="resources/sap-ui-core.js" | |
| data-sap-ui-theme="sap_bluecrystal" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-resourceroots='{ | |
| "sap.ui.demo.myFiori": "./" | |
| }' > | |
| </script> | |
| <script> | |
| new sap.ui.core.ComponentContainer({ | |
| name : "sap.ui.demo.myFiori" | |
| }).placeAt("content"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" id="content"> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.controller("sap.ui.demo.myFiori.view.Master", { | |
| handleListItemPress : function (evt) { | |
| var context = evt.getSource().getBindingContext(); | |
| this.nav.to("Detail", context); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <core:View | |
| controllerName="sap.ui.demo.myFiori.view.Master" | |
| xmlns="sap.m" | |
| xmlns:core="sap.ui.core" > | |
| <Page | |
| title="~MasterPage~" > | |
| <List | |
| items="{/SalesOrderCollection}" > | |
| <StandardListItem | |
| type="Active" | |
| press="handleListItemPress" | |
| title="{SoId}" /> | |
| </List> | |
| </Page> | |
| </core:View> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sap.ui.jsview("sap.ui.demo.myFiori.view.Tile", { | |
| getControllerName : function() { | |
| return "sap.ui.demo.myFiori.view.Tile"; | |
| }, | |
| createContent : function(oController) { | |
| var jsonModel = [ | |
| { id : "idModelTile1", | |
| title : "Create Customer", | |
| info: "XD01", | |
| icon:"inbox", | |
| activeIcon:"inbox", | |
| number:1, | |
| numberUnit: "Create"}, | |
| { id : "idModelTile2", | |
| title : "Change Customer", | |
| info: "XD02", | |
| icon:"role", | |
| activeIcon:"switch-classes", | |
| number:2, | |
| numberUnit: "Change"}, | |
| { id : "idModelTile3", | |
| title : "Display Customer", | |
| info: "XD03", | |
| icon:"task", | |
| activeIcon:"task", | |
| number:3, | |
| numberUnit: "Display"} | |
| ]; | |
| var oModel = new sap.ui.model.json.JSONModel(); | |
| oModel.setData({ | |
| modelData : jsonModel | |
| }); | |
| //2. Define a factory method for StandardTile elements (standardTileFactory). | |
| var standardTileFactory = function(sId, oContext) { | |
| //bind all properties from https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.m.StandardTile.html | |
| //except Type which had little effect Code:oTile.setType(sap.m.StandardTileType.Monitor); | |
| //+ include our id from the model as CustomData to the TreeNode | |
| var oTile = new sap.m.StandardTile(sId) | |
| .bindProperty("title",oContext.sPath+"/title") | |
| .bindProperty("info",oContext.sPath+"/info") | |
| .bindProperty("number",oContext.sPath+"/number") | |
| .bindProperty("numberUnit",oContext.sPath+"/numberUnit") | |
| //.bindProperty("icon",oContext.sPath+"/icon") | |
| .addCustomData(new sap.ui.core.CustomData({ | |
| key: "modelId", | |
| value: oContext.oModel.getProperty(oContext.sPath+"/id"), | |
| writeToDom: true})); | |
| //Provide URI for icons | |
| var iconSrc = oContext.oModel.getProperty(oContext.sPath+"/icon"); | |
| if(iconSrc){ | |
| oTile.setIcon(sap.ui.core.IconPool.getIconURI(iconSrc)); | |
| } | |
| //activeIcon does not seem to be used currently. Consider removing for now | |
| var activeIconSrc = oContext.oModel.getProperty(oContext.sPath+"/activeIcon"); | |
| if(iconSrc){ | |
| oTile.setActiveIcon(sap.ui.core.IconPool.getIconURI(activeIconSrc)); | |
| } | |
| return oTile; | |
| }; | |
| //3. Define a method for dynamically populate the TreeNodes of a Tree based on its model (createDynamicTreeNodesFromModel) | |
| function createDynamicTilesFromModel(oTileContainer, modelPath) { | |
| if(oTileContainer.hasModel()==false){ | |
| console.log(oTileContainer + " has no model bound to it. Cannot create Tiles"); | |
| return; | |
| } | |
| oTileContainer.bindAggregation("tiles",modelPath, standardTileFactory); | |
| } | |
| //4. Create an event handler method for when a Tile is clicked | |
| function onMyTileClicked(oControlEvent){ | |
| //COMMON code for all event handlers | |
| var selectedId = oControlEvent.getParameter("id"); | |
| var selectedModelId=null; | |
| var customDataList = oControlEvent.getSource().getCustomData(); | |
| if(customDataList!=null && customDataList.length==1 && customDataList[0].getKey("modelId")){ | |
| modelId = customDataList[0].getValue("modelId"); | |
| }else { | |
| console.log("modelId not bound as CustomData to the TreeNode"); | |
| } | |
| //selectedId now refers to the TreeNode element | |
| //selectedModelId now refers to the id field from the model | |
| //SPECIFIC code for this Tree | |
| //just updates a TextView with the ids we have found. | |
| new sap.m.Shell({ | |
| app : new sap.ui.core.ComponentContainer({ | |
| name : "sap.ui.demo.myFiori" | |
| }) | |
| }).placeAt("content"); | |
| // alert("onTileNodeClicked ModelId:"+modelId + " \nsapui5 component id:"+selectedId); | |
| } | |
| //5a. Create a TileContainer component | |
| //5b. Set the Model of the TileContainer component | |
| var MyTileContainer = new sap.m.TileContainer("MyTileContainer"); | |
| MyTileContainer.setModel(oModel); | |
| //5c. Dynamically create TileNodes from the model | |
| createDynamicTilesFromModel(MyTileContainer, "/modelData"); | |
| //5d. Add event handler to all tiles | |
| //Event handler is a different for each TileContainer) | |
| var tiles = MyTileContainer.getTiles(); | |
| if(tiles!=null && tiles.length>=1){ | |
| for ( var i = 0; i < tiles.length; i++) { | |
| tiles[i].attachPress(onMyTileClicked); | |
| } | |
| } | |
| new sap.m.App({ | |
| pages: [ | |
| new sap.m.Page({ | |
| enableScrolling: false, | |
| showHeader: true, | |
| headerContent: [ | |
| ], | |
| title: "Customer Master", | |
| content: [ MyTileContainer ] | |
| }) | |
| ] | |
| }).placeAt("content"); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment