Ido Shemesh

May 2, 2015 6 minute read

Fiori Launchpad Sites (Part 1): Developing & Managing Business Apps

Now that the Fiori Launchpad (FLP) is available on the HANA Cloud Platform (HCP) Trial accounts its a good time to try out the end to end development and consumption scenario with the new Fiori launchpad Sites.

In the first part of this blog we will focus on:

Generating a business application using SAP Web IDE based on Northwind public OData services.
Deploying our application to the HCP repository
Registering our application to Fiori Launchpad and creating a Static Tile for it

In the 2nd part of this blog we will see how to

Create a Dynamic Tile for our application
Develop and configure a Custom Tile for our application.

By the end of this blog (if you make it… ) your Fiori Launchpad site will have 3 tiles – one of each type:

Launching the generated business application:

Prerequisites

You have registered for a trial account for SAP HANA Cloud Platform
Set up connectivity to Northwind (the destination file is attached bellow):
How to use Northwind OData service with SAP Web IDE
Enabled Fiori Launchpad on Portal Service and created a new Fiori Launchpad site
SAP Fiori Launchpad Joins HANA Cloud Platform Trial

Explanation	Screen Shot
After creating your FLP Site Publish it by hovering over its tile in the Portal Service Site Directory Open the FLP site’s Configuration Cockpit in a new browser tab by clicking the Manage button Open the FLP site runtime by clicking on the URL

1) Creating Categories, Content Packages & Groups for FLP Site

In Fiori Launchpad, apps belongs to specific Categories (for classification and availability for the end user catalogs),
Content Packages (for the purpose of role-based access) and are arranged in Tile Groups
(read more in Creating Content for Launchpad Sites)

Explanation	Screen Shot
Access your Launchpads Configuration Cockpit to create Categories, Content Packages & Groups by launching the dedicated apps
Create a new Category Launch the Define Categories app Click the + at the bottom of the master list Enter the category Name (Northwind) Click Save Click on the Back or Home buttons to return to the configuration cockpit
Create a new Content package Launch the Manage Content Packages app Click the + at the bottom of the master list Enter the content package’s Name (Northwind) Click on the Sites tab and add the new Launchpad site you created – to assign the content package to it Click Save Click on the Back or Home buttons to return to the configuration cockpit
Create a new Tile Group Launch the Manage Tile Groups app Click the + at the bottom of the master list

2) Generating the ‘Employees’ Fiori application

After we enabled connection from our HCP account to the Northwind OData services we can use the SAP Web IDE templates to generate applications that consume its data.

Explanation	Screen Shot
Open SAP Web IDE from your HCP account cockpit	See Opening SAP Web IDE
Create a new project Right click on the Local root folder Select New > Project from Template
In the Template Selection screen Select the SAP Fiori Full Screen Application template Click Next Give the project a name employees* * For consistency please stick to the suggested names
In the Data Connection screen Select Service URL In the Service Information section Select the Northwind OData Service Enter the URL: /V3/Northwind/Northwind.svc Click on the Play icon to view the available services on the right side Details pane Click Next
In the Template Customization screen bind the OData properties to the UI controls. Page 1 Section Select the properties for the main table: Title – Employees OData Collection – Employees Item Title – EmployeeID Numeric Attribute – FirstName Units Attribute – LastName Status Attribute – Title Attribute – ReportsTo
Page 2 Section Select the properties for the detail header Attribute 1 – Address Attribute 2 – City Navigation Section Select a related Object and its properties OData Navigation – Orders Attribute 1 – OrderID Attribute 2– OrderDate Attribute 3 – ShippedDate Click Next and Finish to generate the project code.
Preview the Application From the project explorer expand the employees folder Select the Component.js file Click the Run button The employees application is launched displaying OData retrieved from the Northwind service

To complete the integration of our employees application with the Fiori Launchpad site we need to “proxify” our service URLs to overcome cross domain issues. This is achieved by adding a prefix to the service URL: jQuery.sap.getModulePath(“< app id >”) + “< service url >”

Explanation	Screen Shot
Edit the code From the project explorer expand the employees folder Double click the Component.js file to open it Locate the serviceUrl property (around line 21 in the generated code)
Add the prefix jQuery.sap.getModulePath(“employees”) Your code should look like this serviceUrl: jQuery.sap.getModulePath(“employees”) + “/destinations/northwind/V3/Northwind/Northwind.svc/” Click Save to persist your changes

Explanation

Screen Shot

Edit the code

From the project explorer expand the employees folder
Double click the Component.js file to open it
Locate the serviceUrl property (around line 21 in the generated code)

/wp-content/uploads/2015/05/proxify1_696376.png

Add the prefix
jQuery.sap.getModulePath(“employees”)
Your code should look like this
serviceUrl: jQuery.sap.getModulePath(“employees”) + “/destinations/northwind/V3/Northwind/Northwind.svc/”
Click Save to persist your changes

/wp-content/uploads/2015/05/proxify2_696377.png

For more information – Integrating Apps in the Launchpad .

3) Deploying & Registering the application to FLP with a Static Tile

Now its time to deploy the employees applications to our HCP account. A dedicated versionised Git repository is allocated to every application we deploy. We can choose to activate any version of our application to make it public. After deployment we will register the application to Fiori Launchpad.

Explanation	Screen Shot
Deploy the application Right click on the employees folder Select Deploy > Deploy to SAP HANA Cloud Platform In the Login to SAP HCP dialog box Enter your SCN password Click Login
In the Deploy Application Dialog box Notice that the deployment will create an activate version (1) from your deployed source code Click Deploy
Register application to SAP Fiori Launchpad After deployment the Successfully Deployed dialog box is opened Click the Register application to SAP Fiori Launchpad button
In the General Information screen Enter a Description for the application Click Next
In the Tile Configuration screen Enter the following Type: Static Title: Employees Subtitle: Our winning team Icon: select the employee icon Click Next
In the Assignment screen Enter the following Category: Northwind Content Package: Northwind Click Next Click Finish Click OK

The app (and its static tile) are now available in the your Launchpad Site’s Content catalog.

How did that happen? In Part 1 we created a Content Package (named Northwind) and assigned our new Fiori Launchpad Site to it. Registering our employees application to the same content package makes it available in the assigned sites under the registered category.

Explanation	Screen Shot
Preview & add content to the Launchpad Site Go back to your Launchpads Configuration Cockpit Click on the Preview Site tile Your new (and empty) launchpad site is opened Click on the top left menu icon to open the Group Panel Click on Tile Catalog to open the catalog and add content to your launchpad Site
Click on the + under the Employees tile Select the My Home group Click OK Click on the Back or Home buttons to return to the Launchpad sites runtime The Employees Static Tile was added to you launchpad Click it to launch the application

Explanation

Screen Shot

Preview & add content to the Launchpad Site

Go back to your Launchpads Configuration Cockpit
Click on the Preview Site tile
Your new (and empty) launchpad site is opened
Click on the top left menu icon to open the Group Panel
Click on Tile Catalog to open the catalog and add content to
your launchpad Site

/wp-content/uploads/2015/05/previewsite1_696645.png

/wp-content/uploads/2015/05/previewsite3_696662.png

Click on the + under the Employees tile
Select the My Home group
Click OK
Click on the Back or Home buttons to return to the
Launchpad sites runtime
The Employees Static Tile was added to you launchpad
Click it to launch the application

/wp-content/uploads/2015/05/previewsite4_696663.png

The tile we created for our employee application is a Static Tile. It contains a fixed set of fields like the title, subtitle, info and and icon. More on tiles in the following link: Tile Properties

As inspiring as the Static Tile may be, you might want to add more data to your tile or totally customize it and turn it into a small informative application. We will see how to do that in sections 4 and 5 of the 2nd part of this blog.

12 Comments

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

Jason Scott

May 20, 2015 at 2:20 am

Hi Ido. Thanks for this great step-by-step blog post. As a developer - this is exactly what we need so that we can see how differing technologies all fit together which can be very difficult from the help documentation and the typical blog announcing a new SAP technology.

Now I just need something that carries on from here to add in HCPms and even Mobile Secure to see the whole mobile scenario. 😉

Thank-you.

Ido Shemesh

Blog Post Author

May 21, 2015 at 8:51 am

Noted 🙂

Kumar Gaurav

August 3, 2015 at 11:55 am

Hi Ido,

I deployed the application on HCP and able to run it successfully using WebIDE. But when I am trying the app to run the app using launch pad, I am not able to access the services.

I am using the jQuery.sap.getModulePath("fioriContent") in the service url.

Please suggest the necessary step to resolve.

Thanks in advance.

Regards,

Kumar Gaurav

Meni Tito

August 3, 2015 at 2:41 pm

Hi Kumar,

For efficiency reasons let's followup on this by mail, please contact me via meni.tito@sap.com

Best,

Meni Tito

Madhuri Muthyalu

September 9, 2015 at 5:58 am

Hi Meni,

I am also facing the same issue the app works in IDE, when deployed in launchpad it is not able to pick up the destination

can you suggest any ways to avoid this.

Regards,

Madhuri

Former Member

May 29, 2017 at 8:30 am

Hi Madhuri,

Did you have the solution please ? I am facing the same issue

Thank you

Best regards,

Acyl

Former Member

May 29, 2017 at 8:35 am

Hi Meni,

I hope you are fine

Could you please post the solution here as we are many to face the issue ?

Thank you

Best regards,

Acyl

Former Member

May 29, 2017 at 8:11 am

Hi Kumar,

Did you have the solution please ? I am facing the same issue

Thank you

Best regards,

Acyl

Former Member

August 6, 2015 at 2:15 pm

Hi Ido,

I want to change the theme of the application and wanted to add some images and other stuff. Can you please let me know, how can i achieve it?

Former Member

March 21, 2016 at 12:42 pm

Hi Ido,

I do not see "Define Category" app. Could you please help.

Jean-François Parmentier

November 21, 2018 at 3:02 pm

Hi,

does it exists an update to your post ?

in fact, SAP Fiori Full Screen Application template doesn’t exist anymore, so that I have to use sap fiori worklist application odata V4 instead.

in addition, V3/Northwind/Northwind.svc/ isn’t available anymore, that’s why I use V4/Northwind/Northwind.svc/ instead.

surely due to that, i’m facing the error attached when executing the employees project.

but it seems that in my project, everything is correct.

in manifest I have the following :

"dataSources": {
			"mainService": {
				"uri": "/northwind/V4/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "4.0",
					"localUri": "localService/metadata.xml"
				}
			}
		},

and in neo-app.json I have this :

"routes": [
    {
      "path": "/northwind",
      "target": {
        "type": "destination",
        "name": "northwind"
      },
      "description": "Northwind OData Service"
    },

do you know what’s wrong.

I found the following but without answer : https://github.com/SAP/openui5/issues/2014

Kind regards,

Jean-François

Ido Shemesh

Blog Post Author

November 21, 2018 at 4:37 pm

Hi Jean-François,

I am not familiar with this issue. Perhaps you can try using the master-detail app template with V2 or V3 for Northwind ?

I have used nothwind V2 to display a list of suppliers in a custom SAPUI5 app - you can take a look at it my blog here - the blog contains a reference to the source code as well.

Regards, Ido

Fiori Launchpad Sites (Part 1): Developing & Managing Business Apps

1) Creating Categories, Content Packages & Groups for FLP Site

Assigned Tags