abap2UI5

Appearance

OData ​

By default, you bind public attributes of your class to UI5 properties with _bind and _bind_edit. For cases where you need access to large datasets, you can also use existing OData services. OData offers features like pagination and growing that improve performance with large amounts of data.

Define Additional Model ​

As an example, we use the test OData service /sap/opu/odata/DMO/UI_FLIGHT_R_V2/, available on most ABAP systems. Make sure the service is publicly reachable. The method below defines the model and exposes it under the name FLIGHT:

abap
client->follow_up_action( client->_event_client(
    val = z2ui5_if_client=>cs_event-set_odata_model
    t_arg = VALUE #(
        ( `/sap/opu/odata/DMO/UI_FLIGHT_R_V2/` )
        ( `FLIGHT` ) ) ) ).

Bind Data ​

Next, bind the OData model to your view definition. Since we use a non-default model, name the model explicitly for each binding:

abap
DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table(
    items = `{FLIGHT>/Airport}`
    growing = abap_true ).

tab->columns(
    )->column( )->text( `AirportID` )->get_parent(
    )->column( )->text( `Name` )->get_parent(
    )->column( )->text( `City` )->get_parent(
    )->column( )->text( `CountryCode` ).

tab->items( )->column_list_item( )->cells(
    )->text( `{FLIGHT>AirportID}`
    )->text( `{FLIGHT>Name}`
    )->text( `{FLIGHT>City}`
    )->text( `{FLIGHT>CountryCode}` ).

The growing property loads data in batches instead of all at once, boosting performance.

Full Example ​

The full source code:

abap
  METHOD z2ui5_if_app~main.

    DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table(
        items   = `{FLIGHT>/Airport}`
        growing = abap_true ).

    tab->columns(
        )->column( )->text( `AirportID` )->get_parent(
        )->column( )->text( `Name` )->get_parent(
        )->column( )->text( `City` )->get_parent(
        )->column( )->text( `CountryCode` ).

    tab->items( )->column_list_item( )->cells(
        )->text( `{FLIGHT>AirportID}`
        )->text( `{FLIGHT>Name}`
        )->text( `{FLIGHT>City}`
        )->text( `{FLIGHT>CountryCode}` ).

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

    client->follow_up_action( client->_event_client(
        val   = z2ui5_if_client=>cs_event-set_odata_model
        t_arg = VALUE #(
            ( `/sap/opu/odata/DMO/UI_FLIGHT_R_V2/` )
            ( `FLIGHT` ) ) ) ).

ENDMETHOD.

Multiple OData Models ​

You can also bind multiple OData models at once. For example, to bind an extra OData model under the name TRAVEL:

abap
DATA(tab) = z2ui5_cl_xml_view=>factory( )->page( )->table(
    items   = `{TRAVEL>/BookingSupplement}`
    growing = abap_true ).

tab->columns(
    )->column( )->text( `TravelID` )->get_parent(
    )->column( )->text( `BookingID` )->get_parent(
    )->column( )->text( `BookingSupplementID` )->get_parent(
    )->column( )->text( `SupplementID` )->get_parent( ).

tab->items( )->column_list_item( )->cells(
    )->text( `{TRAVEL>TravelID}`
    )->text( `{TRAVEL>BookingID}`
    )->text( `{TRAVEL>BookingSupplementID}`
    )->text( `{TRAVEL>SupplementID}` ).

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

client->follow_up_action( client->_event_client(
    val   = z2ui5_if_client=>cs_event-set_odata_model
    t_arg = VALUE #(
        ( `/sap/opu/odata/DMO/API_TRAVEL_U_V2/` )
        ( `TRAVEL` ) ) ) ).

For a complete code snippet, see the sample Z2UI5_CL_DEMO_APP_315.

Metadata Binding ​

In SAP contexts, OData services often carry extra annotations. Check the metadata definition of the service /sap/opu/odata/DMO/API_TRAVEL_U_V2/$metadata. The definitions for the entity Currency:

xml
<EntityType Name="CurrencyType" sap:label="Währung" sap:content-version="1">
<Key>
<PropertyRef Name="Currency"/>
</Key>
<Property Name="Currency" Type="Edm.String" Nullable="false" MaxLength="5" sap:display-format="UpperCase" sap:text="Currency_Text" sap:label="Währung" sap:quickinfo="Währungsschlüssel" sap:semantics="currency-code"/>
<Property Name="Currency_Text" Type="Edm.String" MaxLength="40" sap:label="Beschreibung" sap:creatable="false" sap:updatable="false"/>
<Property Name="Decimals" Type="Edm.Byte" sap:label="Dezimalstellen" sap:quickinfo="Anzahl Dezimalstellen"/>
<Property Name="CurrencyISOCode" Type="Edm.String" MaxLength="3" sap:display-format="UpperCase" sap:label="ISO-Code" sap:quickinfo="ISO-Währungscode"/>
<Property Name="AlternativeCurrencyKey" Type="Edm.String" MaxLength="3" sap:display-format="UpperCase" sap:label="Alternativschlüssel" sap:quickinfo="Alternativer Schlüssel"/>
<Property Name="IsPrimaryCurrencyForISOCrcy" Type="Edm.Boolean" sap:display-format="UpperCase" sap:label="primär" sap:quickinfo="primärer SAP-Währungscode zum ISO-Code"/>
</EntityType>

Use these SAP annotations in the UI5 view to reuse backend translations via the label property. The metadata binding path follows this pattern:

text
{MODEL>/#EntityType/PropertyName/@sap:annotation}
  • TRAVEL> — the named OData model
  • /#Currency — # switches to the metadata document, Currency is the entity type name (from <EntityType Name="CurrencyType">)
  • /Currency — the property name within that entity type
  • /@sap:label — the SAP annotation attribute (here: the translated label text)

So {TRAVEL>/#Currency/Currency/@sap:label} resolves to the value of sap:label="Währungsschlüssel" from the metadata — shown in the user's logon language.

abap

DATA(tab) = page->table(
    items   = `{TRAVEL>/Currency}`
    growing = abap_true ).

tab->columns(
    )->column( )->text( `{TRAVEL>/#Currency/Currency/@sap:label}` )->get_parent(
    )->column( )->text( `{TRAVEL>/#Currency/Currency_Text/@sap:label}` )->get_parent(
    )->column( )->text( `{TRAVEL>/#Currency/Decimals/@sap:label}` )->get_parent(
    )->column( )->text( `{TRAVEL>/#Currency/CurrencyISOCode/@sap:label}` ).

tab->items( )->column_list_item( )->cells(
    )->text( `{TRAVEL>Currency}`
    )->text( `{TRAVEL>Currency_Text}`
    )->text( `{TRAVEL>Decimals}`
    )->text( `{TRAVEL>CurrencyISOCode}` ).

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

client->follow_up_action( client->_event_client(
    val   = z2ui5_if_client=>cs_event-set_odata_model
    t_arg = VALUE #(
        ( `/sap/opu/odata/DMO/API_TRAVEL_U_V2/` )
        ( `TRAVEL` ) ) ) ).

UI5 now picks each column title in the user's language automatically.