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>
        <script id="sap-ui-bootstrap"
            type="text/javascript"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_belize"
            data-sap-ui-xx-bindingSyntax="complex">
        </script>
        <!-- https://www.nabisoft.com/tutorials/sapui5/sapui5-single-file-template-using-xmlviews-controllers-fragments-and-custom-controls-for-bug-illustrations-support-requests-or-demos -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
                <List
                    title="Los Optionales"
                    id="SubsList"
                    width="auto"
                    items="{
                      path: '/peeps',
                      sorter: {
                        path: 'className',
                        group: true
                      },
                      groupHeaderFactory : '.createGroupHeader'
                    }"
                    class="sapUiResponsiveMargin">
                            <items>
                                <StandardListItem
                                        title="{firstName} {lastName}"
                                        type="Active"
                                />
                            </items>
                            <layoutData>
                                <FlexItemData growFactor="1" />
                            </layoutData>
                        </List>
​
            </mvc:View>
        </script>
        <script>
            sap.ui.getCore().attachInit(function() {
                "use strict";
                sap.ui.define([
                    "jquery.sap.global",
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/json/JSONModel",
                    "sap/ui/model/BindingMode",
                    "sap/m/GroupHeaderListItem"
                ], function (jQuery, Controller, JSONModel, BindingMode, GroupHeaderListItem) {
                     "use strict";
                    return Controller.extend("MyController", {
                        onInit : function() {
                          this.getView().setModel(new JSONModel({
                            "peeps":  [
                                  {className: "Coding 101", firstName: "Alan", lastName: "Turing"},
                                  {className: "Coding 101", firstName: "Ada", lastName: "Lovelace"},
                                  {className: "Combat 101", firstName: "D", lastName: "Trump"},
                                  {className: "Combat 101", firstName: "Spartacus", lastName: ""},
                                  {className: "Combat 101", firstName: "Tasmanian", lastName: "Devil"}
​
                            ]  
                          }));
                        },
                        createGroupHeader : function(group) {
                            return new GroupHeaderListItem({ 
                              "title" : group.key                      
                            }).addStyleClass("sapMH1Style");
                        }
                    });
                });
​
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
            });
        </script>
        
    </head>
    <body class="sapUiBody" id="content" role="application">
    </body>
</html>
Output

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

Dismiss x
public
Bin info
matbttpro
0viewers