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>UI5 Demo</title>
​
        <script id="sap-ui-bootstrap" 
                src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
                data-sap-ui-theme="sap_bluecrystal"
                data-sap-ui-libs="sap.m"
                data-sap-ui-bindingSyntax="complex">
        </script>
​
​
        <!-- XML-based view definition -->
        <script id="view1" type="sapui5/xmlview">
          <mvc:View
            controllerName="local.controller"
            xmlns:mvc="sap.ui.core.mvc"
            xmlns="sap.m">
              <Table 
                items="{/items}" 
                headerText="Example Results">
                  <columns>
                    <Column>
                      <Text text="Selected?" />
                    </Column>
                    <Column>
                      <Text text="ID" />
                    </Column>
                    <Column>
                      <Text text="Description" />
                    </Column>
                  </columns>
                  <items>
                    <ColumnListItem>
                      <cells>
                      
                      
                        <!--
                        
                        This is how I'd like to set selected in the view
                        
                        
                        <CheckBox text="Sample" 
                          selected="{= f(local.controller.checkItems, null, ${id}) }" />
                        
                        
                        Replace the <CheckBox /> below with this one to see how it fails
                        
                        -->
                        
                        
                        <CheckBox text="Sample"  />
                        
                        <Text text="{id}" />
                        <Text text="{desc}" />
                      </cells>
                    </ColumnListItem>
                  </items>
                </Table>
            </mvc:View> 
        </script>
​
        <script>
            sap.ui.controller("local.controller", {
                
                onInit: function(oEvent) {
                  var rows = [
                    { id: 1, desc: "Row 1" },
                    { id: 2, desc: "Row 2" },
                    { id: 3, desc: "Row 3" },
                    { id: 4, desc: "Row 4" }
                  ];
                  this.getView().setModel(
                    new sap.ui.model.json.JSONModel({items: rows})
                  );
                  
                  this.selectionsFromAnotherDataSource = [
                    2, 4
                  ]; 
                  
                  console.log(this.checkItems(1)); // false
                  console.log(this.checkItems(2)); // true
                  console.log(this.checkItems(3)); // false
                  console.log(this.checkItems(4)); // true
                }, 
              
                checkItems: function(itemId) {
                  if (this.selectionsFromAnotherDataSource.indexOf(itemId) > -1) {
                    return true;
                  } else {
                    return false;
                  }
                }
​
            });
            
            // 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

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

Dismiss x
public
Bin info
anonymouspro
0viewers