Integration with SAPUI5 Applications in WebClient UI via embedding

WebClient UI offers a reusable component to embed SAPUI5 applications inside the work content area in standalone mode. You can create links in the main menu to launch SAPUI5 applications. You can also map external navigation from SAPUI5 App to another WebClient UI Application.

For example, you can create a Navigation link from the User Menu to launch SAPUI5 application within the L-shape.

This is how an embedded application will be displayed inside WebClient UI.

Embedded SAPUI5 App in WebClient UI

The procedure is documented in SAP Help

• Create a parameter handler class for the navigation link. This class must implement interface IF_UI_LINK_PARAMETER_CLASS.

For example, you can see demo class CL_WCF_UI5_EMBED_PARAM_TEST. Implement methods as documented in SAP help link by passing the navigation information.

The navigation descriptor parameters are used for navigation to SAPUI5 App. You can also  redirect the navigation actions from SAPUI5 to WebClient UI Apps by mapping it to the WebClient Target ID using parameters.

  METHOD IF_UI_LINK_PARAMETER_CLASS~CREATE_PARAMETER_OBJECT.
    DATA: lr_nav_object       TYPE REF TO if_crm_ui_navigation_object,
          lr_nav_descriptor   TYPE REF TO cl_wcf_flp_nav_descriptor,
          lt_parameters       TYPE tihttpnvp,
          lt_param            TYPE ihttpnvp,
          lv_application_hash TYPE string.

   "Mandatory parameter
    lt_param-name = 'sap-ui-app-id'.
    lt_param-value = 'sap.ui.demoapps.rta.fiorielements'.
    APPEND lt_param TO lt_parameters.

    lv_application_hash = '#Action-toRtaFioriElementsDemoApp'.

    CREATE OBJECT lr_nav_descriptor
      EXPORTING
        iv_navigation_object = lr_nav_object
        iv_semantic_object   = ''
        iv_semantic_action   = ''
        iv_local_field_name  = ''
        iv_application_hash  = lv_application_hash
        it_parameters        = lt_parameters.
    rv_result ?= lr_nav_descriptor.
  ENDMETHOD.

• Create Logical Link using transaction CRMC_UI_NBLINKS. Use the parameter class created in the previous step and Target Id: WCFUI5EMB.

This logical link can be used for navigation via: Work Centers, Work Center Link Groups and Direct Link Groups.

In this example, I am going to create a Work Center for navigation to embedded SAPUI5 App.

• Using transaction CRMC_UI_NBLINKS, double click on node Define Work Centers and create a new Work Center. Assign the Logical Link ID created earlier.

Work Center

• Using transaction WCF_CUST, check the Navigation Bar Profile of your Business Role under Business Roles > Define Business Role.

Business Role

• Using transaction CRMC_UI_NBLINKS, choose the Navigation Bar Profile for your Business Role. In the customizing activity ‘Assign Work Centers to Navigation Bar Profile‘, add the Work Center created above. You can also use the logical link in ‘Direct Link Groups’ and ‘Home Page’

Assign Work Center to Navigation Bar Profile

Finally, launch the WebClient UI in standalone mode. The ‘Embedded SAPUI5 App’ link should be available in App menu.

This feature is available for WebClient UI Applications in SAP S/4HANA (Release SAP S/4HANA 2020 FPS1)