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 charset="utf-8" />
        <title>SAPUI5 app</title>
        <script src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
 
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
​
                <ComboBox
                    id="firstComboBox"
                    selectionChange="comboBoxMapping"                    
                    items="{
                        path: '/Categories',
                        sorter: { path: 'CategoryName' }
                    }">
                    <core:Item key="{CategoryID}" text="{CategoryName}" />
                </ComboBox>
​
                <ComboBox
                    id="secondComboBox"
                    items="{
                        path: '/Products',
                        sorter: { path: 'ProductName' }
                    }">
                    <core:Item key="{ProductID}" text="{ProductName}" />
                </ComboBox>
​
​
          </mvc:View>
        </script>
 
        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";
 
                //### Controller ###
                sap.ui.controller("MyController", {
​
                    onInit : function () {
                        var oModel = new sap.ui.model.odata.v2.ODataModel(
                            "https://cors-anywhere.herokuapp.com/" + 
                            "services.odata.org/V2/Northwind/Northwind.svc/");
                        this.getView().setModel(oModel);
                    },
                  
                    comboBoxMapping: function(oEvent) {
                        this.getView().byId("secondComboBox").getBinding("items").filter([
                            new sap.ui.model.Filter(
                                "CategoryID", 
                                "EQ", 
                                oEvent.getParameter("selectedItem").getKey())  
                        ]);
                    }
                  
                });
 
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).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
anonymouspro
0viewers