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 zcl_sample_title DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.

CLASS zcl_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. Outside the launchpad set_title_launchpad does nothing — silently, there is no shell to tell — so an app that runs in both places sends both.

Favicon ​

The icon in the browser tab is set the same way, with set_favicon and the URL of the image as the first argument — an ICF path on the system, or a data: URL:

abap
client->follow_up_action(
    val   = client->cs_event-set_favicon
    t_arg = VALUE #( ( `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23f60'/></svg>` ) ) ).

The frontend reuses the <link rel="icon"> the page already has rather than appending a second one, so an app that switches its icon leaves nothing behind. A URL with a scheme other than http, https, data or blob is refused and logged.

Embedded ​

Title and favicon belong to the page. An app that does not own its page — one embedded in a Fiori elements page or another UI5 app with the embed control, or in the task pane of Excel — leaves both to its host: set_title and set_favicon are ignored there, and the launchpad title goes through set_title_launchpad as before.

Working Samples ​

Complete apps from the sample catalog that use what this page describes. Each is a single class in abap2UI5/samples unless its row names another of the three sample repositories — pull that repository with abapGit and start the class 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