Adding custom pages (HTML or simple text) in ESS Homepage/Areapages (WD ABAP)

Some customers (who were earlier using WD JAVA ESS and Homepage customizing) are using the homepage framework feature to add custom help pages/additional info pages on the ESS Areapages. This feature is not supported out of the box in the new WD ABAP ESS homepage based on launchpad customizing. The main reason for dropping this feature was to simplify ESS menu definition and encourage the use help center and related links concept. In addition many customers did setup complete homepages using content development tools and deployed as HTML without using homepage framework.

This blog explains how this gap in WD ABAP UI can be plugged easily by customers and include HTML pages on areapage level in new ESS menu based on WD ABAP and launchpad customizing. You can use examples in this blog and create more scenarios to dynamically embed content.

Note: ❗

• This blog is meant for WD ABAP developers with basic FPM knowledge and does not explain every minor detail or step to create WD Objects
• The topics mentioned here are only applicable for service map using WD ABAP application HRESS_A_MENU and launchpad customizing
• In this simple example the App Controller and UIBB are implemented in same WD Component but in real projects you may create different implementations

Steps:

• First Step: Create a new WD Component that has capability to display some custom html webpages
  • Create a view and include iFrame element (iFrame example was chosen to display a webpage but you are free to decide)
  • Create component controller and context variables so that a URL/Content to be displayed can be bound to iFrame element
• Second Step: Make sure that WD Component implements following interfaces so that this can be used in FPM configurations. You can add intefaces from the main property page of WD Component (see tab implemented interfaces next to tab used components)
  • IF_FPM_OVP_CONF_EXIT – For usage in OVP floorplan that is used in application HRESS_A_MENU
  • IF_FPM_UI_BUILDING_BLOCK – To be used as UIBB in OVP floorplan
  • In the method OVERRIDE_EVENT_OVP program the code so that based on the selected area page you can display a particular HTML page in addition to service map (sample code attached)
  • In the sample code there is a example that for a target foler (areapage) launched from homepage a particular help web page is displayed in every areapage. You can decide your own logic to decide which help page should be displayed. In our example a folder alias defined in Launchpad customizing is used to decide which help page can be displayed. If you do not want to harcode the helppages then you need some customizing table where mapping is stored. You can implement your own logic to decide what needs to be displayed in help UIBB
• Third Step: Include the WD Component in FPM configuration
  • In HRESS_CC_MENU_OVP or copied customer configuration go to Edit page (page id CONTENTAREA_2) and add UIBB that was created in First step
  • Go General settings -> Floorplan settings -> Application Controller settings and make sure that WD component created in First step is added as Application Controller
  • Decide on layout options if the help pages are displayed side by side or below using standard FPM options of 1 column layout or 2 column layout

Congratulations. You should be done !!  🙂

With this custom UIBB now you are able to display specific HTML pages (or any other information) you like in addition to standard service map displayed from Launchpad customizing. You can try out various variants to think of more customized stuff you want to create in your custom UIBBs.

Hope this blog helps you to provide a basic understanding of how developers can add custom UIBBs to ESS homepage.

If you have done some similar intersting implementations for Homepage then share them with community.

Feedback/comments welcome if you find this useful.

***********************************************************************************

Detailed Screenshots:

Step I & II: Create WD Component and Views, Implement FPM interfaces

Step II: Code snippet for OVERRIDE_EVENT_OVP

METHOD override_event_ovp .

  DATA: lt_content_areas TYPE if_fpm_ovp=>ty_t_content_area,
        ls_content_area  LIKE LINE OF lt_content_areas,
        ld_link_text     TYPE string,
        lr_event         TYPE REF TO cl_fpm_event,
        lr_parameter     TYPE REF TO if_fpm_parameter.

  DATA:  lv_target_folder_alias TYPE string,
         lv_target_url          TYPE string.

  lr_event = io_ovp->get_event( ).

  IF lr_event->mv_event_id = if_fpm_constants=>gc_event-change_content_area.

    CALL METHOD io_ovp->get_content_areas
      IMPORTING
        et_content_area = lt_content_areas.

    READ TABLE lt_content_areas INTO ls_content_area WITH KEY id = ‘CONTENTAREA_2’.
    IF sy-subrc = 0.
      lr_parameter = lr_event->mo_event_data.
*      lr_parameter = io_ovp->mo_event->mo_event_data.
      lr_parameter->get_value(
        EXPORTING
          iv_key = if_fpm_guibb_launchpad=>gc_link_text
        IMPORTING
          ev_value = ls_content_area-title ).
* Set the title to be displayed
      TRY.
          CALL METHOD io_ovp->change_content_area
            EXPORTING
              is_content_area = ls_content_area.

        CATCH cx_fpm_floorplan .
      ENDTRY.

* get the folder alias that was clicked in the homepage
      lr_parameter->get_value(
        EXPORTING
          iv_key = ‘TARGET_APPLICATION_ALIAS’
        IMPORTING
          ev_value = lv_target_folder_alias ).

*    Change the html help area based on the target folder alias
*    You can implement any logic you want and pass the context atttributes for the target view

      DATA lo_nd_helpnode TYPE REF TO if_wd_context_node.
      DATA lo_el_helpnode TYPE REF TO if_wd_context_element.
      DATA ls_helpnode TYPE wd_this->element_helpnode.
      DATA lv_helpurl TYPE wd_this->element_helpnode-helpurl.

* navigate from <CONTEXT> to <HELPNODE> via lead selection
      lo_nd_helpnode = wd_context->get_child_node( name = wd_this->wdctx_helpnode ).

* get element via lead selection
      lo_el_helpnode = lo_nd_helpnode->get_element( ).

      IF lv_target_folder_alias = ‘AREA_PERS_INFO’.  “Name of alias in launchpad
        lv_helpurl = ‘http://en.wikipedia.org/wiki/Employee_Self_Service‘.
      ELSEIF lv_target_folder_alias = ‘AREA_WORKING_TIME’. .
        lv_helpurl = ‘http://en.wikipedia.org/wiki/Working_time‘.
      ELSE.
          lv_helpurl = ‘http://help.sap.com‘.
      ENDIF.

      lo_el_helpnode->set_attribute(
        name =  `HELPURL`
        value = lv_helpurl ).

    ENDIF.
  ENDIF.

ENDMETHOD.

Step III: Include the WD Component in FPM configuration

And Finally the results 🙂

Result 1: Showing Personal Information Area page

Result 2: Showing Record Working Time Area page