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 name="description" content="UI5 MVC example:sap.ui.table.Table" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    
    <title>UI5 MVC example:sap.ui.table.Table</title>
    
    <!-- Load UI5, select gold reflection theme and the "commons" control library -->
    <script id='sap-ui-bootstrap' type='text/javascript'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>
    
    <script>
        /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
        
        // define a new (simple) Controller type
        sap.ui.controller("my.own.controller", {
            
            // implement an event handler in the Controller
            doSomething: function() {
                alert("Hello World!");
            }
        });
        
        
        // define a new (simple) View type
        // ...alternatively this can be done in an XML file without JavaScript!
        sap.ui.jsview("my.own.view", {
            
            // define the (default) controller type for this View
            getControllerName: function() {
                return "my.own.controller";
            },
            
            // defines the UI of this View
            createContent: function(oController) {
                //Create an instance of the table control
                var oTable = new sap.ui.table.Table({
                    title: "Table Example",
                    selectionMode: sap.ui.table.SelectionMode.Single
                });
                
                //Define the columns and the control templates to be used
                var oColumn = new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "Last Name"}),
                    template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
                    sortProperty: "lastName",
                    filterProperty: "lastName",
                    width: "200px"
                });
                var oCustomMenu = new sap.ui.commons.Menu();
                oCustomMenu.addItem(new sap.ui.commons.MenuItem({
                    text:"Custom Menu",
                    select:function() {
                        alert("Custom Menu");
                    }
                }));
                oColumn.setMenu(oCustomMenu);
                oTable.addColumn(oColumn);
                oTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "First Name"}),
                    template: new sap.ui.commons.TextField().bindProperty("value", "name"),
                    sortProperty: "name",
                    filterProperty: "name",
                    width: "100px"
                }));
                oTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "Checked"}),
                    template: new sap.ui.commons.CheckBox().bindProperty("checked", "checked"),
                    sortProperty: "checked",
                    filterProperty: "checked",
                    width: "75px",
                    hAlign: "Center"
                }));
                oTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "Web Site"}),
                    template: new sap.ui.commons.Link().bindProperty("text", "linkText").bindProperty("href", "href"),
                    sortProperty: "linkText",
                    filterProperty: "linkText"
                }));
                oTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "Gender"}),
                    template: new sap.ui.commons.ComboBox({items: [
                        new sap.ui.core.ListItem({text: "female"}),
                        new sap.ui.core.ListItem({text: "male"})
                    ]}).bindProperty("value","gender"),
                    sortProperty: "gender",
                    filterProperty: "gender"
                }));
                oTable.addColumn(new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({text: "Rating"}),
                    template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rating"),
                    sortProperty: "rating",
                    filterProperty: "rating"
                }));
                oTable.bindRows("/modelData");
              
                //Create a panel instance
                var oPanel = new sap.ui.commons.Panel();
                oPanel.addContent(oTable);
​
                return oPanel;
            }
        });
        
        
        
        /*** THIS IS THE "APPLICATION" CODE ***/
        
        // create some dummy JSON data
        var aData = [
            {lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 4},
            {lastName: "Friese", name: "Andy", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 2},
            {lastName: "Mann", name: "Anita", checked: false, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 3},
            {lastName: "Schutt", name: "Doris", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 4},
            {lastName: "Open", name: "Doris", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 2},
            {lastName: "Dewit", name: "Kenya", checked: false, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 3},
            {lastName: "Zar", name: "Lou", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 1},
            {lastName: "Burr", name: "Tim", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 2},
            {lastName: "Hughes", name: "Tish", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 5},
            {lastName: "Lester", name: "Mo", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 3},
            {lastName: "Case", name: "Justin", checked: false, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 3},
            {lastName: "Time", name: "Justin", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 4},
            {lastName: "Barr", name: "Gaye", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 2},
            {lastName: "Poole", name: "Gene", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 1},
            {lastName: "Ander", name: "Corey", checked: false, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 5},
            {lastName: "Early", name: "Brighton", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 3},
            {lastName: "Noring", name: "Constance", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 4},
            {lastName: "Haas", name: "Jack", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 2},
            {lastName: "Tress", name: "Matt", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "male", rating: 4},
            {lastName: "Turner", name: "Paige", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", gender: "female", rating: 3}
        ];
        
        // instantiate the View
        var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"my.own.view"});
        
        // create a Model and assign it to the View
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({modelData: aData});
        console.log(oModel.getJSON());
        myView.setModel(oModel);
        
        // put the View onto the screen
        myView.placeAt('content');      
    </script>
    
    </head>
    <body class='sapUiBody'>
        <div id='content'></div>
    </body>
</html>
Output

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

Dismiss x
public
Bin info
mryqupro
0viewers