Created
August 18, 2016 06:02
-
-
Save gbvaibhav/d1b24c763ecebef4ff73fdf74c6fa3e7 to your computer and use it in GitHub Desktop.
SAPUI5 List Example with dynamic css gbvaibhav UI5 List example with local JSON model and dynamic css // source http://jsbin.com/resuta
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 dynamic css" /> | |
| <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 dynamic css gbvaibhav</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> | |
| <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:[ { day:"Monday", color:"R"}, | |
| { day:"Tuesday", color:"B" }, | |
| { day:"Wednesday", color:"G"}, | |
| { day:"Thursday", color:"R" }, | |
| { day:"Friday", color:"B"}, | |
| { day:"Saturday", color:"G"} ] | |
| }; | |
| var model = new sap.ui.model.json.JSONModel(data); | |
| var text = new sap.m.Text({ | |
| text:"{day}" | |
| }); | |
| var oDataTemplate = new sap.ui.core.CustomData({key:"Colour", writeToDom:true}); | |
| oDataTemplate.bindProperty("value", "color"); | |
| text.addCustomData(oDataTemplate); | |
| list.bindAggregation("items",{ | |
| path:"/results", | |
| template:new sap.m.ColumnListItem({ | |
| cells:[ | |
| text | |
| ] | |
| }) | |
| }); | |
| list.setModel(model); | |
| var page = new sap.m.Page({ | |
| title:"SAPUI5 Table Example", | |
| content:[ | |
| list | |
| ] | |
| }); | |
| // finally place the App into the UI | |
| var app = new sap.m.App({ | |
| pages: [page] | |
| }).placeAt("content"); | |
| </script> | |
| <style id="jsbin-css"> | |
| [data-Colour="R"] { | |
| color: red !important; | |
| } | |
| [data-Colour="G"] { | |
| color: green !important; | |
| } | |
| [data-Colour="B"] { | |
| background-color: blue !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='content'></div> | |
| <script id="jsbin-source-css" type="text/css"> [data-Colour="R"] { | |
| color: red !important; | |
| } | |
| [data-Colour="G"] { | |
| color: green !important; | |
| } | |
| [data-Colour="B"] { | |
| background-color: blue !important; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment