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
  • …
 
<html>
    <head>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta charset="utf-8">
​
        <title>MVC with XmlView</title>
​
        <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
        <script id='sap-ui-bootstrap'
            src='https://sapui5.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>
​
​
        <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
​
        <!-- define a new (simple) View type as an XmlView
         - using data binding for the Button text
         - binding a controller method to the Button's "press" event
         - also mixing in some plain HTML
         note: typically this would be a standalone file -->
​
        <script id="view1" type="sapui5/xmlview">
        <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
            <Page>
            <Table items="{/Orders}" updateFinished="onTableUpdateFinished">
          <columns>
              <Column >
                  <Text text="My Value From OData"/>
              </Column>
              <Column>
                  <Text text="My Value From AJAX"/>
              </Column>
          </columns>
          <items>
              <ColumnListItem>
                <cells>
                  <ObjectIdentifier title="{CustomerID}"/>
                  <ObjectIdentifier text="{parts:[{path:'CustomerID'}, {path:'myOtherModel>/'}], formatter: '.myFormatter'}"/>
                </cells>
            </ColumnListItem>
          </items>
        </Table>
            </Page>
        </mvc:View> 
    </script>
​
​
        <script>
            // define a new (simple) Controller type
            sap.ui.controller("my.own.controller", {
              onInit: function(){
                  var myOtherModel = new sap.ui.model.json.JSONModel();
                  this.getView().setModel(myOtherModel, "myOtherModel");
                  
                  //Here your AJAX call to get the data from a POST request
                    $.ajax({
                      type: "GET",
                      url: 'https://jsonplaceholder.typicode.com/posts/1',
                      success: this.ajaxSuccess.bind(this)
                    });
                  
                  //Let's simulate that there was a success receiving the following data
                  var data = {
                    VINET: {
                      message: "VINET Rocks!!"
                    },
                    WARTH: {
                      message: "WARTH is good company!!"
                    },
                    RICSU: {
                      message: "RICSU I don't like"
                    },
                    HANAR: {
                      message: "HANAR was my first customer"
                    }
                  }
                  //this.ajaxSuccess(data);
                },
                
                ajaxSuccess: function(data){
                  console.log(data);
                  this.getView().getModel("myOtherModel").setData(data)
                },
                
                myFormatter: function(sCustomerID, otherModelData){
                  // This formatter will be executed for each table row. 
                  // In the first parameter, the value binded in the first column
                  // In the second parameter, the node you want of your second model (in this case the root node)
                  
                  //do whatever you want here and return a string for the 'text' property in this case
                  if(sCustomerID === 'VINET' || sCustomerID === 'WARTH'){
                    // If there is a node in your second model with a node for the given Customer ID, then return the message into it
                    return otherModelData.title;
                  }
                  else if(sCustomerID === 'RICSU' || sCustomerID === 'HANAR'){
                    return otherModelData.body;
                  }
                  //Otherwise return empty string
                  return "";
                }
            });
            
            
    
            /*** THIS IS THE "APPLICATION" CODE ***/
            // create a Model and assign it to the View
            // Using here the HEROKU Proxy to avoid a CORS issue
            var uri = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc"; // local proxy for cross-domain access
            var oNorthwindModel = new sap.ui.model.odata.ODataModel(uri, {
                maxDataServiceVersion: "2.0"
            }); 
            // instantiate the View
            var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
            // Set the OData Model
            myView.setModel(oNorthwindModel);
            
            
            myView.placeAt('content');
        </script>
    
    </head>
    <body id='content' class='sapUiBody'>
    </body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers