How to Bind the Property of an Instance?

Question

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?

Answer 1

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>