Skip to Content
Author's profile photo Rashmi Singh

Configuration of Suite Page Builder (UI5)

Ø  About SAP NetWeaver Gateway

SAP NetWeaver Gateway is a product from SAP that provides access to SAP Business Suite data for lightweight, people-centric applications that can run on a variety of devices and application platforms.

SAP NetWeaver Gateway act as a bridge between the traditional environment of the SAP Business Suite and lightweight needed applications.

SAP NetWeaver Gateway supports the Open Data Protocol (OData) which is a web protocol for querying and updating the data.

SAP NetWeaver Gateway can be deployed in one of two ways in an SAP landscape:

      • Standalone in which SAP NetWeaver Gateway is deployed on a dedicated server. We call it as External Gateway.
      • Embedded. Gateway is installed as an ABAP Add-on and runs on the same system as the SAP Business Suite, so no dedicated server is required to run Gateway. Meaning business logic and data exists in the same system.

       

spb .docx.png

For Remote Gateway, RFC connections are used to fetch data from a system.

For e.g. Suppose you have a HCM system, CRM system etc separately installed in a Customer landscape.

For cost efficient measures, Customer can have a single gateway system from where they can get data from any system either HCM, CRM etc.

So it’s like the hub, like your internet connection. You have a single modem serving many computers, where all systems interact to outside webpages via the gateway

In this scenario, Gateway servers as a security measure so that the actual system is not exposed to outside world.

Gateway Configuration is done so that you test the application in both local and remote gateway (covering all scenarios like HANA and normal db tests). We also have external and local gateways tests so that application should work seamlessly across any setup.

                Some more info:

Q: Is gateway valid for UI5 topics only or is it valid for lower releases also??

A: For any UI5 development gateway is valid. We have to perform these tests ideally. Now this is again up to the product team do the gateway configuration. It’s up to the team which is developing the application; their PO or DM has to give the directives.

Ø  Checking OData Services in Corresponding Gateway

Local Gateway:

You can go and check the services detail and OData activation in transaction “/iwfnd/maint_service” in given backend system .

Here, you will get technical name and description of the services, along with that you will see OData activation detail. Also, since it is local gateway so SAP system alias will be maintained as local.

2.            External Gateway:

You can go and check the services detail and OData activation in transaction “/iwfnd/maint_service” in given Gateway system .

Here, you will get technical name and description of the services, along with that you will see OData activation detail. Since it is an external Gateway, SAP system alias should be maintained with backend system.

Note: If one Gateway system is connected to more than one Backend system. Then we required an additional role like “Y_CLIENT_<System>_<Client>” assigned to your user, related to that particular Backend system and Client detail.

Ø  Configuration of SPB

The Suite Page Builder (SPB) is a UI development toolkit for HTML5 (SAPUI5) applications that acts as a framework to run Collaborative Human Interface Parts (CHIPs). A CHIP is an SAPUI5 application that adheres to specific binding contracts that the SPB defines.

The Suite Page Builder can be configured using the SPB Administrator Page that provides the CHIP and catalog configuration features. The administrator has access to the Administration Page and all of the catalogs in the system. Administrators can perform the following actions:

1.     Add CHIPs to the catalogs

2.     Delete CHIPs from the catalogs

3.     Decide which catalogs are displayed in the end user’s Suite Page Builder

Ø  Maintaining SAP Gateway OData Services

1.     Maintain System Alias

1.1 Create a RFC connection with Type 3 in transaction SM59.

1.2 Local Gateway: Create a local system alias in the Q system.

1.3 External Gateway: Create a system alias in gateway system pointing to Q system.

SPRO Path:

          /wp-content/uploads/2014/04/1_433721.jpg

           /wp-content/uploads/2014/04/2_433802.jpg

2.     Add Suite Page Builder Catalogs

Transaction -> /iwfnd/maint_services

Or,

Navigation Path: SPRO -> SAP Netweaver Gateway-> OData Channel -> Administration -> General Settings -> Activate and Maintain Services

Activate the following OData services for the Suite Page Builder Catalog:

·          /UI2/PAGE_BUILDER_CONF

·          /UI2/PAGE_BUILDER_CUST

·          /UI2/PAGE_BUILDER_PERS

/wp-content/uploads/2014/04/3_433723.png

                3.     To Activate Services in a System.

3.1 Click on “Add Service” button.

3.2 Add the system alias created in step (2) according to the gateway used and hit “Enter”.

3.3 Click on the service to be added.

3.4 Ensure that ICF Node is maintained as “Standard Mode”.

3.5 Save the service in local package.

/wp-content/uploads/2014/04/4_433724.jpg

3.6 Click on “Continue” button till success pop-up comes.

3.7 Go back to the previous screen and check the service that is recently added.

3.8 Double click on the Service and check that

3.9 ODATA is active in “ICF Node” section

·          To activate ODATA, use the navigation menu provided in “ICF Node” button.

/wp-content/uploads/2014/04/5_pdf_433725.jpg

·          The system alias should be according to the external/local gateway used

·          In case one service is called in many backend systems, then define a specific system alias (e.g., for a user role) by adding new system alias using   “Add System Alias” button.

/wp-content/uploads/2014/04/6_433726.jpg

    /wp-content/uploads/2014/04/7_433730.jpg

              Similarly, add other SPB catalog.

  4.     Activating ICF Nodes for Services

Go to ABAP backend system and activate services in transaction SICF

·          Default_host -> SAP -> bc -> bsp -> sap

o    ARSRVC_SUITE_PB

o    ARSRVC_SPB_ADMIN

o    ARSRVC_LPD_C

·          Default_host -> SAP -> bc -> ui5_ui5 -> sap

o    ARSRVC_SUITE_PB

o    ARSRVC_SPB_ADMIN

o    ARSRVC_LPD_C

·          Default_host -> SAP -> public -> bc

o    ui2

o    ui5_ui5

/wp-content/uploads/2014/04/8_433731.jpg

In addition to above services, activate following SICF services as well in transaction SICF

·          Startup Service: /default_host/sap/bc/ui2/start_up

·          Image Upload Service:/default_host/sap/bc/ui2suite/image

Ø  External SAP NW Gateway System has a Different Client to the Backend ABAP System

To avoid an incorrect client user credentials request when running Suite Page Builder, configure the ICF nodes as described below:

1.   In your ABAP backend system, go to transaction SICF.

2.     The Maintain Services screen displays.

3.     Choose Goto -> External Alias.

4.     Select “Default Host” and choose External Alias -> Create.

5.     Choose “Trg Element” and navigate to SAP -> BC -> UI5_UI5 -> SAP.

6.     Double-click the SAP node.

7.     In the “External Alias” field, enter /sap/bc/ui5_ui5/sap and enter a meaningful description.

8.     Choose the Logon Data tab. In the Procedure field, select Required with Logon Data.

9.     Enter the backend client information as required and save your entries.

10.   Log on to SAP NetWeaver Gateway system, call transaction SICF and navigate to the respective service that the landing page uses.

11.   Double-click the service PAGE_BUILDER_PERS.

12.   Choose the Logon Data tab. In the Procedure field, select Required with Logon Data.

13.   Repeat the steps (10- 11) also for the following services:

·         PAGE_BUILDER_CONF

·         PAGE_BUILDER_CUST

Ø  Testing the Admin Page

After all of the prerequisite configurations are done, you must now be able to run the SPB admin page.

The SPB Administrator page can be launched with the URL.

https://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_spb_admn/main.html

Ø  Setting up HR Professional

Using SAPUI5 technology, the landing page is a web-based UI for HR professionals offering a single point of access to employee and organizational master data.

Activate the required services for your application in the corresponding system and check the respective application in the landing page.

            

             List of oData services to be activated for HR Renewal 1.0:

Topic

OData Service Name

Suite Page Builder

/UI2/PAGE_BUILDER_CONF

Suite Page Builder

/UI2/PAGE_BUILDER_CUST

Suite Page Builder

/UI2/PAGE_BUILDER_PERS

Employee Self-Service

HRESS_EMP_LANE_PROF_SERVICE

Employee Self-Service

HRESS_EMP_WORK_FEEDS_SERVICE

Employee Self-Service

HRESS_WRK_FEED_SUB_OVERVIEW_SERVICE

Employee Self-Service

HRXSS_PERS_KEY

Employee Self-Service

HRESS_EMP_PROFILE_SERVICE

Employee Self-Service

HRESS_EMP_LSO_SERVICE

Employee Self-Service

HRESS_PAYSLIP_SERVICE

Employee Self-Service

HRESS_LEAVE_REQUEST_SERVICE

Employee Self-Service

HRESS_TEAM_CALENDAR_SERVICE

Employee Self-Service

PAO_SEARCH_SERVICE

Employee Self-Service

/IWFND/NOTIFICATIONSTORE

Employee Self-Service

/UI2/LAUNCHPAD

Manager Self-Service

HROVIS_ORGCHART_SERVICE

Manager Self-Service

HRESS_EMP_WORK_FEEDS_SERVICE

Manager Self-Service

HROVIS_ORGCHART_SERVICE

Manager Self-Service

HRXSS_PERNR_MEMID_SERVICE

Manager Self-Service

HRXSS_PERS_KEY

Manager Self-Service

HRMSS_OTHER_APPROVALS_SERVICE

Manager Self-Service

HRMSS_LEAVE_APPROVAL_SERVICE

Manager Self-Service

HRESS_TEAM_CALENDAR_SERVICE

Manager Self-Service

HRESS_EMP_PROFILE_SERVICE

Manager Self-Service

HRMSS_EMPLOYEE_NOTES_SERVICE

Manager Self-Service

PAO_SEARCH_SERVICE

Manager Self-Service

PAO_ACTIONMENU

Manager Self-Service

HRGEN_QUICK_VIEW_SERVICE

Manager Self-Service

/IWPGW/TASKPROCESSING

Manager Self-Service

/IWFND/NOTIFICATIONSTORE

Manager Self-Service

/UI2/LAUNCHPAD

Manager Self-Service

/UI2/QUICKVIEW

HR Professional

PAO_STREAMWORK

HR Professional

PAO_ACTIONMENU

HR Professional

PAO_PROCESSES

HR Professional

PAO_USERCONTEXT

HR Professional

PAO_ORGANIZATION_FAVORITES

HR Professional

PAO_SEARCH_SERVICE

HR Professional

/IWPGW/TASKPROCESSING

HR Professional

/UI2/QUICKVIEW

HR Professional

/UI2/LAUNCHPAD

Workforce Viewer

HROVIS_ORGCHART_SERVICE 

Workforce Viewer

HRGEN_QUICK_VIEW_SERVICE

Workforce Viewer

PAO_ACTIONMENU

Workforce Viewer

UI2/QUICKVIEW               

Workforce Viewer

UI2/LAUNCHPAD

*So far above services have been delivered to the Customers. As per the new developments, new services will be added to the catalog.

Ø  To Check the Path of OData Channel in SPRO in Different NetWeaver Release

1.     SAP NetWeaver 7.00 and 7.01

The OData Channel configuration settings are available in the Implementation Guide (IMG) in the system where software component IW_FND is deployed. In the SAP Reference IMG navigate to SAP NetWeaver Gateway.

/wp-content/uploads/2014/04/9_433732.gif

(OData Channel IMG for IW_FND in 7.00 and 7.01)

2.     SAP NetWeaver 7.02 and 7.31

The OData Channel configuration activities are listed in the Implementation Guide (IMG) in the system where software component IW_FND is deployed. In the SAP Reference IMG navigate to SAP NetWeaver Gateway OData Channel .

/wp-content/uploads/2014/04/10_433736.gif

(OData Channel IMG in IW_FND)

3. SAP NetWeaver 7.40

If you use software component SAP_GWFND in SAP NetWeaver 7.40, IMG activities for SAP NetWeaver Gateway Foundation 7.40 are available. In the SAP Reference IMG navigate to SAP NetWeaver Gateway and SAP NetWeaver Gateway Service Enablement . There you find all the relevant OData Channel IMG activities.

References:

http://help.sap.com/saphelp_uiaddon10/helpdata/en/bf/69de830b09406caad91de8cdcaa349/content.htm?frameset=/en/c6/d2b078316041ac9471c4f7069353e2/frameset.htm

http://wiki.scn.sap.com/wiki/display/BBA/SAP+NetWeaver+Gateway

Assigned Tags

      32 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Awesome Rashmi

      Gr8 work, It's really helpful!!!!. I've a question for u? by configuring ODATA & SPB we can get the landing page in WEB UI. what about the services config after activating them?? do we have any space for config?? šŸ˜•

      Await for more UI5 docs ℹ from u soon.. keep posting!!!

      Cheers šŸ˜‰

      Pradyp

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Hi Pradyp,

      Thanks a lot for your feedback.

      Regarding the services config , these are SAP's standard deliverable services

      which will be available in the system once customers install the corresponding component.

      And I will upload more UI5 Doc soon šŸ™‚

      Thanks & Regards,

      Rashmi

      Author's profile photo n s
      n s

      Hi Rashmi,

      When i test SPB admin page using URL of type "https://<server>:<port>/sap/bc/ui5_ui5/sap/arsrvc_spb_admn/main.html i get error as "HTTP 404 not found.

      Any idea what might be wrong?

      Regards,

      Navya

      Author's profile photo Former Member
      Former Member

      gud job

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you

      Author's profile photo Former Member
      Former Member

      Good one

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you

      Author's profile photo Sahir Nidagundi
      Sahir Nidagundi

      Thanks for sharing the info. This will be very useful for folks who are to get started with HR Renewal UI5 based applications.

      Regards.

      Author's profile photo Alex Mathew
      Alex Mathew

      This is very very detailed and so useful. Can we have something similar for Renewal 2.0 FP0 and FP1 as well! šŸ™‚

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you and surely I will try you upload similarly for Renewal 2.0 FP0 and FP1.

      Author's profile photo Former Member
      Former Member

      Great article!!! Thank you!

      Author's profile photo Sikindar T
      Sikindar T

      Excellent

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you

      Author's profile photo Former Member
      Former Member

      Very well done!  It's blogs like this that let me know that the SAP user community is filled with people willing to help each other out. 

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you so much šŸ™‚

      Author's profile photo Siddharth Rajora
      Siddharth Rajora

      Really Fabulous work, You spent considerable time on this. We need to simplify through this blogs for configuring landing pages:)

      Author's profile photo Rashmi Singh
      Rashmi Singh
      Blog Post Author

      Thank you

      Author's profile photo Marco Jansen
      Marco Jansen

      Dear Rashmi,

      Great job! Thank you!

      Could you please add the Information which Alias Must be used for which ODATA Service?

      best regards

      MArco

      Author's profile photo Former Member
      Former Member

      Good Information.

      Author's profile photo Shweta Ganti
      Shweta Ganti

      Hi Rashmi,

      We are trying to access the Suite Builder Admin page but are getting this error, can you please help:

      suite builder page error.JPG

      It is not letting us proceed with any chip configuration.

      Author's profile photo Shweta Ganti
      Shweta Ganti

      Any help is appreciated on the above reported issue.

      Author's profile photo Sandeep Sharma
      Sandeep Sharma

      Dont bother about this issue , this is just a TEST chip. THis would not affect anything

      Author's profile photo n s
      n s

      Hi,

      Were you able to resolve that issue. I am facing same issue. It doesn't allow me to proceed with chip configuration.

      Regards,

      Navya

      Author's profile photo Former Member
      Former Member

      Excellent article Rashmi,  Appreciate your work on this.

      We have done the similar config and followed your document.as one of the reference šŸ™‚

      we are using external gateway hub and the landing page is coming, but when we click on anything in the landing page like leave request or employee profile, it is thinking it is in gateway system and  asking for user/pw for the gateway system instead of the backend system. Obviously we are doing something wrong with the external gateway hub connection to backend.  Do we need to change any other SICF node other than SAP -> BC -> UI5_UI5 -> SAP in the backend and the logon information is backend detail as you mentioned correct?? and in the gateway system only the services you mentioned needs to be changed right? Is there anything else we need to do?

      Appreciate your help on this issue.

      Author's profile photo Former Member
      Former Member

      Good article Rashmi !

      Hi Andi

      We are in the process of setting up HR Renewal landing page with External Gateway Hub and Web-Dispatcher but so far we are not able to do it.

      It is still very un-clear to us as what would be the steps.

      We have the following landscape.

      1. SAP ECC (HCM Backend with HR Renewal Components)

      2. Gateway (HUB/Standalone System)

      3. Web dispatcher (as Reverse Proxy)


      We have activated all services (OData / SICF) in the standalone Gateway system, the alias in the gateway is pointing to the ECC backend system for the OData services activated.


      In the backend ECC system we have configured the PFCG role SAP_PAO_HRPROFESSIONAL_4 and assigned it to the relevant user. But when we try to execute the Landing Page from with the role itself by selecting "execute" in the context it takes us to the Landing Page URL in the standalone gateway but displays the message that the user has not been assigned any catalog.


      So the whole scenario is working as below:

      1- We have activated the OData and SICF services in the Gateway (HUB/Standalone)

      2- We have created a user TEST in both the Gateway and the ECC system.

      3- We have assigned a copy of PFCG role SAP_PAO_HRPROFESSIONAL_4 to the user TEST in ECC System.

      4. We have created a user TEST in Gateway system and assigned it the routine PFCG roles for logging onto SAP ECC System as a trusted system.

      5. A web Dispatcher has been configured as a reverse proxy and the Gateway can be connected to by using the Web Dispathcer.

      6. The URL that we have defined in the ROLE AP_PAO_HRPROFESSIONAL_4 points to the gateway (through web dispatcher)


      So now when we are trying to execute this URL in ECC (http://webdispatcher.xxx.xxx:8144/sap/bc/ui5_ui5/sap/ARSRVC_SUITE_PB/main.

      html?page=SPB_LANDING_PAGE) it gives a message that "No catalogs assigned to your user; contact your system administrator immediately".

      We have not assigned the catalog to the TEST user in Gateway system because the catalog does not exist in the Gateway system, it only exists in the SAP ECC System.


      We know that by using the local gateway on the SAP ECC system we can get rid of this problem. But we want to use the standalone/HUB Gateway system which is already being used in our SAP Landscape. Can you please guide us as what are we missing?



      Kind Regards

      Asim

      Author's profile photo Former Member
      Former Member

      Asim, Did you configure in GW Hub the landing page services to connect to backend system in system alias settings??

      Hope that fixes the issue, we still have challenges enabling services from Hub.

      Regards, Andi

      Author's profile photo Ilke Tutku Senol
      Ilke Tutku Senol

      Andi Did you solve the problem?

      Author's profile photo Ilke Tutku Senol
      Ilke Tutku Senol

      Hello Asim,

      We're trying to use same configuration with you and got problem. Did you solve the problem with your problem?

      Author's profile photo Gourav Kumar Jena
      Gourav Kumar Jena

      Good work Rashmi. it's really a helpful document. Hope to see more blogs from you.

      Regards,

      Gourav

      Author's profile photo Pikakala Sebastian
      Pikakala Sebastian

      Nice Blog, I would like to share something, I had all this configuration setup, however when I tested the ui5, the service doesn't seem to come up on the browser, infact none of tests the services were successful, just restarted  the webdisp and I was able to connect to the services.

      Gracias

      Seb

      Author's profile photo Anusha Saxena
      Anusha Saxena

      Very Informative blog. Thanks for sharing !

      Author's profile photo Former Member
      Former Member

      Hi guys,

       

      Please help, can't seem to get the Launchpad RoleĀ and instance to appearĀ onĀ Suite Builder Admin page.

       

       

      My screen

       

      Thank you