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 charset="UTF-8">
​
        <title>OData Expand and Select with XmlView</title>
        <meta name="description" content="OData Expand and Select with XmlView" />
​
        <script id="sap-ui-bootstrap" 
                src="https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-xx-bindingSyntax="complex">
        </script>
​
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" 
controllerName="XMLViewController"  xmlns:html="http://www.w3.org/1999/xhtml">
    <Shell id="shell" showLogout="false">
        <app>
            <App id="app" defaultTransitionName="slide">
                <pages>
                    <Page id="page1" title="Products by Category" enableScrolling="false">
                        <content>
                            <TileContainer id="tc" editable="false" allowAdd="false" tiles="{NW>/Categories}">
                                <tiles>
                                    <StandardTile title="{NW>CategoryName}" info="{NW>Description}" press="_handleTileTap" icon="sap-icon://action" number="{NW>CategoryID}" numberUnit="Products"></StandardTile>
                                </tiles>
                            </TileContainer>
                        </content>
                    </Page>
                    <Page id="page2">
                        <content>
                            <ObjectHeader intro="{NW>Description}" introActive="false" titleActive="false" iconActive="false"></ObjectHeader>
                            <IconTabBar id="iconTabBar">
                                <items>
                                    <IconTabFilter count="{NW>CategoryID}" icon="sap-icon://hint">
                                        <content>
                                            <List id="ProductList" noDataText="No data" items="{path:'NW>Products', parameters:{expand:'Supplier',select:'ProductName,QuantityPerUnit,UnitPrice,Supplier'}}">
                                                <items>
                                                    <ObjectListItem counter="0" title="{NW>ProductName}" number="{NW>UnitPrice}" numberUnit="EUR" markFavorite="false" markFlagged="false" showMarkers="false">
                                                        <attributes>
                                                            <ObjectAttribute text="{NW>Supplier/CompanyName}" active="false"></ObjectAttribute>
                                                            <ObjectAttribute text="{NW>QuantityPerUnit}" active="false"></ObjectAttribute>
                                                        </attributes>
                                                    </ObjectListItem>
                                                </items>
                                            </List>
                                        </content>
                                    </IconTabFilter>
                                </items>
                            </IconTabBar>
                        </content>
                        <customHeader>
                            <Bar>
                                <contentLeft>
                                    <Button id="myButton" icon="sap-icon://home" press="_handleHomeTap"></Button>
                                </contentLeft>
                                <contentMiddle>
                                    <Label text="{CategoryName}"></Label>
                                </contentMiddle>
                            </Bar>
                        </customHeader>
                        <footer>
                            <Bar translucent="true">
                                <contentLeft>
                                    <Button icon="sap-icon://action-settings"></Button>
                                </contentLeft>
                            </Bar>
                        </footer>
                    </Page>
                </pages>
            </App>
        </app>
    </Shell>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("XMLViewController", {
​
        onInit: function(oEvent) {
            var url = "http://services.odata.org/V3/Northwind/Northwind.svc/";
​
            var oModel = new sap.ui.model.odata.ODataModel(url, true);
            this.sName = 'NW';
            sap.ui.getCore().setModel(oModel, this.sName);
        },
​
        _handleTileTap: function(oEvent) {
            this.byId("app").to("__xmlview0--page2");
            this.byId("page2").setBindingContext(oEvent.getSource().getBindingContext(this.sName), this.sName);
        },
​
        _handleHomeTap: function(oEvent) {
            this.byId("app").back();
        },
​
        productCount: function(oValue) {
            //return the number of products linked to Category // async call only to get $count
            if (oValue) {
                var sPath = this.getBindingContext(this.sName).getPath() + '/Products';
                var oBindings = this.getModel(this.sName).bindList(sPath);
                return oBindings.getLength();
            }
​
        }
​
        });
​
    // Instantiate the View, assign a model and display
    var oView = sap.ui.xmlview({
        viewContent: jQuery("#view1").html()
    });
​
    oView.placeAt("content");
</script>
​
    </head>
​
    <body class="sapUiBody" role="application" id="content">
    </body>
</html>
​
 
​
 
​
Output 300px

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

Dismiss x
public
Bin info
jasper07pro
0viewers