Skip to Content

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)

/wp-content/uploads/2015/08/1_771805.png

*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

/wp-content/uploads/2015/08/2_771860.png

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.

/wp-content/uploads/2015/08/3_771861.png

*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

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Rajee Vuta

    Hi,

         In this scenario SAP cloud connector and SAP MII should be installed on same machine?

    Regards,

    Rajee Vuta.

    (0) 
    1. Kuntal Sarkar

      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.

      (0) 
      1. Rajee Vuta

        Thanks Kuntal for your response.

        I ma trying to implement same scenario.

        • getting error as ” Unexpected Namespace f” ,” Unexpected Namespace core” if  I am using above code in “Detail.view.xml”.
        • As mentioned in above blog in Component.js file I am not getting any Config -> Service URL to change the path of my destination.
        • In “neo-app.json” file which path variable should change as “MII destination”

        can any one help.

        Regards,

        Rajee

        (0) 

Leave a Reply