SAP UI5 application on SAP Fiori 3.0 Cloud

[Dhanasupriya]

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:

view.xml:

<mvc:View controllerName="com.Card.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m" xmlns:f="sap.f"

	xmlns:card="sap.f.cards">

	<f:Card class="sapUiMediumMargin" width="300px">

		<f:header>

			<card:Header title="SAP Fiori 3.0 Demo" subtitle="Time for SAP Fiori 3.0"/>

		</f:header>

		<f:content>

			<List showSeparators="None" items="{path: '/productItems'}">

				<CustomListItem>

					<HBox alignItems="Center" justifyContent="SpaceBetween">

						<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom">

							<Title level="H3" text="{title}"/>

							<Text text="{subtitle}"/>

						</VBox>

						<ObjectStatus class="sapUiTinyMargin" text="{revenue}" state="{statusSchema}"/>

					</HBox>

				</CustomListItem>

			</List>

		</f:content>

	</f:Card>

</mvc:View>

controller.js:

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"sap/ui/model/json/JSONModel"

], 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"

				}]

			});

			this.getView().setModel(oModel);

		}

	});

});

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: https://flpportal-pxxxxxxxxxxtrial.dispatcher.hanatrial.ondemand.com/sites?siteId=ec65c24f-6eff-42c0...

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

[raviteja_challa]

Informative.

[jainee27]

Good one

[navin_karki]

Nice once

[dn5_abaper]

Fiori 3.0 🙂 Thank you Dhanasupriya

 

 

[former_member539826]

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

[former_member539826]

this is the error i am getting

[sascha_rissel4]

I just stumpled upon this interesting post, dhanasupriya1498 .

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

Kind Regards,

Sascha.