CODEWITHSUNDEEP
sapui5
softshipper
softshipper

Reputation: 34061

How to Bind the Property of an Instance?

I created an array of objects: 

buildPayerModel: function() {
    return [
        new SalesPayer("000", "2333", "033.433", "CHF"),
        new SalesPayer("000", "2333", "033.433", "CHF"),
        new SalesPayer("000", "2333", "033.433", "CHF")
    ];
}

and as a model:

this.getView().setModel(this.buildPayerModel(), "Sales")

Now I want to show the data in Table as the following:

<Table id="SalesView" inset="false" items="{ path: '/Sales' }">
    <headerToolbar>
        <Toolbar>
            <Title text="Statistics" level="H2"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column width="12em">
            <Text text="Payer"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="true">
            <Text text="Name"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
            <Text text="Net Value"/>
        </Column>
        <Column hAlign="End">
            <Text text="Currency"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier title="{Sales.id}"/>
                <Text text="{Sales.name}"/>
                <Text text="{Sales.name}"/>
                <Text text="{Sales.name}"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

How to access the property of the instance?

Upvotes: 0

Views: 1253

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

  1. Your buildPayerModel() is not building a model.
  2. The API setModel awaits a "subclass" of sap.ui.model.Model (not an array), and a corresponding model name ("Sales" in your case).
  3. A short binding syntax looks as follows: "{modelName>/propertyName}".
    • The binding is defined inside the curly brackets: { ... }
    • The > is needed when there is a model name.
    • The / at the beginning (right after possible >) indicates absolute binding syntax
    • Without / at the beginning --> "{modelName>childPropertyName}" indicates relative binding syntax. It is relative because such binding cannot be resolved without given context.

Given JSONModel for the "Sales", and a SalesPayer instance contains direct properties such as name and id, here is a fix for you:

buildPayerModel: function() {
    return new /*sap.ui.model.json.*/JSONModel([
        new SalesPayer("000", "2333", "033.433", "CHF"),
        new SalesPayer("000", "2333", "033.433", "CHF"),
        new SalesPayer("000", "2333", "033.433", "CHF")
    ]);
},

Somewhere in the same controller:

this.getView().setModel(this.buildPayerModel(), "Sales")

XMLView:

<Table id="SalesView" inset="false" items="{Sales>/}">
    <headerToolbar>
        <Toolbar>
            <Title text="Statistics" level="H2"/>
        </Toolbar>
    </headerToolbar>
    <columns>
        <Column width="12em">
            <Text text="Payer"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="true">
            <Text text="Name"/>
        </Column>
        <Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
            <Text text="Net Value"/>
        </Column>
        <Column hAlign="End">
            <Text text="Currency"/>
        </Column>
    </columns>
    <items>
        <ColumnListItem>
            <cells>
                <ObjectIdentifier title="{Sales>id}"/>
                <Text text="{Sales>name}"/>
                <Text text="{Sales>name}"/>
                <Text text="{Sales>name}"/>
            </cells>
        </ColumnListItem>
    </items>
</Table>

Upvotes: 1

Rafael L&#243;pez Mart&#237;nez
Rafael L&#243;pez Mart&#237;nez

Reputation: 2265

setModel() gets a model as first parameter, not a plain JSON Object or Array. Furthermore, the second parameter is the model name, if you name it as "Sales", you must use "Sales>" in your bindings. Then, remember: 1. Use the "/" at the begining when building a path from the root of the model. 2. Avoid the "/" at the begining if you are binding a path relative to another context (Let's say the context of each row of the table)

Try something like this:

<!DOCTYPE html>
<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_belize_plus'
			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">
  			<Table id="SalesView" inset="false" items="{ path: 'Sales>/players' }">
          <headerToolbar>
              <Toolbar>
                  <Title text="Statistics" level="H2"/>
              </Toolbar>
          </headerToolbar>
          <columns>
              <Column width="12em">
                  <Text text="Payer"/>
              </Column>
              <Column minScreenWidth="Tablet" demandPopin="true">
                  <Text text="Name"/>
              </Column>
              <Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
                  <Text text="Net Value"/>
              </Column>
              <Column hAlign="End">
                  <Text text="Currency"/>
              </Column>
          </columns>
          <items>
              <ColumnListItem>
                  <cells>
                      <ObjectIdentifier title="{Sales>id}"/>
                      <Text text="{Sales>name}"/>
                      <Text text="{Sales>name}"/>
                      <Text text="{Sales>name}"/>
                  </cells>
              </ColumnListItem>
          </items>
      </Table>
  		</mvc:View> 
    </script>


		<script>
			// define a new (simple) Controller type
			sap.ui.controller("my.own.controller", {
				onInit: function(){
				  
					this.getView().setModel(this.buildPayerModel(), "Sales")
				},
				
				buildPayerModel: function() {
          var oModelData = {
            "players": [
              {"id": 001, "name": "Michael Jordan"},
              {"id": 002, "name": "Kobe Bryant"},
              {"id": 003, "name": "LeBron James"}
            ]
          };
          var oModel = new sap.ui.model.json.JSONModel(oModelData)
          return oModel;
        }
			});
	
			// instantiate the View
			var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above
			
			// put the View onto the screen
			myView.placeAt('content');
		</script>
	
	</head>
	<body id='content' class='sapUiBody'>
	</body>
</html>

Upvotes: 1

Related Questions