Skip to Content

Presentation shared on SAPJam

This presentation is mainly based on a workshop by Babu Ganesh V:

  1. How to Deploy a custom SAPUI5 on Fiori Launchpad http://scn.sap.com/docs/DOC-55899

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:

  1. Fiori Launchpad – Prerequisites | SCN https://scn.sap.com/docs/DOC-55167
  2. Fiori Launchpad – Configuration | SCN https://scn.sap.com/docs/DOC-55166
  3. 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.

See the SAP UI5 documentation for more details in particular the XMLView Definition and the declarative support documentation.

https://wiki.wdf.sap.corp/wiki/display/fiorisuite/UI+Guidelines#UIGuidelines-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

  1. Use UTF8 for file encoding to avoid Garbled characters.
  2. 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

1.3.1.1.         Example: Activate /UI2/PAGE_BUILDER_CUST

  1. Run transaction Activate and maintain services (/IWFND/MAINT_SERVICE) on the front-end server.
  2. Choose Add Service.
  1. Enter the System Alias of your back-end system.
    Usually we use “LOCAL”, you can choose alias by F4 input helper.
  2. In the Technical Service Name field, enter the technical name of the OData service without the version number.
    Here /UI2/PAGE_BUILDER_CUST.
  3. In the Version field, enter the version number.
    Here keep empty.
  4. Choose Get Services.
  5. Double click the Selected Service
  1. Enter a technical name for the service in your customer namespace.
    Here it generates ZPAGE_BUILDER_CUST automatically.
  2. Assign a package or choose Local Object.
    Here we reuse “Z_FIORI_PACKAGE”
  3. Choose Execute to save the service.

1.3.2.     Configuring ICF Nodes for Local Gateway Deployment

1.3.2.1.         SICF Services

Open the SICF transaction and activate the following services:

  1. /default_host/sap/bc/ui2/

•       startup service

  1. /default_host/sap/bc/ui5_ui5/ui2/

•       ushell service

  1. /default_host/sap/bc/ui5_ui5/sap/

•       arsrvc_upb_admn service•       ar_srvc_news service•       ar_srvc_launch service

  1. /default_host/sap/public/bc/ui5_ui5/
  2. /default_host/sap/public/bc/ui2/
  3. /sap/bc/ui2/nwbc/ for NWBC for HTML

1.3.2.2.         Example: Activate /default_host/sap/bc/ui2/

  1. Run transaction Maintain Services (SICF) on the front-end server.
  2. Press F8 or Click on “Execute
  1. Navigate to the following path  /default_host/sap/bc/ui2.
  2. Right click and choose Activate Service.
  1. 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

1.5.1.1.         Run Report /UI5/UI5_REPOSITORY_LOAD

Login to the SAP NetWeaver Gateway System

  1. Execute transaction SE38
  2. Enter the Program Name: /UI5/UI5_REPOSITORY_LOAD
  3. Click on

1.5.1.2.         Enter BSP Name

  1. Enter the name of the SAPUI5 Application:
    ZPOA
    (Follow BSP application name convention)
  2. Choose Option “Upload”
  3. Click on

1.5.1.3.         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)

1.5.1.4.         Allow SAP GUI Security Warning

You may get an SAP GUI security warning, “Choose Remember My Decision”.Click on “Allow”.

1.5.1.5.         Trigger Upload

Scroll to the bottom of the screen.Click on [Click here to Upload].

1.5.1.6.         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

1.5.2.1.         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”

1.5.2.2.         Create an Application in Launchpad Role

1.     Click on “New Application”2.     Enter the Details below:

1.5.2.3.         Edit Application Parameter: URL

  1. Click on the “Edit” button next to URL field
  2. 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 :
    /sap/bc/ui5_ui5/sap/zpoa

1.5.2.4.         Edit Advanced Parameters

  1. Click on button “Show Advanced (Optional) Parameters.
  2. Click on the “Edit” button next to Application Alias field, Enter :
    ZXXXAlias
    (Here we use “ZPOAAlias”)
  3. Edit Additional Information:
    SAPUI5.Component=you.app.namespace
    (Here POA namespace is “sap.ui.demo.poa”)

    Attention: “SAPUI5.Component=” is case sensitive.

  4. Click on “Save” button

1.5.3.     Create Semantic Object in /UI1/SEMOBJ

1.5.3.1.         Edit Semantic Object Table in /UI2/SEMOBJ

  1. Execute transaction /n/UI2/SEMOBJ
  2. Click on the “Edit” button
  3. You may get a message informing that the table is cross-client, click on “OK”

1.5.3.2.         Create a Semantic Object

1.     Click on “New Entries” button 2.     Enter the following: Semantic Object:
ZPOASemObj
Semantic 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

1.5.4.1.         Fiori Launchpad Designer

  1. Launch the Fiori Launchpad Designer url :

http://<yourservername>:<port>/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

  1. 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:
/sap/bc/ui5_ui5/sap/arsrvc_upb_admn/main.html

1.5.4.2.         Create a Catalog

  1. Click on “plus” bar under “Catalogs” tab.
  2. Enter Title: POA Catalog
    ID: ZPOACat
  3. Click on Save

Your Catalog is now created.

1.5.4.3.         Create Target Mapping

  1. Click “Target Mapp…” icon to switch Switch IconTabBar to Target Mapping table
  2. Click “Create Target Mapping” button
  1. Intent
    Semantic Object: ZPOASemObj
    (Can use value helper to choose)
    Action: display
  2. Choose the 2nd radio button “Configuration using ABAP LPD_CUST Report Launchpad”
  3. Target
    Launchpad Role: Z_POA_LPD
    Launchpad Instance: TRANSACTIONAL
    Application Alias: ZPOAAlias

Click on Save to save your Target Mapping

1.5.4.4.         Create Static Tile

  1. Click on the “plus” tile of Detail Page
  1. Click on “App Launcher # Static” tileto create a Target Mapping
  1. Click on the Static tile you just created

Enter the following details:

  1. General
    Title: Purchase Order App
    Subtitle: Purchase Order App demo for Launchpad
    icon: (choose from value helper)
  2. Navigation
    Semantic Object: ZPOASemObj
    (use value helper here)
    Action: display
    (follow Launchpad navigation conventions, in current demo use simple “display”)

Save it, then we have now created a Static tile.

1.5.4.5.         Create a Group

  1. Click on “plus” bar under “Group” tab.
  2. Enter Title: POA Group
    ID: ZPOAGroup
  3. Click on Save.

Your Group is now created.

1.5.4.6.         Add Catalog to Group

  1. Click on the “plus” tile to add the catalog you created to the group
  1. Click on value helper to to lookup for your catalog
  2. Key in “ZPOACat” to filter and lookup for your catalog and click on it to choose.
  3. Click on the “+” plus button to add the catalog to the group
  1. You have now created a Group and added the catalog to it.

1.5.5.     Create PFCG Role for Catalog and Group

1.5.5.1.         Create Single Role

  1. Execute Transaction PFCG
  2. Enter Role Name:
    ZPOAROLE
  3. Click on “Single Role” button
  1. Enter Description:
    Purchase Order demo Role
  2. Click “save” button
  3. Click on the “Menu” Tab

1.5.5.2.         Add Tile Catalog to Role

  1. Click on the

    (Click on the Arrow and not the button)

  2. Choose “SAP Fiori Tile Catalog” from the list
  3. Enter your Catalog ID and click on “ok”(you can choose Catalog ID by value helper)

1.5.5.3.         Add Group to Single Role

  1. Click on the
    “SAP Fiori Tile Catalog”(Click on the Arrow and not the button)
  2. Choose Group from the list
  3. Enter the Group ID:
    ZPOAGroup
    (choose from value helper)
    And click on “ok”

1.5.5.4.         Add User to Single Role

  1. Click on the User Tab
  2. Enter your User Id
    (use value input helper to add users by batch)
  3. Click on “Save” to save the role.

1.6.           Test Launchpad

1.7.           Trouble shooting tips

1.7.1.     Trace Error Log by /IWFND/ERROR_LOG


To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Ankur Gokhale

    Antoine,

    I created semantic object in /ui2/semobj but it is not getting available in Fiori Designer tool. Is this because I created object in client XX1 and using Fiori Designer tool in client XX2 ? View/Table holding semantic object is cross client.

    (1) 
      1. Ankur Gokhale

        Omer, problem was solved, I am using HUB Deployment where S4Core and gateway services are located on different services. I created semantic objects on gateway server, then things started working fine. The problem was basis guy did not provide Logon access to gateway services.

        (0) 

Leave a Reply