If you have read a couple of my previous blogs you will be able to follow my journey configuring the Fiori Launchapd on XSA. This most recent post presents what I feel is the ideal configuration, allowing the use of multiple MTA's for your applications while retaining UAA support.
If you have been trying to setup a Fiori Launchpad on XSA, I am sure you are familiar with the official SAP documentation in the following link: https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/2.0.04/en-US/8a583342d1c64822837fe49efb...
While much of the information is present in the documentation, I feel the instructions are incomplete and unclear.
I have a working sample configuration prepared and available in my github: https://github.com/bigsmity/xsalaunchpaddemo
"launchpaddemoapp2" is where all the magic happens for this blog. I have left the previous configurations available even though they are now obsolete.
The main difference is the change from using the @Sap/approuter to using @Sap/site-app-server. At the time of writing no working templates appear to exist in the public domain for this configuration.
With this setup, you only need to write config in the MTA of the UI5 application. This implementation is independent of the launchpad configuration.
Let's get into it.
UI5 Application Setup
Create a new MTA called "launchpaddemoapp2" and add a SAPUI5 HTML5 Module called "launchpaddemoapp2_ui".
Create a folder called "site" directly in the UI5 module folder.
Create a file called "site-content.json" in the "site" folder you just created.
Your folder structure should look as follows:
Paste in the example site-content.json content from the SAP provided documentation as a starting point. Please note the source provided in the official documentation is missing the last closing bracket '}'. There is also a leading space in the group Id field. Both of these have been corrected in the snippet below
site-content.json Starting point (corrected from SAP documentation)
Update the site-content.json with your Group, Tile and Application configuration
site-content.json complete, configured
Update the manifest.json and add the cross navigation settings to the "sap.app" section
Update the manifest.json and add the component properties to the root level object.
Update the manifest.json file to add the component name to the "sap.ui5" object
manifest.json complete, configured
Open the package.json file, you will see the following approuter configuration:
We will need to replace this with a site-app-server configuration:
Open the xs-app.json file, enable UAA and add the standard route
Open the mta.yaml file and add the reference to the target Fiori Launchpad
The siteId property is the ID value of the mta.yaml containing the Fiori Launchpad
Add the requires reference to the UI5 application
mta.yaml complete, configured
Build and deploy your application, then run your launchpad.
The group and Tile can now be seen.
Click the Tile to launch the UI5 application.
There you have it, you now have a correctly configured Fiori Launchpad! Tiles are self contained, and UAA is available!
It should be noted when using the site-app-server, you lose the ability to run the UI5 application in the workspace context. My current solution is to modify the package.json file when developing in Web IDE:
I keep the dependency for both node modules, but switch the name of the start script from "start" to "dontstart".
If you have been trying to setup a Fiori Launchpad on XSA, I am sure you are familiar with the official SAP documentation in the following link: https://help.sap.com/viewer/4505d0bdaf4948449b7f7379d24d0f0d/2.0.04/en-US/8a583342d1c64822837fe49efb...
While much of the information is present in the documentation, I feel the instructions are incomplete and unclear.
I have a working sample configuration prepared and available in my github: https://github.com/bigsmity/xsalaunchpaddemo
"launchpaddemoapp2" is where all the magic happens for this blog. I have left the previous configurations available even though they are now obsolete.
The main difference is the change from using the @Sap/approuter to using @Sap/site-app-server. At the time of writing no working templates appear to exist in the public domain for this configuration.
With this setup, you only need to write config in the MTA of the UI5 application. This implementation is independent of the launchpad configuration.
Let's get into it.
UI5 Application Setup
Create a new MTA called "launchpaddemoapp2" and add a SAPUI5 HTML5 Module called "launchpaddemoapp2_ui".
Create a folder called "site" directly in the UI5 module folder.
Create a file called "site-content.json" in the "site" folder you just created.
Your folder structure should look as follows:
Paste in the example site-content.json content from the SAP provided documentation as a starting point. Please note the source provided in the official documentation is missing the last closing bracket '}'. There is also a leading space in the group Id field. Both of these have been corrected in the snippet below
site-content.json Starting point (corrected from SAP documentation)
{
"roles": {
"Everyone": {
"_version": "1.0",
"identification": {
"id": "Everyone",
"namespace": "",
"entityType": "role"
},
"payload": {
"catalogs": [],
"groups": [{
"id": "MyGroupId"
}]
}
}
},
"applications": {
},
"groups": {
"MyGroupId": {
"identification": {
"id": "MyGroupId",
"i18n": "i18n/i18n.properties",
"namespace": "",
"title": "{{ MyGroupId_GROUP_TITLE}}"
},
"payload": {
"tiles": [{
"id": "SampleTile",
"subTitle": "{{SampleTile_SUB_TITLE}}",
"appId": "MyUniqueAppID",
"target": {
"semanticObject": "myApp",
"action": "show",
"parameters": []
}
}]
}
}
}
}Update the site-content.json with your Group, Tile and Application configuration
site-content.json complete, configured
{
"roles": {
"Everyone": {
"_version": "1.0",
"identification": {
"id": "Everyone",
"namespace": "",
"entityType": "role"
},
"payload": {
"catalogs": [],
"groups": [{
"id": "launchpaddemoapp2_ui_GroupId"
}]
}
}
},
"applications": {
"launchpaddemoapp2_ui": {
"sap.app": {
"_version": "1.3.0",
"id": "launchpaddemoapp2_ui",
"title": "Launchpad Demo App2",
"i18n": "i18n/i18n.properties",
"tags": {
"keywords": []
},
"crossNavigation": {
"inbounds": {
"launchpaddemoapp2_uiShow": {
"semanticObject": "launchpaddemoapp2_ui",
"action": "show",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"signature": {
"parameters": {},
"additionalParameters": "allowed"
}
}
},
"outbounds": {}
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5"
},
"sap.ui5": {
"componentName": "launchpaddemoapp2_ui",
"_version": "1.2.0"
},
"sap.platform.runtime": {
"componentProperties": {
"url": "/"
}
}
}
},
"groups": {
"launchpaddemoapp2_ui_GroupId": {
"identification": {
"id": "launchpaddemoapp2_ui_GroupId",
"i18n": "i18n/i18n.properties",
"namespace": "",
"title": "Launchpad Demo App"
},
"payload": {
"tiles": [{
"id": "launchpaddemoapp2_ui_tile",
"title": "Launchpad Demo App2",
"subTitle": "launchpad demo app2",
"icon": "sap-icon://share-2",
"appId": "launchpaddemoapp2_ui",
"target": {
"semanticObject": "launchpaddemoapp2_ui",
"action": "show",
"parameters": []
}
}]
}
}
}
}Update the manifest.json and add the cross navigation settings to the "sap.app" section
"crossNavigation": {
"inbounds": {
"launchpaddemoapp2_uiShow": {
"title": "Launchpad Demo App2",
"icon": "sap-icon://share-2",
"semanticObject": "launchpaddemoapp2_ui",
"action": "show",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
}
},
"outbounds": {}
}Update the manifest.json and add the component properties to the root level object.
"sap.platform.cf": {},
"sap.platform.runtime": {
"componentProperties": {
"url": "/resources/webapp"
}
}Update the manifest.json file to add the component name to the "sap.ui5" object
"componentName": "launchpaddemoapp2_ui",manifest.json complete, configured
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "launchpaddemoapp2_ui",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"ach": "ach",
"sourceTemplate": {
"id": "hanatemplates.basicSAPUI5ApplicationProject",
"version": "0.0.0"
},
"crossNavigation": {
"inbounds": {
"launchpaddemoapp2_uiShow": {
"title": "Launchpad Demo App2",
"icon": "sap-icon://share-2",
"semanticObject": "launchpaddemoapp2_ui",
"action": "show",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
}
},
"outbounds": {}
},
"dataSources": {
"appDataSource": {
"uri": "launchpaddemoapp2_js_dest/xsodata/APP_DATA.xsodata/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"componentName": "launchpaddemoapp2_ui",
"rootView": {
"viewName": "launchpaddemoapp2_ui.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {},
"sap.ushell": {},
"sap.collaboration": {},
"sap.ui.comp": {},
"sap.uxap": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "launchpaddemoapp2_ui.i18n.i18n"
}
},
"app_data": {
"dataSource": "appDataSource"
}
},
"resources": {
"css": [{
"uri": "/css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "launchpaddemoapp2_ui.view",
"controlAggregation": "pages",
"controlId": "idAppControl"
},
"routes": [{
"name": "RouteView1",
"pattern": "RouteView1",
"target": ["TargetView1"]
}],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "View1"
}
}
}
},
"sap.platform.cf": {},
"sap.platform.runtime": {
"componentProperties": {
"url": "/resources/webapp"
}
}
}Open the package.json file, you will see the following approuter configuration:
{
"name": "launchpaddemoapp2_ui-approuter",
"engines": {
"node": ">=4.0.0 <9.0.0"
},
"dependencies": {
"@sap/approuter": "6.1.0"
},
"scripts": {
"start": "node node_modules/@sap/approuter/approuter.js"
}
}We will need to replace this with a site-app-server configuration:
{
"name": "launchpaddemoapp2_ui",
"engines": {
"node": ">=4.0.0 <9.0.0"
},
"dependencies": {
"@sap/site-app-server": "^1.9.x"
},
"scripts": {
"start": "node node_modules/@sap/site-app-server/index.js"
}
}Open the xs-app.json file, enable UAA and add the standard route
{
"welcomeFile": "webapp/index.html",
"authenticationMethod": "route",
"routes": [{
"source": "^/(.*)$",
"localDir": "resources/webapp"
}]
}Open the mta.yaml file and add the reference to the target Fiori Launchpad
- name: flp-launchpaddemoapp2-client
type: com.sap.portal.site-content
parameters:
config:
siteId : launchpaddemoThe siteId property is the ID value of the mta.yaml containing the Fiori Launchpad
Add the requires reference to the UI5 application
- name: launchpaddemoapp2_ui
type: html5
path: ui
requires:
- name: flp-launchpaddemoapp2-client
- name: launchpaddemoapp2_uaa
- name: launchpaddemoapp2_js_api
group: destinations
properties:
name: launchpaddemoapp2_js_dest
url: '~{url}'
forwardAuthToken: truemta.yaml complete, configured
ID: launchpaddemoapp2
_schema-version: '2.1'
version: 0.0.1
modules:
- name: launchpaddemoapp2_db
type: hdb
path: db
properties:
SAP_JWT_TRUST_ACL:
- clientid: '*'
identityzone: '*'
requires:
- name: launchpaddemoapp2_uaa
- name: hdi_launchpaddemoapp2_db
properties:
TARGET_CONTAINER: '~{hdi-container-name}'
- name: launchpaddemoapp2_js
type: nodejs
path: js
properties:
CORS:
- uriPattern: .
allowedMethods:
- GET
- POST
allowedOrigin:
- host: '*'
SAP_JWT_TRUST_ACL:
- clientid: '*'
identityzone: '*'
provides:
- name: launchpaddemoapp2_js_api
public: true
properties:
url: ${default-url}
requires:
- name: launchpaddemoapp2_uaa
- name: hdi_launchpaddemoapp2_db
- name: launchpaddemoapp2_db
- name: launchpaddemoapp2_ui
type: html5
path: ui
properties:
CORS:
- uriPattern: .
allowedMethods:
- GET
- POST
allowedOrigin:
- host: '*'
SAP_JWT_TRUST_ACL:
- clientid: '*'
identityzone: '*'
requires:
- name: flp-launchpaddemoapp2-client
- name: launchpaddemoapp2_uaa
- name: launchpaddemoapp2_js_api
group: destinations
properties:
name: launchpaddemoapp2_js_dest
url: '~{url}'
forwardAuthToken: true
resources:
- name: hdi_launchpaddemoapp2_db
properties:
hdi-container-name: ${service-name}
type: com.sap.xs.hdi-container
- name: launchpaddemoapp2_uaa
parameters:
service: xsuaa
service-plan: space
type: com.sap.xs.uaa
- name: flp-launchpaddemoapp2-client
type: com.sap.portal.site-content
parameters:
config:
siteId : launchpaddemoBuild and deploy your application, then run your launchpad.
The group and Tile can now be seen.
Click the Tile to launch the UI5 application.
There you have it, you now have a correctly configured Fiori Launchpad! Tiles are self contained, and UAA is available!
It should be noted when using the site-app-server, you lose the ability to run the UI5 application in the workspace context. My current solution is to modify the package.json file when developing in Web IDE:
{
"name": "launchpaddemoapp2_ui",
"engines": {
"node": ">=4.0.0 <9.0.0"
},
"dependencies": {
"@sap/site-app-server": "^1.9.x",
"@sap/approuter": "6.1.0"
},
"scripts": {
"start": "node node_modules/@sap/site-app-server/index.js",
"dontstart": "node node_modules/@sap/approuter/approuter.js"
}
}I keep the dependency for both node modules, but switch the name of the start script from "start" to "dontstart".
- SAP Managed Tags:
21 Comments
