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>Button example</title>
      
        <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.m"
                data-sap-ui-xx-bindingSyntax="complex">
        </script>
​
​
        <!-- XML-based view definition -->
        <script id="view1" type="sapui5/xmlview">
            <mvc:View
              controllerName="local.controller"
              xmlns:core="sap.ui.core"
              xmlns:f="sap.ui.layout.form"
              xmlns:l="sap.ui.layout"
              xmlns:mvc="sap.ui.core.mvc"
              xmlns="sap.m">
              <Text class="sapUiSmallMarginBottom" text="{parts: [{path: 'data>/key1'}, {path: 'data>/key2'}, {path: 'data>/foo'}], formatter: '.formatter'}"/>
              <Text text="{parts: [{path: 'data>/key1'}, {path: 'data>/key2'}, {path: 'data>/foo'}], formatter: 'local.controller.prototype.formatter'}"/>
              <Text class="sapUiSmallMarginTop" text="{parts: [{path: 'data>/key1'}, {path: 'data>/key2'}, {path: 'data>/foo'}], formatter: 'local.formatter.myFormatterFunction'}"/>
            </mvc:View> 
        </script>
          
        <script>
            sap.ui.define("local.formatter",[],function(){
              return {
                myFormatterFunction: function(){
                  if(this instanceof sap.m.Text){
                    return "'this' is an instance of sap.m.Text control because the binding references the formatter class directly"
                  }
                }
              };
            },true);
          
            sap.ui.define("local.controller",["sap/ui/core/mvc/Controller"],function(Controller){
              return Controller.extend("local.controller",{
                onInit: function(){
                  var oData = {
​
                    key1: "val1",
                    key2: "val2",
                    foo: "X"
                  };
                  this.getView().setModel(new sap.ui.model.json.JSONModel(oData), "data");
                },
              
                formatter: function(sText1, sText2, sFoo){
                  if(this instanceof sap.m.Text){
                    return "'this' is an instance of sap.m.Text because the formatter is specified using the object prototype";
                  } else {
                    return "'this' is an instance of the controller because the formatter is specified using '.method' which will look for the method name belonging to your controller and call it specifying 'this' object as controller instance";
                  }
                  /*
                  if(sFoo === "X"){
                    return sText1;
                  }else{
                    return sText2;
                  }
                  */
                }
              });
            });
    
            // Controller definition
            /*
            sap.ui.controller("local.controller", {
              
              onInit: function(){
                var oData = {
                  
                  key1: "val1",
                  key2: "val2",
                  foo: "X"
                };
                this.getView().setModel(new sap.ui.model.json.JSONModel(oData), "data");
              },
              
              formatter: function(sText1, sText2, sFoo){
                console.log(this);
                if(sFoo === "X"){
                  return sText1;
                }else{
                  return sText2;
                }
              }
    
            });
            */
           
            // 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">
        <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
ijmacgregorpro
0viewers