Skip to Content
Author's profile photo Sri Divya

Displaying a list in Dialog box using Aggregation binding in SAP UI5

Fragments are reusable UI parts which do not have any controller.

A fragment is a good choice if we need to reuse certain parts of UI across multiple views with no additional controller logic.

Aggregation binding is used to bind collection of records to a table / list.


JSON is a very lightweight format for storing data and can be directly used as a data source for SAPUI5 applications. Now create a JSON file within the root folder of the application.

Specify the data in the JSON file as below:

“ProductCollection”: [
“ProductName”: “Pineapple”,
“Quantity”: 21
“ProductName”: “Milk”,
“Quantity”: 4
“ProductName”: “Canned Beans”,
“Quantity”: 3
“ProductName”: “Salad”,
“Quantity”: 2
“ProductName”: “Bread”,
“Quantity”: 1


In order access the JSON file through out the application, specify the JSON file URI in the models under sap.ui5 section in the manifest.json / Descriptor file. we specify the type as JSON and URI which is the path to the JSON data to instantiate the JSON Model.

“sap.ui5”: {
“_version”: “1.1.0”,
“rootView”: “opensap.demokit.view.View”,
“dependencies”: {
“minUI5Version”: “1.30”,
“libs”: {
“sap.m”: {}
“models”: {
“i18n”: {
“type”: “sap.ui.model.resource.ResourceModel”,
“settings”: {
“bundleName”: “opensap.demokit.i18n.i18n”
“product”: {
“type”: “sap.ui.model.json.JSONModel”,
“uri”: “ProductCollection.json”
“resources”: {
“css”: [
“uri”: “css/style.css”

In the view define a button with function onOpenDialog and text specified as Open the dailog.

text="Open the dailog"

Create a fragment with in the view folder with name “HelloDialog.fragment.xml”. Define the xml tags with in the assests of fragments specified in the core.

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog id="helloDialog" title="{i18n>productDetails}">
items="{product>/ProductCollection}" >
title="{product>ProductName}" number="{product>Quantity}"/> 
<Button text="{i18n>dialogCloseButtonText}" press="onCloseDialog"/>

Here we are instantiating the fragment by calling sap.ui.xmlfragment method with the following arguments:
By using the ID:
we have defined the ID helloDialog for the Dialog control, and we can access the dialog via the view by calling oView.byId(“helloDialog”).
⦁ By defining the fragment path.

], function(Controller) {
	"use strict";
	return Controller.extend("opensap.demokit.controller.HelloPanel", {
		onOpenDialog: function() {
			var oView = this.getView();
			var oDialog = oView.byId("helloDialog");
			// create dialog lazily
			if (!oDialog) {
				// create dialog via fragment factory
		oDialog = sap.ui.xmlfragment(oView.getId(), "opensap.demokit.view.HelloDialog", this);
		onCloseDialog: function() {

onCloseDialog: We are closing the dailog in this function in hitting the ok button on the fragment.

Hit the button.

You will get a dialog or pop-up on your screen as follows which is your final output.

Thank you 🙂

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.