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.
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:
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
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.
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.
· 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.
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
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.
(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 .
(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 and . There you find all the relevant OData Channel IMG activities.
References:
http://wiki.scn.sap.com/wiki/display/BBA/SAP+NetWeaver+Gateway
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
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
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
gud job
Thank you
Good one
Thank you
Thanks for sharing the info. This will be very useful for folks who are to get started with HR Renewal UI5 based applications.
Regards.
This is very very detailed and so useful. Can we have something similar for Renewal 2.0 FP0 and FP1 as well! š
Thank you and surely I will try you upload similarly for Renewal 2.0 FP0 and FP1.
Great article!!! Thank you!
Excellent
Thank you
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.
Thank you so much š
Really Fabulous work, You spent considerable time on this. We need to simplify through this blogs for configuring landing pages:)
Thank you
Dear Rashmi,
Great job! Thank you!
Could you please add the Information which Alias Must be used for which ODATA Service?
best regards
MArco
Good Information.
Hi Rashmi,
We are trying to access the Suite Builder Admin page but are getting this error, can you please help:
It is not letting us proceed with any chip configuration.
Any help is appreciated on the above reported issue.
Dont bother about this issue , this is just a TEST chip. THis would not affect anything
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
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.
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
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
Andi Did you solve the problem?
Hello Asim,
We're trying to use same configuration with you and got problem. Did you solve the problem with your problem?
Good work Rashmi. it's really a helpful document. Hope to see more blogs from you.
Regards,
Gourav
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
Very Informative blog. Thanks for sharing !
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