DEVELOP CUSTOM, INSIGHT-TO-ACTION KPI
TILES ON SAP FIORI LAUNCHPAD
CGE619
Exercises / Solutions
Ornulf Kittelsen, Marek Barwicki, Anand Sagar / SAP SE
CGE619 - Error! Unknown document property name.
TABLE OF CONTENTS
OVERVIEW .......................................................................................................................................................3
1 PART 1 - MAKE A DEMO APP AVAILABLE AS STANDARD TILE ............................................................4
1.1 Access SAP Cloud Platform Cockpit .....................................................................................................4
1.2 Access SAP Web IDE from Cloud Platform Cockpit..............................................................................6
1.3 Deploy a demo Fiori app to your trial account.......................................................................................8
1.4 Access SAP Cloud Platform Portal ......................................................................................................10
1.5 Create a SAP Fiori launchpad site........................................................................................................12
1.6 Add demo app as standard tile to the FLP home page .......................................................................14
1.7 Summary ...............................................................................................................................................18
2 PART 2 – USE KPI CUSTOM TILE AS APP LAUNCHER ON SAP FIORI LAUNCHPAD ..........................19
2.1 Upload an initial KPI custom tile ..........................................................................................................19
2.2 Configure the custom tile as app launcher for the Fiori demo app ....................................................23
2.3 Summary ...............................................................................................................................................28
3 PART 3 - ADD REALTIME KPI DATA TO CUSTOM TILE .........................................................................29
3.1 Register to SAP Demo Gateway System ..............................................................................................29
3.2 Create a Destination in SAP Cloud Platform Cockpit ..........................................................................30
3.3 Enhance custom tile with KPI number .................................................................................................32
3.4 Summary ...............................................................................................................................................38
4 PART 4 - ENABLE KPI TILE CONFIGURATION .......................................................................................39
4.1 Enable KPI tile to specify data set ........................................................................................................39
5 PART 5 – ENHANCE KPI TILE WITH ADDITIONAL VISUAL ELEMENTS................................................44
5.1 Change the KPI custom tile layout .......................................................................................................44
5.2 Add additional content to the KPI custom tile .....................................................................................46
5.3 Summary ...............................................................................................................................................49
2
CGE619 - Error! Unknown document property name.
OVERVIEW
In the Code Jam CGE619 you will learn how to implement and configure an insight-to-action KPI
custom tile for SAP Fiori launchpad on SAP Cloud Platform.
The structure of the exercises is the following:
Part 1: Make a Fiori demo app available as standard tile on SAP Fiori launchpad
Estimated Duration: 10 minutes
Part 2: Use custom tile as app launcher on SAP Fiori launchpad
Estimated Duration: 15 minutes
Part 3: Add real time KPI data to custom tile
Estimated Duration: 10 minutes
Part 4: Enable KPI tile configuration
Estimated Duration: 10 minutes
Part 5: Enhance KPI tile with additional visual elements
Estimated Duration: 10 minutes
3
CGE619 - Error! Unknown document property name.
1
PART 1 - MAKE A DEMO APP AVAILABLE AS STANDARD TILE
Overview
Estimated time: 10 minutes
Objective
In the role of a content administrator, you make a Fiori demo app available for the end user on SAP
Fiori launchpad home page on SAP Cloud Platform.
Exercise Description
In this exercise you will first deploy a demo app to the SAP Cloud Platform trial account. Then you will
create a new SAP Fiori launchpad site in SAP Cloud Platform Portal and add the demo app as
standard tile to the FLP home page. During this exercise you perform the following actions:
•
•
•
•
•
•
•
1.1
Access SAP Cloud Platform Cockpit
Access SAP Web IDE
Deploy an app to your SAP Cloud Platform trial account
Access SAP Cloud Platform Portal
Create a SAP Fiori launchpad site
Add an app as standard tile to the FLP home page
Adapt the standard tile visualization
Access SAP Cloud Platform Cockpit
Explanation
Screenshot
1. Start Google Chrome by
clicking the icon on your
Windows desktop.
2. Open the URL
https://account.hanatrial.ondem
and.com
3. Select Log On, if you already
have an SAP Cloud Platform
trial account or choose Register
to create a new Trial account.
4
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
4. Choose Neo Trial.
You now see the SAP Cloud
Platform Cockpit Overview
screen. This is the
administrative cockpit
for the SAP Cloud Platform
account.
5
CGE619 - Error! Unknown document property name.
1.2
Access SAP Web IDE from Cloud Platform Cockpit
Explanation
Screenshot
1. In the SAP Cloud Platform
Cockpit choose Services to get
all available SAP Cloud
Platform Services.
2. Use the search field on the
top right to search for Web IDE
3. Choose tile Web IDE FullStack.
Hint: If the service is not
enabled yet, just activate it by
clicking on Enable.
4. Choose Go to Service to
open SAP Web IDE.
6
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
You are now on the Welcome
screen of SAP Web IDE. Here
you have access to information
and learning material and from
here you can start creating your
development projects.
It's recommended to add this
URL to your browser favorites
for later use.
6. Click
to switch to the
development area of SAP Web
IDE.
You are now in the
development area of SAP Web
IDE. Here we will create and
edit the coding.
7
CGE619 - Error! Unknown document property name.
1.3
Deploy a demo Fiori app to your trial account
Explanation
Screenshot
1. To import a sample
application to your Web IDE
workspace, choose
File->Import->File or Project
2. Choose Browse to select a
file from the student share.
3. Browse for folder
\\students.fair.sap.corp\Student
share\CGE619 and select file
ui5demoapp.zip with a doubleclick.
4. Choose OK.
8
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
5. Select folder ui5demoapp
and choose Deploy->Deploy to
SAP Cloud Platform
If dialog window Login to SAP
Cloud Platform appears, login
with your trial account
credentials, same as at the
beginning of this exercise.
6. Leave all default settings
and choose Deploy.
The Fiori demo app was
successfully deployed to SAP
Cloud Platform. How to make it
available for the end user on
the SAP Fiori launchpad will be
part of the next exercise.
7. Do NOT register to SAP Fiori
launchpad in this step, but
choose Close.
9
CGE619 - Error! Unknown document property name.
1.4
Access SAP Cloud Platform Portal
Explanation
Screenshot
1. In SAP Web IDE choose
Tools->SAP Cloud Platform
Cockpit.
2. Choose Services to get all
available SAP Cloud Platform
Services.
3. Use the search field on the
top right to search for portal.
4. Choose tile Portal.
If the Portal Service is not
enabled on your account yet,
first enable the service before
you continue.
10
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
5. Choose Go to Service to
open SAP Cloud Platform
Portal.
You are now in SAP Cloud
Portal Administration Space,
where you will create and
manage your Fiori launchpad
site.
11
CGE619 - Error! Unknown document property name.
1.5
Create a SAP Fiori launchpad site
Explanation
Screenshot
1. Choose Create New Site.
2. Enter Site Name:
CGE619 Site.
3. Choose Site Template SAP
Fiori Launchpad.
4. Choose Create.
You are now in the SAP Fiori
launchpad Configuration
Cockpit. Here you
can configure the Fiori
launchpad content as well as
site settings and you have
access to additional features as
theme management, translation
and more.
5. Add the URL of the Fiori
launchpad Configuration
Cockpit to your browser
favorites for later use.
As you can see on the
dashboard, there are no Apps
12
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
available on your newly created
FLP site.
In the following steps, we
will add the Fiori demo app as
tile to the Fiori launchpad.
13
CGE619 - Error! Unknown document property name.
1.6
Add demo app as standard tile to the FLP home page
Explanation
Screenshot
1. In the SAP Fiori launchpad
Configuration Cockpit, choose
Apps.
2. On the bottom of the left
panel, click
to create a new
app configuration.
3. Choose the value help for
App Resource.
4. Select app ui5demoapp,
which you have deployed to
your account some steps
before.
5. Choose OK
14
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
6. Enter App Title: Fiori Demo
App.
Keep the other input fields,
which are prefilled, as they are.
7. Choose Catalogs. Here you
can assign the app to one or
several catalogs.
8.Click
catalog.
to add an existing
9. Select Sample Catalog and
choose OK.
15
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
10. Choose Groups.
11. Click
to assign the
app to an existing group.
12. Select Sample Group and
choose OK.
13. Choose Visualization to
change the visual appearance
of the tile.
14. Enter the following details:
• Information: CGE619
• Icon: Use the value help
to add an icon of your
choice
15. Choose Save.
16
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
16. In the top right corner of the
screen, click
to publish and
open the FLP site.
17. Choose Publish and Open.
18. Click tile Fiori Demo App
17
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
The Fiori demo app is launched
as configured in the SAP Fiori
launchpad Configuration
Cockpit.
1.7
Summary
You have completed the exercise!
You are now able to:
• Access SAP Fiori Platform Cockpit
• Access SAP Web IDE
• Deploy a UI5 app available as ZIP file to SAP Cloud Platform
• Access SAP Cloud Platform Portal
• Create a SAP Fiori launchpad site
• Add an app as tile to the Fiori launchpad home page
18
CGE619 - Error! Unknown document property name.
2
PART 2 – USE KPI CUSTOM TILE AS APP LAUNCHER ON SAP FIORI LAUNCHPAD
Overview
Estimated time: 15 minutes
Objective
In the role of a developer you create an SAP Fiori launchpad (FLP) custom tile with SAP Web IDE and
use it as app launcher on SAP Fiori launchpad.
Exercise Description
In this exercise you will upload an SAP Fiori launchpad initial custom tile in SAP Web IDE and make it
available as app launcher on SAP Fiori launchpad using SAP Fiori launchpad Configuration
Cockpit. During this exercise you perform the following actions:
•
•
•
2.1
Upload an initial standard tile in SAP Web IDE
Deploy the custom tile to your SAP Cloud Platform subaccount
Configure the custom tile as app launcher in SAP Fiori launchpad Configuration Cockpit
Upload an initial KPI custom tile
Explanation
Screenshot
1. Switch to the SAP Web IDE
browser tab.
19
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
2. Right click on folder
Workspace,
then choose Import->File or
Project
3. Choose Browse to select a
file from the student share.
4. Browse for folder
\\students.fair.sap.corp\Student
share\CGE619 and select file
KPIStarter.zip with a doubleclick.
5. Choose OK.
20
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
A new folder KPIStarter is
created in your Workspace
containing the basic files of the
initial KPI custom tile.
6. Right click on folder
KPIStarter, then choose
Project->Project Settings.
21
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
7. As Project Type select SAP
Fiori.
8. Choose Save.
9. Select folder KPIStarter and
choose Deploy->Deploy to SAP
Cloud Platform
If dialog window Login to SAP
Cloud Platform appears, login
with your trial account
credentials, same as at the
beginning of this exercise.
10. Leave all default settings
and choose Deploy.
22
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
The initial custom tile was
successfully deployed to your
SAP Cloud Platform
subaccount. How to make it
available for the end user on
the SAP Fiori launchpad will be
part of the next exercise.
11. Do NOT register to SAP
Fiori launchpad in this step, but
choose Close.
2.2
Configure the custom tile as app launcher for the Fiori demo app
1.Switch to the SAP Fiori
launchpad Configuration
Cockpit browser tab and
choose Apps.
2. On the bottom of the left
panel, click
to create a new
app configuration.
23
CGE619 - Error! Unknown document property name.
3. Choose the value help for
App Resource.
4. Select app ui5demoapp,
which you have deployed to
your account some steps
before.
5. Choose OK
6. Enter the following details:
• App Title:
Fiori Demo App.
• App Subtitle:
KPI Custom Tile
Keep the other input fields,
which are prefilled, as they are.
24
CGE619 - Error! Unknown document property name.
7. Choose Catalogs. Here you
can assign the app to one or
several catalogs.
8.Click
catalog.
to add an existing
9. Select Sample Catalog and
choose OK.
10. Choose Groups.
11. Click
to assign the
app to an existing group.
25
CGE619 - Error! Unknown document property name.
12. Select Sample Group and
choose OK.
13. Choose Visualization to
change the visual appearance
of the tile.
14. Enter the following details:
•
•
•
•
•
Tile Type:
Custom App Launcher
Module Type:
SAPUI5
Name:
teched.cge619.kpitile
Prefix:
teched.cge619.kpitile
Path: sap/fiori/kpistarter
15. Choose Save.
26
CGE619 - Error! Unknown document property name.
16. In the top right corner of the
screen, click
to publish and
open the FLP site.
17. Choose Publish and Open.
Now you can see a second tile
on the home screen.
The KPI custom tile launches
the same Fiori demo app as the
static tile, which you had
configured in Part 1 of this
session.
18. Click custom tile Fiori Demo
App.
27
CGE619 - Error! Unknown document property name.
The Fiori demo app is launched
as configured in the SAP Fiori
launchpad Configuration
Cockpit.
2.3
Summary
You have completed the exercise!
You are now able to:
• Deploy a custom tile on SAP Cloud Platform
• Configure a custom app launcher in SAP Fiori launchpad Configuration Cockpit
28
CGE619 - Error! Unknown document property name.
3
PART 3 - ADD REALTIME KPI DATA TO CUSTOM TILE
Overview
Estimated time: 10 minutes
Objective
In the role of a developer you enhance the custom tile with a KPI displaying realtime data.
As admin you set up a Cloud Platform Destination to use a public demo OData service as data source.
Exercise Description
In this exercise you will setup up a SAP Cloud Platform Destination to the SAP Demo Gateway
System ES5 and enable the custom tile to display a KPI showing realtime data delivered by a public
demo OData service.
During this exercise you perform the following actions:
•
•
3.1
Add a SAP Cloud Platform Destination
Enhance the custom tile to display a KPI showing realtime data
Register to SAP Demo Gateway System
Explanation
Screenshot
1. Register to SAP ES5 Demo
Service using URL
https://register.sapdevcenter.com/
SUPSignForms/
2. Choose Register.
29
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
You get a confirmation email from
devcenter@sap.com
3. Follow the instructions in the
email to change your initial
password.
3.2
Create a Destination in SAP Cloud Platform Cockpit
Explanation
Screenshot
1. Launch SAP Cloud Platform
Cockpit as described in
section 2.1 or choose
Useful Tools->SAP Cloud
Platform Cockpit in the SAP
Fiori launchpad Configuration
Cockpit.
30
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
2. In the navigation panel,
choose Destinations.
3. Choose New Destination.
4. Enter the following details in
the Destination Configuration:
•
•
•
•
•
•
•
•
Name: es5
Type: HTTP
Description: ES5
URL:
https://sapes5.sapdevce
nter.com/
Proxy Type: Internet
Authentication:
BasicAuthentication
User: <your personal
trial account user>
Password: <your trial
account password>
5. Choose New Property to add
two additional properties:
• WebIDEUsage:
odata_gen
• WebIDEEnabled: true
6. Choose Save.
7. Choose Check Connection.
8. Choose Close.
31
CGE619 - Error! Unknown document property name.
3.3
Enhance custom tile with KPI number
Explanation
Screenshot
You now will extend the custom
tile coding, to show a KPI
number on the tile.
1. Switch to the SAP Web IDE
browser tab or relaunch it from
SAP Cloud Platform Cockpit>Services
2. Select file Component.js in
folder KPIStarter with a doubleclick.
3.Insert the following code
snippet after
return oTileView;
(line 24).
},
_loadTileData: function(oData) {
var sOdataPath = "/" +
/*oData.dataSet*/
"SalesOrderCollection" +
"/$count",
//"?$select=NetSum&$format=json"
sModulePath =
jQuery.sap.getModulePath("teched/cg
e619/kpitile"),
sServicePath =
this.getManifestEntry("sap.app").da
taSources.mainService.uri,
sFullPath =
sModulePath + sServicePath +
sOdataPath,
oReq = new
XMLHttpRequest();
oReq.addEventListener("load
", this._onDataLoaded.bind(this));
oReq.open("GET",
sFullPath);
oReq.send();
},
_onDataLoaded: function(oResult){
32
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
var iDataLength =
oResult.target.response;
//var iDataLength =
JSON.parse(oResult.target.response)
.d.results.length;
this.getModel("tileModel").
setProperty("/KPI", iDataLength);
4. Insert the following coding to
the init function:
this._loadTileData(oData);
Use CTRL+Alt+B to beautify
your code.
5. Choose Save.
Now you need add the numeric
tile content and bind the
numeric value and color via UI5
data binding.
6. Choose
MyCustomtile.view.xml with a
double-click.
33
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
7. Insert the following coding
after
subheader="{tileModel>/di
splay_subtitle_text}">:
<TileContent
footer="{tileModel>/display_info_te
xt}"
unit="{tileModel>/unitDecription}">
<NumericContent
value="{tileModel>/KPI}"
scale="pcs" valueColor="{=
${tileModel>/KPI} > 19 ?
'Critical' : 'Neutral'}"/>
</TileContent>
Use CTRL+Alt+B to beautify
your code
8. Choose Save.
Now you need to define the
data source in the app
descriptor.
9. Choose manifest.json with a
double-click.
34
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
10. Insert the following coding
after line 8:
},
"dataSources": {
"mainService": {
"uri":
"/es5/sap/opu/odata/IWBEP/GWDEMO",
"type": "OData"
}
Use CTRL+Alt+B to beautify
your code
11. Choose Save
Now you need add the
destination “es5” for the OData
service.
12. Choose neo-app.json with
a double-click.
35
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
13. Insert the following coding
after "description":
"SAPUI5 Test Resources"
(line 20):
},
{
"path": "/es5",
"target": {
"type": "destination",
"name": "es5"
},
"description": "ES5"
Use CTRL+Alt+B to beautify
your code
14. Choose Save
Finally, you need to deploy the
custom tile to the SAP Cloud
Platform subaccount.
15. Select folder KPIStarter and
choose
Deploy->Deploy to SAP Cloud
Platform.
36
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
16. Leave all default settings
and choose Deploy.
17. Choose Close.
A new version of the custom
tile is now successfully
deployed on the trial account.
Now let's check the changes on
the SAP Fiori launchpad site.
18. Switch to the Fiori
launchpad Configuration
Cockpit browser tab.
19. Click
to open the SAP
Fiori launchpad site with the
new KPI custom tile version.
37
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
20. Choose Publish and Open.
Now you can see the custom
tile with a real time KPI data.
3.4
Summary
You have completed the exercise!
You are now able to:
• Enhance a custom tile adding a KPI.
• Deploy a new version of a custom tile to SAP Cloud Platform
38
CGE619 - Error! Unknown document property name.
4
PART 4 - ENABLE KPI TILE CONFIGURATION
Overview
Estimated time: 10 minutes
Objective
In the role of a developer, you enable the custom tile to consume the configuration of the KPI data
source from SAP Fiori launchpad Configuration Cockpit.
Exercise Description
In this exercise you will enable the custom tile to consume the data source specification done in the
SAP Fiori launchpad Configuration Cockpit.
During this exercise you perform the following actions:
•
•
•
4.1
Enable the custom tile to consume data source settings from FCC
Deploy a new custom tile version to SAP Cloud Platform
Experience custom tile in SAP Fiori launchpad
Enable KPI tile to specify data set
Explanation
Screenshot
You now will enable the KPI
custom tile be configured in
SAP Fiori Configuration
Cockpit.
1. Switch to the SAP Web IDE
browser tab or relaunch it from
SAP Cloud Platform Cockpit>Services
2. Select file Component.js in
folder KPIStarter with a doubleclick.
39
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
3. In function _loadTileData
replace the code in line 28 by
the following code
Before:
var sOdataPath = "/" +
oData.dataSet +
"/?$select=UnitPrice&$format=json",
After:
4. In function _onDataLoaded
remove the comment
characters // in line 39 and
add them to line 38.
Before:
After:
5. Choose Save.
6. Select folder KPIStarter in
your workspace and choose
Deploy->Deploy to SAP Cloud
Platform.
40
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
7. Leave all default settings
and select Deploy.
8. Choose Close.
9. Switch to the Fiori launchpad
Configuration Cockpit browser
tab.
10. Choose Visualization of the
custom KPI app to add an
additional property for the data
set specification.
11. Choose Edit.
41
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
12.Choose Add to enter a
custom property.
13. Enter the following details:
•
•
Key: dataSet
Value: ProductCollection
14. Choose Save.
15. In the top left corner of the
screen, click
to publish
the recent change of your site.
16. Choose Publish and Open.
42
CGE619 - Error! Unknown document property name.
Explanation
Screenshot
Now you can see the custom
tile with a real time KPI, which
is different from that in part 3
because the number refers to
the specified data set
ProductCollection
43
CGE619 - Error! Unknown document property name.
5
PART 5 – ENHANCE KPI TILE WITH ADDITIONAL VISUAL ELEMENTS
Overview
Estimated time: 10 minutes
Objective
In the role of a developer, you enhance a custom tile to display additional information for insights-toaction.
Exercise Description
In this exercise you will change the layout of the custom tile to a larger size and enhance the custom
tile coding to display additional information.
During this exercise you perform the following actions:
•
•
•
•
5.1
Change the custom tile layout using SAP Fiori launchpad Configuration Cockpit
Enhance the custom tile coding with SAP Web IDE
Deploy a new version of the custom tile to your Cloud account.
Experience custom tile in SAP Fiori launchpad
Change the KPI custom tile layout
1. Switch to the Fiori launchpad
Configuration Cockpit browser
tab.
2. Choose Visualization of the
KPI custom tile app to change
the tile layout.
3. Choose Edit.
44
CGE619 - Error! Unknown document property name.
4. Choose Size: 1 x 2.
5. Choose Save.
6. In the top left corner of the
screen, click
to publish
the recent change of your site.
7. Choose Publish and Open.
Now you can see the KPI
custom tile in the larger size.
You will fill the white space,
which is available on the tile, in
the following exercise.
45
CGE619 - Error! Unknown document property name.
5.2
Add additional content to the KPI custom tile
You now will enhance the
custom tile with additional
analytical content.
1. Switch to the SAP Web IDE
browser tab.
2. Select file
CustomTile.view.xml in folder
KPIStarter with a double-click.
3. Insert the following coding
after "</tileContent>"(line
7):
<TileContent footer="comparison"
visible="{=
${tileModel>/tile_size} ===
'1x2'}">
<mc:ComparisonMicroChart
scale="EUR">
<mc:data>
<mc:ComparisonMicroChartData
title="Min"
value="{tileModel>/KPIData/iMin}"/
>
<mc:ComparisonMicroChartData
title="Average"
value="{tileModel>/KPIData/iAvrg}"
/>
<mc:ComparisonMicroChartData
title="Max"
value="{tileModel>/KPIData/iMax}"/
>
</mc:data>
</mc:ComparisonMicroChart>
</TileContent>
Use CTRL+Alt+B to beautify
your code
4. Choose Save.
46
CGE619 - Error! Unknown document property name.
You now will add the coding to
aggregate the data.
5.Choose Component.js with a
double-click.
6. In function _onDataLoaded
replace the existing coding with
the following coding:
var aReponse =
JSON.parse(oResult.target.response
)
.d.results,
aSums =
aReponse.map(function(elem){
return
parseFloat(elem.UnitPrice);}),
iSum = aSums.reduce(function (acc,
elem) { return acc + elem;}, 0),
iAverage = iSum /
aSums.length,oData = {
iMin: Math.min(...aSums),
iMax: Math.max(...aSums),
iAvrg: Math.floor(iAverage),
iTotals: aSums.length};
this.getModel("tileModel").setProp
erty("/KPIData", oData);
this.getModel("tileModel").setProp
erty("/KPI",aSums.length);
Use CTRL+Alt+B to beautify
your code
7. Choose Save.
47
CGE619 - Error! Unknown document property name.
8. Select folder KPIStarter in
your workspace and choose
Deploy->Deploy to SAP Cloud
Platform.
9. Leave all default settings
and select Deploy.
10. Choose Close.
48
CGE619 - Error! Unknown document property name.
11. Switch to the Fiori
launchpad Configuration
Cockpit browser tab.
12. Click
to open the SAP
Fiori launchpad site with the
new KPI custom tile version.
13. Choose Publish and Open.
Now you can see the KPI
custom tile in the larger size.
5.3
Summary
You have completed the exercise!
You are now able to:
• Configure the custom tile layout
• Add custom content to the KPI custom tile
49
www.sap.com/contactsap
© 2018 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of
SAP SE or an SAP affiliate company.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation
or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the
materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the
express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this
document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any
related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or
platforms, directions, and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at
any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to
deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that
could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these
forward-looking statements, and they should not be relied upon in making purchasing decisions.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names
mentioned are the trademarks of their respective companies.
See https://www.sap.com/copyright for additional trademark information and notices.