Created
August 30, 2015 11:48
-
-
Save anonymous/847dd8f7076b84ea9f69 to your computer and use it in GitHub Desktop.
Mobile App with data-bound List object list with long text // source http://jsbin.com/ficap/2
This file contains hidden or 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="object list with long text" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <title>Mobile App with data-bound List</title> | |
| <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> | |
| <!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme --> | |
| <script type="text/javascript"> | |
| // create the data | |
| // create some dummy JSON data | |
| var data = { | |
| names: [ | |
| {firstName: "Peter", lastName: "Mueller"}, | |
| {firstName: "Petra", lastName: "Maier"}, | |
| {firstName: "Thomas", lastName: "Smith"}, | |
| {firstName: "John", lastName: "Williams"}, | |
| {firstName: "Maria", lastName: "Jones"} | |
| ] | |
| }; | |
| // create a Model with this data | |
| var model = new sap.ui.model.json.JSONModel(); | |
| model.setData(data); | |
| // create the UI | |
| // create a List control | |
| var list = new sap.m.List({ | |
| headerText:"Names" | |
| }); | |
| // bind the List items to the data collection | |
| list.bindItems({ | |
| path : "/names", | |
| sorter : new sap.ui.model.Sorter("lastName"), | |
| template : new sap.m.ObjectListItem({ | |
| title: "{lastName}", | |
| number: "5", | |
| firstStatus: new sap.m.ObjectStatus({text: "High"}), | |
| attributes:[new sap.m.ObjectAttribute({text:"Long text to be displayed here as we need to test the wrapping property of object listitem in the list which is there in the page"})] | |
| }) | |
| }); | |
| // create the page holding the List | |
| var page1 = new sap.m.Page({ | |
| title: "List Page", | |
| content : list | |
| }); | |
| // create the detail page | |
| var page2 = new sap.m.Page("page2", { | |
| title: "Detail Page", | |
| showNavButton: true, | |
| navButtonPress: function(){ | |
| app.back(); | |
| }, | |
| content : [ | |
| new sap.ui.layout.form.SimpleForm({ | |
| title: "Details for {firstName} {lastName}", | |
| content: [ | |
| new sap.m.Label({text: "First Name"}), | |
| new sap.m.Text({text: "{firstName}"}), | |
| new sap.m.Label({text: "Last Name"}), | |
| new sap.m.Text({text: "{lastName}"}) | |
| ] | |
| }) | |
| ] | |
| }); | |
| // create a mobile App holding the pages and place the App into the HTML document | |
| var app = new sap.m.App({ | |
| pages: [page1, page2] | |
| }).placeAt("content"); | |
| // set the model to the App; it will be propagated to the children | |
| app.setModel(model); | |
| </script> | |
| </head> | |
| <body id="content" class="sapUiBody"> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta name="description" content="object list with long text" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
| <title>Mobile App with data-bound List</title> | |
| <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> | |
| <\!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme --> | |
| <script type="text/javascript"> | |
| // create the data | |
| // create some dummy JSON data | |
| var data = { | |
| names: [ | |
| {firstName: "Peter", lastName: "Mueller"}, | |
| {firstName: "Petra", lastName: "Maier"}, | |
| {firstName: "Thomas", lastName: "Smith"}, | |
| {firstName: "John", lastName: "Williams"}, | |
| {firstName: "Maria", lastName: "Jones"} | |
| ] | |
| }; | |
| // create a Model with this data | |
| var model = new sap.ui.model.json.JSONModel(); | |
| model.setData(data); | |
| // create the UI | |
| // create a List control | |
| var list = new sap.m.List({ | |
| headerText:"Names" | |
| }); | |
| // bind the List items to the data collection | |
| list.bindItems({ | |
| path : "/names", | |
| sorter : new sap.ui.model.Sorter("lastName"), | |
| template : new sap.m.ObjectListItem({ | |
| title: "{lastName}", | |
| number: "5", | |
| firstStatus: new sap.m.ObjectStatus({text: "High"}), | |
| attributes:[new sap.m.ObjectAttribute({text:"Long text to be displayed here as we need to test the wrapping property of object listitem in the list which is there in the page"})] | |
| }) | |
| }); | |
| // create the page holding the List | |
| var page1 = new sap.m.Page({ | |
| title: "List Page", | |
| content : list | |
| }); | |
| // create the detail page | |
| var page2 = new sap.m.Page("page2", { | |
| title: "Detail Page", | |
| showNavButton: true, | |
| navButtonPress: function(){ | |
| app.back(); | |
| }, | |
| content : [ | |
| new sap.ui.layout.form.SimpleForm({ | |
| title: "Details for {firstName} {lastName}", | |
| content: [ | |
| new sap.m.Label({text: "First Name"}), | |
| new sap.m.Text({text: "{firstName}"}), | |
| new sap.m.Label({text: "Last Name"}), | |
| new sap.m.Text({text: "{lastName}"}) | |
| ] | |
| }) | |
| ] | |
| }); | |
| // create a mobile App holding the pages and place the App into the HTML document | |
| var app = new sap.m.App({ | |
| pages: [page1, page2] | |
| }).placeAt("content"); | |
| // set the model to the App; it will be propagated to the children | |
| app.setModel(model); | |
| <\/script> | |
| </head> | |
| <body id="content" class="sapUiBody"> | |
| </body> | |
| </html> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment