Create Fiori App in Business Application Studio us...

jeffrey_towell2 · ‎02-12-2021

Introduction

While getting access to a trial account to try/learn Business Application Studio(BAS) is easy, not everyone will have a SAP backend system they can link to to supply data to the BAS environment. A publicly available odata service called Northwind is available and can be used for this. While in this blog I will describe the steps to use Northwind in BAS there is no reason the concepts herein could not be easily adapted for use in other IDEs.

Destination

To use the Northwind service your SAP Cloud Platform environment must know where this service "lives". This is done by creating a destination from the SCP cockpit.

Click on "New Destination" to create the new destination called "Northwind" and use the configuration settings as shown above.

Note that when I did this it took a while for the destination to successfully respond to the "check connection button". If this is the case for you please see:

Setting Northwind as a destination for Business Application Studio

Data Structure

Before writing an app we need to understand the data structure of the service we are using. In our case we will be looking at a small subset of what is available in the Northwind service.

The metadata of the Northwind service can be viewed here:

https://services.odata.org/Northwind/Northwind.svc/$metadata

We are interested in only 3 objects in part 1. The "Orders", "Order_Details" and "Product" entities.

We want to create a master-detail app where the master object is Orders:

https://services.odata.org/V2/Northwind/Northwind.svc/Orders

Looking at the first order in the list (10248) we can link to its order details via the navigation property (association) "Order_Details":

https://services.odata.org/V2/Northwind/Northwind.svc/Orders(10248)/Order_Details

As you can see this order contains 3 products. Looking at the first product (ProductID = 11) we can link to the Product entity via the association "Product":

https://services.odata.org/V2/Northwind/Northwind.svc/Orders(10248)/Order_Details(OrderID=10248,Prod...

Visually this can be viewed as:

Create Freestyle App from Template

Now we run through the wizard to create an app from template. If you are not using BAS as your IDE this step will need to be adapted accordingly.

Click on "Start from Template" on the Welcome tab as you come into BAS

On the next screen choose "SAP Fiori Freestyle Project" and hit "Start".

Note that SAP will be combining this Freestyle template into the "SAP Fiori application" template so don't worry if your Freestyle template option has the word "Deprecated" after it. Just ignore it for this exercise.

[If it is removed or you simply want to use the new template then go the following blog and then return to the "Adapting Output" section of this blog below to continue:

Northwind Freestyle app with Business Application Studio’s new “SAP Fiori application” template opti...

Set target running environment to "Cloud Foundry".

Select "SAP Fiori Master-Detail Application" and hit "Next".

Set a suitable project name:

Set as Standalone Approuter:

Set Basic Attributes:

Set an application title:

Configure the services as follows and hit next:

The Object Collection screen assumes you have only 2 entities - one for master and one for detail. In our case the Northwind order details view contains IDs like product ID but not the product description. As such we need to link to a 3rd view (Products) to get the description. Because of this it is easier to fill the object collection screen fields that we are uncertain of with anything (because these fields are mandatory) and then change the resulting code to suite our purposes. I have completed this screen as follows:

On the popup select "Add to Workspace".

Adapting Output

If we now run the app we can see what the wizard has created:

From this starting point we can adapt the code to fit our purposes.

Lets start by changing the following values in the i18n.properties file:

masterTitleCount=Northwind Orders ({0})

detailLineItemTableHeadingCount=Products List ({0})

priceTitle=Customer ID

detailLineItemTableIDColumn=Product

detailLineItemTableUnitNumberColumn=Price

Master View

Northwind does not have a rolled up price at order level so we will not have prices in our master view. So lets add customer number at this level. This means removing the number and numberUnit fields from our master list and adding customer ID as an "intro" in the list item. After doing this the <items> tag in our Master.view.xml looks as follows:

<items>

	<ObjectListItem

		type="Navigation"

		press=".onSelectionChange"

		title="{OrderID}"

	   	intro="{CustomerID}">

	</ObjectListItem>

</items>

Our Master view now displays as follows:

Detail View

We will add the customer ID at the top of the detail view. This will come through from the master view instead of price. To do this change the contents of the <semantic:headerContent> tag in Detail.view.xml to:

<semantic:headerContent>

	<ObjectAttribute title="{i18n>priceTitle}" text="{CustomerID}"/>

</semantic:headerContent>

For The first column in our detail view table we want the product ID and product description. Keep in mind that as mentioned before we will need to link to the Product view to get the product description as it is not at order details level.

For each product we will show the relevant price and hard code a currency as this is not supplied in order details.

To achieve all this we will use a Smart List. So replace the <table> tag and everything within it in Detail.view.xml with the following:

<smartList:SmartList id="smartProductList" smartFilter="smartFilterBar" listBindingPath="Order_Details" 

           expandFields="Product" header="Products List" showRowCount="true" showFullScreenButton="true" 

           enableAutoBinding="true">

           <smartList:listItemTemplate>

               <StandardListItem id="listTemplate" type="Navigation"   press="handleListItemPress" 

                                 title="{ProductID}" 

                                 info="{= ${UnitPrice} + ' €' }" description="{Product/ProductName}" />

           </smartList:listItemTemplate>

</smartList:SmartList>

For the above code to work make sure you have added the "smartList" XML namespace to the <mvc:View > tag at the top of the detail view:

<mvc:View

...

    xmlns:smartList="sap.ui.comp.smartlist"

...>

Output

Conclusion

It is possible to use Northwind as an odata provider to create Fiori apps in Business Application Studio. The code above can be used as a starting point for learning Fiori in BAS. In part 2 we do just that by adding a customer info popup to the detail screen.

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