Created
August 18, 2016 05:28
-
-
Save gbvaibhav/ea07b0b023a3205f6cfd6a85499d8222 to your computer and use it in GitHub Desktop.
SAPUI5 List example with local JSON model and sorting - gbvaibhav
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 name="description" content="UI5 List example with local JSON model and sorting" /> | |
| <meta http-equiv='X-UA-Compatible' content='IE=edge' /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <title>SAPUI5 List Example with sorting gbvaibhav</title> | |
| <!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries --> | |
| <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" | |
| id="sap-ui-bootstrap" | |
| data-sap-ui-libs="sap.m,sap.ui.layout" | |
| data-sap-ui-xx-bindingSyntax="complex" | |
| data-sap-ui-theme="sap_bluecrystal"></script> | |
| <script> | |
| var list = new sap.m.List({ | |
| columns:[ | |
| new sap.m.Column({ | |
| hAlign:sap.ui.core.TextAlign.Center, | |
| header:[ | |
| new sap.m.Text({ | |
| text:"Name" | |
| }) | |
| ] | |
| }) | |
| ] }); | |
| // creating some data for binding | |
| var data = { | |
| results:[ { first:"Rachana" }, | |
| { first:"Vaibhav" }, | |
| { first:"Anoop" }, | |
| { first:"Jk" }, | |
| { first:"Pachu" }, | |
| { first:"ABS" } ] | |
| }; | |
| var model = new sap.ui.model.json.JSONModel(data); | |
| list.bindAggregation("items",{ | |
| path:"/results", | |
| template:new sap.m.ColumnListItem({ | |
| cells:[ | |
| new sap.m.Text({ | |
| text:"{first}" | |
| }) | |
| ] | |
| }) | |
| }); | |
| list.setModel(model); | |
| var decidingFac = null; | |
| var button = new sap.m.Button({ | |
| text:"Sort Name", | |
| press:function(){ | |
| debugger; | |
| var binding = list.getBinding("items"); | |
| var aSorters = []; | |
| var sPath = "first"; | |
| if(decidingFac){ | |
| decidingFac = true; | |
| }else{ | |
| decidingFac = false | |
| } | |
| aSorters.push(new sap.ui.model.Sorter(sPath, decidingFac)); | |
| binding.sort(aSorters); | |
| } | |
| }); | |
| var page = new sap.m.Page({ | |
| title:"SAPUI5 Table Example", | |
| content:[ | |
| list, | |
| button | |
| ] | |
| }); | |
| // finally place the App into the UI | |
| var app = new sap.m.App({ | |
| pages: [page] | |
| }).placeAt("content"); | |
| </script> | |
| </head> | |
| <body> | |
| <div id='content'></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment