Creating Fiori App running on HANA Cloud Platform with data from SAP MII
Creating Fiori App running on HANA Cloud Platform with data from SAP MII
Applies to- SAP MII14.0SP4, SAP Web IDE 1.14.3
Summary
This document demonstrates how we can create a Fiori App running on HANA Cloud Platform with data coming from SAP MII. The document takes us step by step showing how to create a Fiori App running on HANA Cloud Platform (HCP) with data coming from SAP MII backend.
*Please note I am deferring to explain HCP, HANA Connector, Web IDE, Fiori, SAP MII OData etc. as they can be easily read over internet.
Table of Content
Configuring the HANA Cloud Platform
Introduction to Fiori App (SAP Web IDE)
Conclusion
Configuring the HANA Cloud Platform using HANA Connector
The first step is to setup a destination in HANA Cloud Platform.For this, we need HANA Cloud Connector.
We assume that you have HANA Connector installed and running along with SAP MII system. At this stage, we will create a virtual host and link it to our Internal MII system. From now on, this virtual host on SAP HANA Connector shall act as a window to MII system. Once the resources are added and status shows connected, we are ready to setup a destination on HANA Cloud Platform.
Open HANA Cloud Platform Cockpit with your account. Then, click on Destination on the left. This will load all the destination links (if available) on right hand side panel. Above the list, you will see New Destination button. Click on it, enter the details asked (provide authorization) and save it. (An example shown below, URL in form http://server:port -a virtual name from HANA Connector in snapshot below)
*Similarly, we will setup a destination with URL as http://services.odata.org (No Authentication) which will point to northwind oData service available on internet.
With this destination setup done, we are good to move forward and start our journey into building SAP Fiori App.
Introduction to creating our Fiori App (SAP Web IDE)
SAP MII Prerequisite:
We have created a MII transaction which provide the output (dummy Prod Order details) as
As we move forward, let’s open our SAP Web IDE.
For simplicity sake and interest of space/time; we will create a simple Fiori App (existing template) with northwind odata service and then apply the necessary minimal changes to have our MII application demo up/running.
Why so?
The Fiori Data Connection stage expects a service which returns the workspace with collections. This is not the case with MII service, hence in order to create a demonstrable example, we worked with northwind service approach.
Moving On,
Once the Web IDE is open, we will create a project from Template, choosing SAP Fiori Master Detail Application Type. Click next; provide a project name and Source -> Service URL. This will show the northwind service name description. Choose it, provide the URL as /northwind/northwind.svc. This will generate the northwind service model on right side panel. On next screen, we will complete the template customization and click finish to complete the project creation in your workspace.
We used the above way since it will create the entire project structure and running app for us.
Changes in the Project to fetch data from SAP MII
Open the Component.js file. Replace the Config->Service URL statement with serviceUrl: “/destinations/MII/XMII/IlluminatorOData/” wherein MII is the destination name coming from HCP.
Open neo-app.json file. Replace routes->path as “path”: “/destinations/MII” wherein MII is the destination name.
Replace routes-> target name, description.
Next, we will have to change the binding, so that Master and Detail Screen show up the data coming from SAP MII.
Open the Master Screen under View folder (Master.view.xml) and replace the content tag as
<content>
<List
id=”list”
select=”onSelect”
mode=”{device>/listMode}”
noDataText=”{i18n>masterListNoDataText}”
growing=”true”
growingScrollToLoad=”true” items=”{/Rowset(QueryTemplate=’Transaction Path/Transaction Name’,RowsetId=1)/Row}”>
<items
id=”masterList”>
<ObjectListItem
id=”mainListItem”
press=”onSelect”
type=”{device>/listItemType}”
counter=”0″
title=”{OrderID}”
markFavorite=”false”
markFlagged=”false”
showMarkers=”false”>
<core:ExtensionPoint
name=”extListItemInfo”/>
</ObjectListItem>
</items>
</List>
</content>
Next, we will change the Detail Screen as well to suit our requirement.
Open the Detail Page (Detail.view.xml), delete the IconTabFilter tag with id=2.
Then replace the content tag on the page with below.
<content>
<ObjectHeader
id=”detailHeader”
title=”{OrderID}”
number=”{OrderStatus}”
introActive=”false”
titleActive=”false”
iconActive=”false”>
<attributes
id=”detailAttributes”>
<ObjectAttribute
id=”attribute”
active=”false”>
</ObjectAttribute>
</attributes>
<firstStatus
id=”detailStatus”>
<ObjectStatus
id=”status”
>
</ObjectStatus>
</firstStatus>
</ObjectHeader>
<IconTabBar
id=”idIconTabBar”
expanded=”{device>/isNoPhone}”>
<items
id=”detailsItems”>
<IconTabFilter
id=”iconTabFilter1″
key=”selfInfo”
icon=”sap-icon://hint”>
<content>
<f:SimpleForm
id=”iconTabFilter1form”
minWidth=”1024″
editable=”false”
layout=”ResponsiveGridLayout”
labelSpanL=”3″
labelSpanM=”3″
emptySpanL=”4″
emptySpanM=”4″
columnsL=”1″>
<f:content>
<Label
id=”label2″
text=”OrderID”>
</Label>
<Text
id=”text2″
text=”{OrderID}”
maxLines=”0″>
</Text>
<Label
id=”label3″
text=”StartDate”>
</Label>
<Text
id=”text3″
text=”{StartDate}”
maxLines=”0″>
</Text>
<Label
id=”label4″
text=”EndDate”>
</Label>
<Text
id=”text4″
text=”{EndDate}”
maxLines=”0″>
</Text>
<Label
id=”label5″
text=”Total Quantity”>
</Label>
<Text
id=”text5″
text=”{TotalQty}”
maxLines=”0″>
</Text>
<Label
id=”label6″
text=”Quantity Delivered”>
</Label>
<Text
id=”text6″
text=”{QtyDelivered}”
maxLines=”0″>
</Text>
<core:ExtensionPoint
name=”extIconTabFilterForm1″/>
</f:content>
</f:SimpleForm>
</content>
</IconTabFilter>
<core:ExtensionPoint
name=”extIconTabFilter”/>
</items>
</IconTabBar>
<core:ExtensionPoint
name=”extDetail”/>
</content>
This creates our app ready to run and display the data coming from SAP MII.
In order to deploy it, right click on the project name folder and click Deploy to HANA Cloud Platform. Provide the login credentials, application name and ensure to check the activation state. Click Deploy and it will deploy the app on HCP. Login to HCP to see the application listed under HTML5 application. Click on Application Name and you will find all details about the application ie destination used, URL, Version, Status etc.
If you will click on the URL, it will run the application – deployed on HCP, bringing in the data from SAP MII.
*Please note that to keep things simple and demonstrable, I have changed minimal functionality as to display that SAP MII data can come to Fiori App running on HCP. Hence, the app might not run with all the functionalities but the Master/Detail page main header displays are made working to demonstrate the application. On selection of order on master page, the detail page changes the details of order respectively.
Lot more changes can be done to application to make it much better suited to particular needs.
Conclusion
The above steps show us how we can create the Fiori App deployed on HANA Cloud Platform with data coming from SAP MII. Looking forward to make it more generic/reusable form and share with you all as next update!
Thanking You,
Ruchir
Hi Ruchir,
I am in need of some direction. I have an issue in getting back-end data in HCP hosted application. I have posted a question in community; sharing the link here. will appreciate your assistance.
Regards,
kuntal
Very helpful content to start MII with Fiori App.Good work.
Thanks!!
Hi,
In this scenario SAP cloud connector and SAP MII should be installed on same machine?
Regards,
Rajee Vuta.
Hi Rajee,
No, Cloud connector needs to be installed in machine in your on premise network on the same network where your MII is available.
Regards,
Kuntal Sarkar.
Thanks Kuntal for your response.
I ma trying to implement same scenario.
can any one help.
Regards,
Rajee