Skip to Content
Technical Articles
Author's profile photo Jeffrey Towell

Create Fiori App in Business Application Studio using Northwind odata (Part 2)

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      Hi Jeffrey,

      Thanks for your blog.

      I am extending a Fiori Elements List by adding a button. This works ok.

      Now this button launches a QuickView, the same as you describe in your blog, but ended up having the error: TypeError: oQuickView.openBy is not a function.

      Do you know what can be the cause of the error?

      Thanks,

      Javier

       

      pic

      pic

      Author's profile photo Jeffrey Towell
      Jeffrey Towell
      Blog Post Author

      Hard to tell Javier but here are a few thoughts.

       

      • Does the UI5 version you are using have an "openBy" method for sap.m.QuickView ?
      • Are you definitely using sap.m.Quickview in your fragment (sap.ui.ux3.QuickView is deprecated for example) ?

      It must either not see "oQuickview" as sap.m.QuickView or it must be a version that does not have the "openBy" method - or something else I haven't thought of 🙂

       

      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      Thanks for your time, Jeffrey.

      It turned out to be an error in the QuickView itself.

      Javier

      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      Hi Jeffrey,

      Didn't you destroy your fragment somewhere? as i am having duplicate id error when closing and opening up the quickview again.

      Also, field values come from object page entity. What if you needed to apply a path filtering?.I can define a new entityset in the pages path property but not the filter though.

      Thanks,

      Javier

      Author's profile photo JAVIER RUBIO
      JAVIER RUBIO

      Hi again Jeffrey,

      i have followed your steps and the only difference is how i am building the sPath.

      your Customer entity is my HeaderToWorkitem_User associtation ( set of values ):

      var sPath = ( oContext.getPath() + '/HeaderToWorkitem_User' );

      it is not working as expected. It does not stop in the method Workitem_User.

      if i run the same url in gateway client it does stop.

      Do you know why?

       

      thanks again,

      Javier

       

      Â