Introduction
In part 1 we created a Master-Detail Fiori app using the Northwind odata service.
The resulting output was:
The Customer ID (VINET in above) is an internal code so the actual customer name would be preferable for our app. Given that other customer info would be of use to a user let us create a popup with all the customer details. This popup should be launched when clicking on the Customer ID near the top of the detail page.
Data Structure
The Customer ID comes from the Orders view of Northwind which is the view bound to our Master page.
https://services.odata.org/V2/Northwind/Northwind.svc/Orders
To see the customer details for a particular order (10248 in our example) we follow the Customer association:
https://services.odata.org/Northwind/Northwind.svc/Orders(10248)/Customer
Of course, there is only one customer per order.
Code
Quickview
Let us code the popup using a Quickview.
Under the webapp folder create a subfolder called "QuickView". In this folder we will create the file "QuickView.fragment.xml" with the following code in it:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<QuickView
id="quickView">
<QuickViewPage
icon="sap-icon://building"
title="{CompanyName}"
description="Contact: {ContactName}">
<QuickViewGroup heading="Location Details" >
<QuickViewGroupElement
label="Address"
value="{Address} {City} {Region} {PostalCode} {Country}"/>
</QuickViewGroup>
<QuickViewGroup heading="Contact Details" >
<QuickViewGroupElement
label="Phone"
value="{Phone}"
type="mobile"/>
<QuickViewGroupElement
label="Fax"
value="{Fax}"/>
</QuickViewGroup>
</QuickViewPage>
</QuickView>
</core:FragmentDefinition>Note the field names (in braces {}) match the field names in the Customer view of Northwind.
Detail View
We need to make the Customer ID field in the detail view(Detail.view.xml) clickable by giving it a press event.
Update the <ObjectAttribute> tag within the <semantic:headerContent> tag as follows:
<ObjectAttribute title="{i18n>priceTitle}"
text="{CustomerID}"
active="true"
press="onCustDetails" />Detail controller
Because we will be using a fragment make sure to load the fragment library at the top of Detail.controller.js:
sap.ui.define([
"./BaseController",
"sap/ui/model/json/JSONModel",
"../model/formatter",
"sap/m/library",
"sap/ui/core/Fragment"
], function (BaseController, JSONModel, formatter, mobileLibrary, Fragment) {Then add the event handler onCustDetails and its helper function openQuickView within the controller:
onCustDetails: function (oEvent) {
var oModel = this.getView().getModel();
this.openQuickView(oEvent, oModel);
},
openQuickView: function (oEvent, oModel) {
var oCustID = oEvent.getSource(),
oView = this.getView(),
oContext = oView.getBindingContext();
//Load fragment and add as dependent of this(Detail) view
if (!this._pQuickView) {
this._pQuickView = Fragment.load({
id: oView.getId(),
name: "ns.HTML5Module.QuickView.QuickView",
controller: this
}).then(function (oQuickView) {
oView.addDependent(oQuickView);
return oQuickView;
});
}
this._pQuickView.then(function (oQuickView){
//Set path to Customer
var sPath = `${oContext.getPath()}/Customer`;
//Bind path and model to Quickview
oQuickView.bindElement({ path: sPath, model: oModel.name });
//Set CustID field as the source so that popup launches it
oQuickView.openBy(oCustID);
});
},
This code is commented but in short it:
- Loads the fragment we created
- Gets the current context of the Detail view (Orders)
- Extends the path to point to the "Customer" association
- Binds the model and path to the Quickview
- Sets the customer ID field that is clicked as the source of the Quickview so that the popup "points" to it (see output below)
Output
Conclusion
As predicted at the conclusion of Part 1 we have been able to extend the code created at that point to learn Fiori concepts while leveraging off the Northwind service.
- SAP Managed Tags:
5 Comments
