Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <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://openui5.hana.ondemand.com/resources/sap-ui-core.js" 
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m, sap.ui.layout,sap.ui.core" 
                data-sap-ui-theme="sap_bluecrystal"></script>
        <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
        
        
        <script type="text/javascript">
            
            
            var oListData = [{id: "id-1",text:"Hello World"},
                             {id: "id-2",text:"Hello Universe"}];
            
            var oListModel = new sap.ui.model.json.JSONModel(oListData);
            sap.ui.getCore().setModel(oListModel);
            
            
            // create the main List control
            var list = new sap.m.List({
            });
            
            
            var oCustomItem = new sap.m.CustomListItem({
                content: [
                    new sap.m.Text({
                        text: "{text}"}),
                    new sap.m.Button({
                        text: "btn",
                        press: function(){
                          alert("Pressed the button");
                        }
                    })
                ],
                press: function(){
                  alert("Clicked the list item");
                }
            });
            
            list.bindAggregation("items", "/", oCustomItem);
            
            var page = new sap.m.Page({
                title: "List Page",
                content : list
            });
            
            var app = new sap.m.App({
                pages: [page]
            }).placeAt("content");
            
        </script>
        
    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
DerZykloppro
0viewers