Step 19: Aggregation Binding

Now that we have established a good structure for our app, it's time to add some more functionality. We start exploring more features of data binding by adding some invoice data in JSON format that we display in a list below the panel.

Preview

^{A list of invoices is displayed below the panel}

You can access the live preview by clicking on this link: 🔗 Live Preview of Step 19.

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 19.

Coding

webapp/model/localInvoices.json (New)

We create a new folder model in our app project and place the new localInvoices.json file in it. We describe the following JSON data in the file:

{
  "Invoices": [
    {
      "ProductName": "Pineapple",
      "Quantity": 21,
      "ExtendedPrice": 87.2,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-04-01T00:00:00",
      "Status": "A"
    },
    {
      "ProductName": "Milk",
      "Quantity": 4,
      "ExtendedPrice": 10,
      "ShipperName": "ACME",
      "ShippedDate": "2015-02-18T00:00:00",
      "Status": "B"
    },
    {
      "ProductName": "Canned Beans",
      "Quantity": 3,
      "ExtendedPrice": 6.85,
      "ShipperName": "ACME",
      "ShippedDate": "2015-03-02T00:00:00",
      "Status": "B"
    },
    {
      "ProductName": "Salad",
      "Quantity": 2,
      "ExtendedPrice": 8.8,
      "ShipperName": "ACME",
      "ShippedDate": "2015-04-12T00:00:00",
      "Status": "C"
    },
    {
      "ProductName": "Bread",
      "Quantity": 1,
      "ExtendedPrice": 2.71,
      "ShipperName": "Fun Inc.",
      "ShippedDate": "2015-01-27T00:00:00",
      "Status": "A"
    }
  ]
}

The localinvoices file simply contains five invoices in a JSON format that we can use to bind controls against them in the app. JSON is a very lightweight format for storing data and can be directly used as a data source for OpenUI5 applications.

webapp/manifest.json

We add a new named model invoice to the sap.ui5 section of the descriptor. This time we want a JSONModel, so we set the type to sap.ui.model.json.JSONModel. The uri key is the path to our data relative to the component.

{
  ...
  "sap.ui5": {
    ...
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "ui5.walkthrough.i18n.i18n",
          "supportedLocales": [
            ""
          ],
          "fallbackLocale": ""
        }
      },
      "invoice": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "model/localInvoices.json"
      }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    }
  }
}

With this little configuration our component will automatically instantiate a new JSONModel which loads the invoice data from the localInvoices.json file. Finally, the instantiated JSONModel is put onto the component as a named model invoice. The named model is then visible throughout our app.

webapp/i18n/i18n.properties

In the text bundle we create a new text for a Invoice List title we will need in the view we are about to create.

...
# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=UI5 TypeScript Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

# Invoice List
invoiceListTitle=Invoices

webapp/view/InvoiceList.view.xml (New)

In the view folder, we create a new InvoiceList.view.xml view to display the invoices. We use a list control with the custom header text we only specified in our resource bundle and assign the CSS class sapUiResponsiveMargin to it. The item aggregation of the list we bound to the root path Invoices of the JSON data in our invoice model. And since we defined a named model, we have to prefix each binding definition with the identifier invoice followed by the '>' symbol.

In the items aggregation, we define the template for the list that will be automatically repeated for each invoice of our test data. More precisely, we use an sap/m/ObjectListItem to create a control for each aggregated child of the items aggregation. The title property of the list item is bound to the properties Quantity and ProductName of a single invoice. This is achieved by defining a relative path (without / in the beginning).

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <List
      headerText="{i18n>invoiceListTitle}"
      class="sapUiResponsiveMargin"
      width="auto"
      items="{invoice>/Invoices}" >
      <items>
         <ObjectListItem
            title="{invoice>Quantity} x {invoice>ProductName}"/>
      </items>
   </List>
</mvc:View>

The binding in the list item works, because we have bound the items aggregation via items={invoice>/Invoices} to the invoices.

webapp/view/App.view.xml

In the app view we add a second view and assign it to our newly created InvoiceList view to display our invoices below the panel.

<mvc:View
	controllerName="ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/>
						<mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Conventions

Any files needed for creating models and logic relating to model data are stored in the model folder. This includes grouping, filtering and formatting data
Model file names are lowercased