Skip to Content
Technical Articles
Author's profile photo Dhanasupriya Sidagam

SAP UI5 application on SAP Fiori 3.0 Cloud

Hello All

This time, my blog description is to consume SAP Cloud Platform services, Deploy new SAP Ui5 application to SAP Fiori 3.0 launchpad, SAP Fiori 3.0 User Experience.

Access your SAP Cloud Platform and make sure SAP WEB IDE Full Stack and Portal services are enabled.

Created sap.f.card using SAP WEB IDE – new control introduced as part of SAP Fiori 3.0

UI code:


<mvc:View controllerName="com.Card.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:f="sap.f"
	<f:Card class="sapUiMediumMargin" width="300px">
			<card:Header title="SAP Fiori 3.0 Demo" subtitle="Time for SAP Fiori 3.0"/>
			<List showSeparators="None" items="{path: '/productItems'}">
					<HBox alignItems="Center" justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">
							<Title level="H3" text="{title}"/>
							<Text text="{subtitle}"/>
						<ObjectStatus class="sapUiTinyMargin" text="{revenue}" state="{statusSchema}"/>


], function (Controller, JSONModel) {
	"use strict";
	return Controller.extend("com.Card.controller.View1", {
		onInit: function () {
			var oModel = new JSONModel({
				"productItems": [{
					"title": "Notebook HT",
					"subtitle": "ID23452256-D44",
					"revenue": "27.25K EUR",
					"statusSchema": "Success"
				}, {
					"title": "Notebook XT",
					"subtitle": "ID27852256-D47",
					"revenue": "7.35K EUR",
					"statusSchema": "Error"
				}, {
					"title": "Notebook ST",
					"subtitle": "ID123555587-I05",
					"revenue": "22.89K EUR",
					"statusSchema": "Warning"

Output: Before deploying to SAP Cloud Platform

Open Portal service.

Click on Create New Site

Create new SAP Fiori Launchpad

Under Catalogs, Groups and Roles, Click on + below and create new fields or you can make use of sample Catalog, Group and Roles given with this Portal service. I have used the sample one’s available with Portal.

By this, We are ready with Launchpad, Group, Catalog and Roles.

Now going back to SAP WEB IDE, deploy the app to SAP Cloud Platform as a new application.

Once the application got successfully build, you will see the below pop-up and now register the application to SAP Fiori Launchpad.

Provide the below highlighted details as per your requirement.

In this step, we can choose for Launchpad site, group and catalog we created earlier and click Finish

Once the application has been registered, open SAP Fiori Launchpad.

Link to Launchpad Home Page:

This shows our Fiori 3.0 User Experience.

Card output in FLP:

If we are willing to change the application content, from SAP WEB IDE, do the changes and deploy to SAP Cloud Platform: This time no need to register the app again to FLP. Changes will be reflected on refresh.

Fiori 3.0 User Experience: Quartz Theme, Shell bar, new control(sap.f.card), user profile.

Thank you for getting into my blog post.

Comments are always accepted.

Thank you!! 🙂

BR//Dhanasupriya Sidagam

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Raviteja Challa
      Raviteja Challa


      Author's profile photo Jainee Solanki
      Jainee Solanki

      Good one

      Author's profile photo Rolling Stark
      Rolling Stark

      Nice once

      Author's profile photo Dinesh Naidu
      Dinesh Naidu

      Fiori 3.0 🙂 Thank you Dhanasupriya



      Author's profile photo vinodh reddy
      vinodh reddy

      good post but please tell me, how to create site and what are the prerequests needed

      Author's profile photo vinodh reddy
      vinodh reddy

      this is the error i am getting

      Author's profile photo Sascha Rissel
      Sascha Rissel

      I just stumpled upon this interesting post, Dhanasupriya Sidagam .

      Can you tell, is this dynamic and freestyle rendering of cards, also possible in Launchpad on SAP Cloud Foundry environments, meanwhile?


      Kind Regards,