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.

ProductCollection.Json:

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
}
]
}

manifest.json:

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”
}
]
}
}

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

<Button
text="Open the dailog"
press="onOpenDialog"
class="sapUiSmallMarginEnd"/>

Fragment:
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}">
<List 
class="sapUiResponsiveMargin"
width="auto"
items="{product>/ProductCollection}" >
<items>
<ObjectListItem
title="{product>ProductName}" number="{product>Quantity}"/> 
</items>
</List>
<beginButton>
<Button text="{i18n>dialogCloseButtonText}" press="onCloseDialog"/>
</beginButton>
</Dialog>
</core:FragmentDefinition>

Controller:
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.

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], 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);
				oView.addDependent(oDialog);
			}
			oDialog.open();
		},
		onCloseDialog: function() {
			this.getView().byId("helloDialog").close();
		}
	});
});

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

Output:
Hit the button.

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

Thank you 🙂