Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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 🙂

Labels in this area