This presentation is mainly based on a workshop by Babu Ganesh V:
However I added some configuration tips, latest UI screenshot for Step by Step guide from a empty Landscape to a custom SAPUI5 App deployed Launchpad.Meanwhile mainly referenced to official guideline:
- Fiori Launchpad – Prerequisites | SCN https://scn.sap.com/docs/DOC-55167
- Fiori Launchpad – Configuration | SCN https://scn.sap.com/docs/DOC-55166
- SAP Fiori Launchpad Process Flow | SCN https://scn.sap.com/docs/DOC-60526
1. LAUNCHPAD CONFIGURATION AND DEPLOYMENT STEP BY STEP.
This part shows a step by step guide from a empty SAP Gateway Landscape to a custom SAPUI5 App deployed Launchpad.
1.1. SAPUI5 APP Prerequisite
1.1.1. Component.js Architecture
Applications should integrate with the shell as SAPUI5 components.
At runtime the applications will therefore not have their own index.html
Instead the components are launched via the shared application launcher, the Fiori Launchpad.https://wiki.wdf.sap.corp/wiki/display/fiorisuite/UI+Guidelines#UIGuidelines-Bootstrap
1.1.2. Use XML views
XML views should be used for all views.
However for a NON-STANDARD workaround where 100% replace from JS View to XML view were impossible, the first root view of APP should be changed at least.
1.1.3. File Conventions
- Use UTF8 for file encoding to avoid Garbled characters.
- Use windows Line Ending for Deploying Process as one report (/UI5/UI5_REPOSITORY_LOAD) used in Deploying process only support windows line ending (\r\n) actually.
1.2. Landscape Prerequisite
1.2.1. ABAP Kernel requirement
In order to properly display SAP transactions in SAP GUI for HTML from the Launchpad the browser needs to display the SAP GUI in standard mode. The system from which the SAP GUI for HTML is started, requires the following ABAP kernel versions:• For NetWeaver 7.00, 7.01, 7.02 and 7.31 kernel version 7.20:
SAP Note 1924378 Information published on SAP site• For NetWeaver 7.00, 7.01, 7.02 and 7.31 kernel version 7.21:
patch level 138• For NetWeaver 7.40:
kernel version 7.40 PL38
1.2.2. Support Package requirement
The latest Launchpad use SAPUI5 1.24.5 above, which needs those 2 Support Packages (they are support packages even their name containing “add-on”)• SAP Fiori – UI Add-on SP10• SAP Gateway Foundation 7.40 Add-on SP09Please refer to this Wiki:http://scn.sap.com/docs/DOC-59012
1.2.3. Upgrade System tips
Use user “DDIC” as client “000”.Use Transaction SPAM for “Support Package”, Transaction SAINT for “Add-on”.Current Support Package is dependent on all the previous Support Packages and other relevant packages. Example:
If Our server use l SAP Fiori-UI Add-on SP06l SAP GW Foundation Add-on SP05We need update UI Add-on to l SAP Fiori-UI Add-on SP10we need all the precedent UI SPs and GW Foundation Add-on SP09, which depends on all its precedent SPs too.
In total we need all the :l SAP Fiori-UI Add-on SP07, SP08, SP09 and SP10l SAP GW Foundation Add-on SP06, SP07, SP08, SP09Upgrade take times, 3+ hours is regular
1.3. Service Configuration
1.3.1. Maintaining SAP Gateway OData Services
OData Services to be Activated:• /UI2/PAGE_BUILDER_CONF
catalog, page and gadget service; configuration layer (system-wide)• /UI2/PAGE_BUILDER_CUSTcatalog, page and gadget service; customizing layer (client-specific)• /UI2/PAGE_BUILDER_PERS
catalog, page and gadget service; personalization layer (user-specific)• /UI2/TRANSPORT
used by the Launchpad designer to read and assign transport request• /UI2/INTEROP
Used by the Launchpad & Launchpad Designer for navigation
220.127.116.11. Example: Activate /UI2/PAGE_BUILDER_CUST
- Run transaction Activate and maintain services (/IWFND/MAINT_SERVICE) on the front-end server.
- Choose Add Service.
- Enter the System Alias of your back-end system.
Usually we use “LOCAL”, you can choose alias by F4 input helper.
- In the Technical Service Name field, enter the technical name of the OData service without the version number.
- In the Version field, enter the version number.
Here keep empty.
- Choose Get Services.
- Double click the Selected Service
- Enter a technical name for the service in your customer namespace.
Here it generates ZPAGE_BUILDER_CUST automatically.
- Assign a package or choose Local Object.
Here we reuse “Z_FIORI_PACKAGE”
- Choose Execute to save the service.
1.3.2. Configuring ICF Nodes for Local Gateway Deployment
18.104.22.168. SICF Services
Open the SICF transaction and activate the following services:
• startup service
• ushell service
• arsrvc_upb_admn service• ar_srvc_news service• ar_srvc_launch service
- /sap/bc/ui2/nwbc/ for NWBC for HTML
22.214.171.124. Example: Activate /default_host/sap/bc/ui2/
- Run transaction Maintain Services (SICF) on the front-end server.
- Press F8 or Click on “Execute”
- Navigate to the following path /default_host/sap/bc/ui2.
- Right click and choose Activate Service.
- Choose Yes
1.4. Transport Request
You can test Fiori Launchpad as Local Object while we prefer use transport request.Create a transport request and assign it to a system. (SAP Transaction: SE01).
1.5. Deploy Process
We use Purcharse Order Application (POA) extracted from OpenUI5 SDK demokit as a demo. This demo use standard Component.js architure, xml views and mock server which is approciate for Demo use.
1.5.1. Upload Fiori App as BSP application
Upload the SAPUI5 Application to the Gateway Server as a BSP application
126.96.36.199. Run Report /UI5/UI5_REPOSITORY_LOAD
Login to the SAP NetWeaver Gateway System
- Execute transaction SE38
- Enter the Program Name: /UI5/UI5_REPOSITORY_LOAD
- Click on
188.8.131.52. Enter BSP Name
- Enter the name of the SAPUI5 Application:
(Follow BSP application name convention)
- Choose Option “Upload”
- Click on
184.108.40.206. Locate Component.js path
On the “Browse for folder” popup, locate the folder, which contains the Component.js file of your App.In our case, it locates at “poa” folder. If Eclipse used, usually locate the “WebContent” folder.Click on OK (Tip: If you do not remember the workspace, in Hana Studio – Package Explorer view, select your Project and click on File Menu -> Properties)
220.127.116.11. Allow SAP GUI Security Warning
You may get an SAP GUI security warning, “Choose Remember My Decision”.Click on “Allow”.
18.104.22.168. Trigger Upload
Scroll to the bottom of the screen.Click on [Click here to Upload].
22.214.171.124. Upload Success
In our situation, POA is located at • Z_FIORI_PACKAGEAs BSP Application• ZPOAThe Component.js is located at • /Page FragmentsFolder of ZPOA.
1.5.2. Create Launchpad Role
126.96.36.199. Create Launchpad Role in LPD_CUST
1. Execute Transaction LPD_CUST 2. Click on “New Launchpad”3. Enter the following details in the popup Role: ZXXXLPD
(Here we use “Z_POA_LPD”)Instance: TRANSACTIONALDescription: XXX LPD Role
(Here we use “POA LPD Role”) 4. Click on Yes if asked “Are you sure that you don’t need a namespace”
188.8.131.52. Create an Application in Launchpad Role
1. Click on “New Application”2. Enter the Details below:
184.108.40.206. Edit Application Parameter: URL
- Click on the “Edit” button next to URL field
- Enter the BSP Application URL of the SAPUI5 Application you uploaded in the Step 1.
The URL is composite of :
/sap/bc/ui5_ui5/sap/ + <your_bsp_name>Here our app URL is :
220.127.116.11. Edit Advanced Parameters
- Click on button “Show Advanced (Optional) Parameters.
- Click on the “Edit” button next to Application Alias field, Enter :
(Here we use “ZPOAAlias”)
- Edit Additional Information:
(Here POA namespace is “sap.ui.demo.poa”)
Attention: “SAPUI5.Component=” is case sensitive.
- Click on “Save” button
1.5.3. Create Semantic Object in /UI1/SEMOBJ
18.104.22.168. Edit Semantic Object Table in /UI2/SEMOBJ
- Execute transaction /n/UI2/SEMOBJ
- Click on the “Edit” button
- You may get a message informing that the table is cross-client, click on “OK”
22.214.171.124. Create a Semantic Object
1. Click on “New Entries” button 2. Enter the following: Semantic Object:
ZPOASemObjSemantic Object Name: ZPOASemObjSemantic Object Description: Semantic Object for POA3. Click on “Save” button 4. Chose your transport request and click on
1.5.4. Create Catalog, Target Mapping and a Static Tile
126.96.36.199. Fiori Launchpad Designer
- Launch the Fiori Launchpad Designer url :
- Login with your SAP Gateway userid/password
Tips: • Use Firefox to open Launchpad Designer as its UI implementation is based on Firefox• Launchpad Designer always locates at path:
188.8.131.52. Create a Catalog
- Click on “plus” bar under “Catalogs” tab.
- Enter Title: POA Catalog
- Click on Save
Your Catalog is now created.
184.108.40.206. Create Target Mapping
- Click “Target Mapp…” icon to switch Switch IconTabBar to Target Mapping table
- Click “Create Target Mapping” button
Semantic Object: ZPOASemObj
(Can use value helper to choose)
- Choose the 2nd radio button “Configuration using ABAP LPD_CUST Report Launchpad”
Launchpad Role: Z_POA_LPD
Launchpad Instance: TRANSACTIONAL
Application Alias: ZPOAAlias
Click on Save to save your Target Mapping
220.127.116.11. Create Static Tile
- Click on the “plus” tile of Detail Page
- Click on “App Launcher # Static” tileto create a Target Mapping
- Click on the Static tile you just created
Enter the following details:
Title: Purchase Order App
Subtitle: Purchase Order App demo for Launchpad
icon: (choose from value helper)
Semantic Object: ZPOASemObj
(use value helper here)
(follow Launchpad navigation conventions, in current demo use simple “display”)
Save it, then we have now created a Static tile.
18.104.22.168. Create a Group
- Click on “plus” bar under “Group” tab.
- Enter Title: POA Group
- Click on Save.
Your Group is now created.
22.214.171.124. Add Catalog to Group
- Click on the “plus” tile to add the catalog you created to the group
- Click on value helper to to lookup for your catalog
- Key in “ZPOACat” to filter and lookup for your catalog and click on it to choose.
- Click on the “+” plus button to add the catalog to the group
- You have now created a Group and added the catalog to it.
1.5.5. Create PFCG Role for Catalog and Group
126.96.36.199. Create Single Role
- Execute Transaction PFCG
- Enter Role Name:
- Click on “Single Role” button
- Enter Description:
Purchase Order demo Role
- Click “save” button
- Click on the “Menu” Tab
188.8.131.52. Add Tile Catalog to Role
- Click on the
(Click on the Arrow and not the button)
- Choose “SAP Fiori Tile Catalog” from the list
- Enter your Catalog ID and click on “ok”(you can choose Catalog ID by value helper)
184.108.40.206. Add Group to Single Role
- Click on the
“SAP Fiori Tile Catalog”(Click on the Arrow and not the button)
- Choose Group from the list
- Enter the Group ID:
(choose from value helper)
And click on “ok”
220.127.116.11. Add User to Single Role
- Click on the User Tab
- Enter your User Id
(use value input helper to add users by batch)
- Click on “Save” to save the role.