abap2UI5

Appearance

Title ​

Set the text the browser shows in the tab and window title bar.

The running app is the only place this is decided. The page abap2UI5 generates always carries <title>abap2UI5</title> — that is what the tab says while UI5 boots, before any app can speak — and from the first roundtrip on it says whatever the app last set.

Standalone ​

To change the title after the app is running — for example, to reflect the current record — call the set_title frontend event from the backend:

abap
CLASS z2ui5_cl_sample_title DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS z2ui5_cl_sample_title IMPLEMENTATION.
  METHOD z2ui5_if_app~main.

    CASE abap_true.

      WHEN client->check_on_init( ).
        DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
            )->ele( n = `View` ns = `mvc`
                )->a( n = `xmlns`     v = `sap.m`
                )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`

                )->ele( `Page`
                    )->tag( `Button`
                        )->a( n = `text`  v = `change title`
                        )->a( n = `press` v = client->_event( `RENAME` ) ).

        client->view_display( view->stringify( ) ).


      WHEN client->check_on_event( `RENAME` ).
        client->follow_up_action(
            val   = client->cs_event-set_title
            t_arg = VALUE #( ( `Invoice 4711` ) ) ).

    ENDCASE.

  ENDMETHOD.
ENDCLASS.

Launchpad ​

When the app runs inside an SAP Fiori Launchpad shell, use the dedicated set_title_launchpad event instead. It forwards the title to the shell's ShellUIService rather than setting document.title:

abap
client->follow_up_action(
    val   = client->cs_event-set_title_launchpad
    t_arg = VALUE #( ( `Invoice 4711` ) ) ).

Use set_title for the browser tab/window title (standalone) and set_title_launchpad for the launchpad shell title.

Working Samples ​

Complete apps from the sample catalogue that use what this page describes. Each is a single class — pull the repository with abapGit and start it with ?app_start=<class>.

SampleClass
Set the Tab Title (A)Z2UI5_CL_SMP_APP_125
Set the Tab Favicon (A)Z2UI5_CL_SMP_APP_491