Comparison Pattern

" @keywords comparisonpattern comparison pattern sap.m compare items side app table toolbar title toolbarspacer
" @summary The pattern allows users to select multiple items from an sap.m.Table and display information about them in a structured way - all items are displayed next to each other for easy comparison, based on their specifics.
CLASS z2ui5_cl_smpc_app_012 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_product,
        product_id      TYPE string,
        category        TYPE string,
        main_category   TYPE string,
        tax_tarif_code  TYPE string,
        supplier_name   TYPE string,
        weight_measure  TYPE string,
        weight_unit     TYPE string,
        description     TYPE string,
        name            TYPE string,
        date_of_sale    TYPE string,
        product_pic_url TYPE string,
        status          TYPE string,
        quantity        TYPE string,
        uom             TYPE string,
        currency_code   TYPE string,
        price           TYPE p LENGTH 8 DECIMALS 2,
        width           TYPE string,
        depth           TYPE string,
        height          TYPE string,
        dim_unit        TYPE string,
        selected        TYPE abap_bool,
      END OF ty_s_product.
    TYPES ty_t_product TYPE STANDARD TABLE OF ty_s_product WITH EMPTY KEY.
    TYPES:
      BEGIN OF ty_s_comp_value,
        text        TYPE string,
        description TYPE string,
        visible     TYPE abap_bool,
      END OF ty_s_comp_value.
    TYPES ty_t_comp_value TYPE STANDARD TABLE OF ty_s_comp_value WITH EMPTY KEY.
    TYPES:
      BEGIN OF ty_s_comp_prop,
        key    TYPE string,
        values TYPE ty_t_comp_value,
      END OF ty_s_comp_prop.
    TYPES ty_t_comp_prop TYPE STANDARD TABLE OF ty_s_comp_prop WITH EMPTY KEY.

    DATA t_products      TYPE ty_t_product.
    DATA t_comp_products TYPE ty_t_product.
    DATA t_comp_props    TYPE ty_t_comp_prop.
    DATA pages_count     TYPE i.
    DATA is_desktop      TYPE abap_bool.
    DATA compare_text    TYPE string.
    DATA compare_visible TYPE abap_bool.

  PROTECTED SECTION.
    TYPES:
      BEGIN OF ty_s_key,
        key   TYPE string,
        field TYPE string,
      END OF ty_s_key.
    TYPES ty_t_key TYPE STANDARD TABLE OF ty_s_key WITH EMPTY KEY.

    DATA client      TYPE REF TO z2ui5_if_client.
    DATA first_item  TYPE i.
    DATA check_page2 TYPE abap_bool.

    METHODS view_display.
    METHODS on_event.
    METHODS comparison_build.
    METHODS comparison_props_build.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_012 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      model_init( ).
      view_display( ).
    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    " the original's router matches #/Page2 directly (a deep link, a reload):
    " the live hash rides in s_config-hash on every request, so a render whose
    " hash carries it enters the comparison - with nothing selected it stays
    " empty, exactly the original's cold #/Page2
    IF check_page2 = abap_false AND contains( val = client->get( )-s_config-hash sub = `/Page2` ).
      comparison_build( ).
      check_page2 = abap_true.
    ENDIF.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    " the sample's App/Main/Comparison views merged into one view: the App hosts both pages, the router's navTo becomes a NavContainer `to` frontend action
    view->ele( n = `View` ns = `mvc`
        )->a( n = `height`      v = `100%`
        )->a( n = `xmlns`       v = `sap.m`
        )->a( n = `xmlns:mvc`   v = `sap.ui.core.mvc`
        )->a( n = `xmlns:f`     v = `sap.f`
        )->a( n = `xmlns:cards` v = `sap.f.cards`
        )->a( n = `xmlns:l`     v = `sap.ui.layout`

        )->ele( `App`
            )->a( n = `id` v = `rootControl`

            )->ele( `Page`
                )->a( n = `title` v = `First Page`

                )->ele( `content`
                    )->ele( `Table`
                        )->a( n = `id`              v = `idProductsTable`
                        )->a( n = `selectionChange` v = client->_event( `SELECTION` )
                        )->a( n = `mode`            v = `MultiSelect`
                        )->a( n = `inset`           v = `false`
                        )->a( n = `items`           v = |\{ path: '{ client->_bind_path( t_products ) }', sorter: \{ path: 'NAME' \} \}|

                        )->ele( `headerToolbar`
                            )->ele( `Toolbar`
                                )->tag( `Title`
                                    )->a( n = `text`  v = `Laptops`
                                    )->a( n = `level` v = `H2`
                                )->tag( `ToolbarSpacer`
                                " the controller's setText/setVisible on selection replaced by bound model properties
                                )->tag( `Button`
                                    )->a( n = `id`      v = `compareBtn`
                                    )->a( n = `text`    v = client->_bind( compare_text )
                                    )->a( n = `visible` v = client->_bind( compare_visible )
                                    )->a( n = `press`   v = client->_event( `COMPARE` )

                            )->end(
                        )->end(
                        )->ele( `columns`
                            )->ele( `Column`
                                )->tag( `Text`
                                    )->a( n = `text` v = `Product`

                            )->end(
                            )->ele( `Column`
                                )->a( n = `hAlign`         v = `Center`
                                )->a( n = `width`          v = `12em`
                                )->a( n = `minScreenWidth` v = `Tablet`
                                )->a( n = `demandPopin`    v = `true`

                                )->tag( `Text`
                                    )->a( n = `text` v = `Quantity`

                            )->end(
                            )->ele( `Column`
                                )->a( n = `minScreenWidth` v = `Tablet`
                                )->a( n = `demandPopin`    v = `true`
                                )->a( n = `hAlign`         v = `Center`

                                )->tag( `Text`
                                    )->a( n = `text` v = `Weight`

                            )->end(
                            )->ele( `Column`
                                )->a( n = `hAlign` v = `End`

                                )->tag( `Text`
                                    )->a( n = `text` v = `Unit Price`

                            )->end(
                        )->end(
                        )->ele( `items`
                            " selected two-way binding added to read the multi-selection in the SELECTION handler (getSelectedContextPaths equivalent)
                            )->ele( `ColumnListItem`
                                )->a( n = `vAlign`   v = `Middle`
                                )->a( n = `type`     v = `Inactive`
                                )->a( n = `selected` v = `{SELECTED}`

                                )->ele( `cells`
                                    )->tag( `ObjectIdentifier`
                                        )->a( n = `title` v = `{NAME}`
                                        )->a( n = `text`  v = `{PRODUCT_ID}`
                                    )->tag( `Input`
                                        )->a( n = `value`       v = `{QUANTITY}`
                                        " the ORIGINAL writes type="{Text}" (Main.view.xml): it meant the
                                        " literal enum value and wrote a binding, so the property falls back
                                        " to its default. Ported verbatim rather than repaired
                                        " abap2ui5lint-disable-next-line unknown-binding-path -- the sample's own quirk
                                        )->a( n = `type`        v = `{Text}`
                                        )->a( n = `description` v = `{UOM}`
                                        )->a( n = `fieldWidth`  v = `{60%}`
                                    )->tag( `ObjectNumber`
                                        )->a( n = `number` v = `{WEIGHT_MEASURE}`
                                        )->a( n = `unit`   v = `{WEIGHT_UNIT}`
                                    )->tag( `ObjectNumber`
                                        )->a( n = `number` v = |\{ parts:[\{path:'PRICE'\},\{path:'CURRENCY_CODE'\}], type: 'sap.ui.model.type.Currency', formatOptions: \{showMeasure: false\} \}|
                                        )->a( n = `unit`   v = `{CURRENCY_CODE}`

                                )->end(
                            )->end(
                        )->end(
                    )->end(
                )->end(
            )->end(
            )->ele( n = `DynamicPage` ns = `f`
                )->a( n = `id`    v = `page-comparison`
                )->a( n = `class` v = `sapUiComparisonContainer`

                )->ele( n = `title` ns = `f`
                    " the original's stateChange handler (add/removeSnappedContent Carousel animation workaround) is dropped - imperative aggregation surgery
                    )->ele( n = `DynamicPageTitle` ns = `f`
                        )->a( n = `id`               v = `dynamic-page`
                        )->a( n = `backgroundDesign` v = `Transparent`

                        )->ele( n = `heading` ns = `f`
                            )->tag( `Title`
                                )->a( n = `text` v = `Second Page`

                        )->end(
                        )->ele( n = `snappedContent` ns = `f`
                            )->ele( `Carousel`
                                )->a( n = `height`                 v = `auto`
                                )->a( n = `class`                  v = `sapUiSmallMarginBottom`
                                )->a( n = `id`                     v = `carousel-snapped`
                                )->a( n = `pageChanged`            v = client->_event( val = `PAGE_CHANGED` arg = `${$parameters>/activePages/0}` )
                                )->a( n = `pageIndicatorPlacement` v = `Top`
                                )->a( n = `showPageIndicator`      v = |\{= !${ client->_bind( is_desktop ) } \}|
                                )->a( n = `pages`                  v = client->_bind( t_comp_products )

                                )->ele( `customLayout`
                                    )->tag( `CarouselLayout`
                                        )->a( n = `visiblePagesCount` v = client->_bind( pages_count )

                                )->end(
                                )->ele( n = `Card` ns = `f`
                                    )->a( n = `class` v = `sapUiTinyMarginTop`

                                    )->ele( n = `header` ns = `f`
                                        " iconSrc formatter .formatter.url flattened to absolute image URLs in the model
                                        )->tag( n = `Header` ns = `cards`
                                            )->a( n = `title`            v = `{NAME}`
                                            )->a( n = `subtitle`         v = `{STATUS}`
                                            )->a( n = `iconSrc`          v = `{PRODUCT_PIC_URL}`
                                            )->a( n = `iconDisplayShape` v = `Square`

                                    )->end(
                                )->end(
                            )->end(
                        )->end(
                    )->end(
                )->end(
                )->ele( n = `header` ns = `f`
                    )->ele( n = `DynamicPageHeader` ns = `f`
                        )->a( n = `backgroundDesign` v = `Transparent`

                        )->ele( `Carousel`
                            )->a( n = `height`                 v = `auto`
                            )->a( n = `class`                  v = `sapUiSmallMarginBottom`
                            )->a( n = `id`                     v = `carousel-expanded`
                            )->a( n = `pageChanged`            v = client->_event( val = `PAGE_CHANGED` arg = `${$parameters>/activePages/0}` )
                            )->a( n = `pageIndicatorPlacement` v = `Top`
                            )->a( n = `showPageIndicator`      v = |\{= !${ client->_bind( is_desktop ) } \}|
                            )->a( n = `pages`                  v = client->_bind( t_comp_products )

                            )->ele( `customLayout`
                                )->tag( `CarouselLayout`
                                    )->a( n = `visiblePagesCount` v = client->_bind( pages_count )

                            )->end(
                            )->ele( n = `Card` ns = `f`
                                )->a( n = `class` v = `sapUiTinyMarginTop`

                                )->ele( n = `header` ns = `f`
                                    )->tag( n = `Header` ns = `cards`
                                        )->a( n = `title`            v = `{NAME}`
                                        )->a( n = `subtitle`         v = `{STATUS}`
                                        )->a( n = `iconSrc`          v = `{PRODUCT_PIC_URL}`
                                        )->a( n = `iconDisplayShape` v = `Square`

                                )->end(
                                )->ele( n = `content` ns = `f`
                                    )->ele( n = `VerticalLayout` ns = `l`
                                        )->a( n = `width` v = `100%`

                                        )->ele( n = `BlockLayout` ns = `l`
                                            )->ele( n = `BlockLayoutRow` ns = `l`
                                                )->ele( n = `BlockLayoutCell` ns = `l`
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Supplier:`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{SUPPLIER_NAME}`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Main Category:`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{MAIN_CATEGORY}`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Category:`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{CATEGORY}`

                                                    )->end(
                                                )->end(
                                                )->ele( n = `BlockLayoutCell` ns = `l`
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Width (cm)`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{WIDTH}`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Height (cm)`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{HEIGHT}`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->tag( `Label`
                                                            )->a( n = `text` v = `Weight (kg)`

                                                    )->end(
                                                    )->ele( `HBox`
                                                        )->a( n = `class` v = `sapUiSmallMarginBottom`

                                                        )->tag( `Text`
                                                            )->a( n = `text` v = `{WEIGHT_MEASURE}`

                                                    )->end(
                                                )->end(
                                            )->end(
                                        )->end(
                                    )->end(
                                )->end(
                            )->end(
                        )->end(
                    )->end(
                )->end(
                )->ele( n = `content` ns = `f`
                    )->ele( `List`
                        )->a( n = `id`               v = `listItems`
                        )->a( n = `backgroundDesign` v = `Transparent`
                        )->a( n = `class`            v = `sapUiSmallMarginBottom`
                        )->a( n = `items`            v = client->_bind( t_comp_props )

                        )->ele( `items`
                            )->ele( `CustomListItem`
                                )->a( n = `class` v = `sapUiComparisonContent`

                                )->tag( `Panel`
                                    )->a( n = `expandable` v = `true`
                                    )->a( n = `expanded`   v = `false`
                                    )->a( n = `headerText` v = `{KEY}`
                                    )->a( n = `height`     v = `2.75rem`
                                    )->a( n = `expand`     v = client->_event( val   = `PANEL_EXPANDED`
                                                                               t_arg = VALUE #( ( `${KEY}` ) ( `${$parameters>/expand}` ) ) )

                                )->ele( `HBox`
                                    )->a( n = `class`            v = `sapUiTinyMarginTop`
                                    )->a( n = `alignItems`       v = `Start`
                                    )->a( n = `backgroundDesign` v = `Solid`
                                    )->a( n = `items`            v = |\{ path: 'VALUES', templateShareable : true \}|

                                    )->ele( `items`
                                        )->ele( `VBox`
                                            )->a( n = `class` v = `sapUiTinyMarginTopBottom sapUiComparisonItem`

                                            )->ele( `layoutData`
                                                )->tag( `FlexItemData`
                                                    )->a( n = `growFactor` v = `1`
                                                    )->a( n = `baseSize`   v = `0`

                                            )->end(
                                            )->ele( `HBox`
                                                )->tag( `FormattedText`
                                                    )->a( n = `htmlText` v = `{TEXT}`

                                            )->end(
                                            " the controller's onPanelExpanded setVisible replaced by the bound VISIBLE flag per value row
                                            )->ele( `HBox`
                                                )->a( n = `class`   v = `sapUiSmallMarginTop`
                                                )->a( n = `visible` v = `{VISIBLE}`

                                                )->tag( `Text`
                                                    )->a( n = `text` v = `{DESCRIPTION}`

                                            )->end(
                                        )->end(
                                    )->end(
                                )->end(
                            )->end(
                        )->end(
                    )->end(
                )->end(
            )->end(
        )->end( ).

    " the original controller's onAfterRendering binding filter: only Laptops are compared
    client->follow_up_action( val   = client->cs_event-binding_call
                              t_arg = VALUE #( ( `idProductsTable` ) ( `items` ) ( `filter` ) ( `CATEGORY` ) ( `EQ` ) ( `Laptops` ) ) ).

    " the original's manifest router, app-owned: the hash stays the app's own
    " (#/Page2, no route prefix), and a hash change the app did not write -
    " browser Back/Forward, a manual edit - round-trips as HASH_CHANGED.
    " Re-asserted per render, since the registration dies with an app switch
    client->follow_up_action( val   = client->cs_event-hash_attach_changed
                              t_arg = VALUE #( ( `HASH_CHANGED` ) ) ).

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

    " A Carousel's active page is live control state a rebuilt view resets to
    " page 0, while first_item survives as class state AND drives the bound
    " comparison rows - so after a rebuild the two Carousels show item 0 next to
    " props for items first_item.. Re-issued positionally, the same form the
    " event branch uses (the pages are aggregation-template clones with no id
    " the backend can spell). Guarded, because page 0 is where a fresh view
    " already is. Found by the linter's control-state-lost-on-rebuild rule
    IF first_item > 0.
      client->follow_up_action( val   = client->cs_event-control_by_id
                                t_arg = VALUE #( ( `carousel-snapped` )
                                                 ( `setActivePage` )
                                                 ( |carousel-snapped/pages/{ first_item }| ) ) ).
      client->follow_up_action( val   = client->cs_event-control_by_id
                                t_arg = VALUE #( ( `carousel-expanded` )
                                                 ( `setActivePage` )
                                                 ( |carousel-expanded/pages/{ first_item }| ) ) ).
    ENDIF.

    " the NavContainer's active page is the same class of live control state:
    " a rebuilt view (a restored draft, a return from a called app) is back on
    " the first page while check_page2 survives as class state
    IF check_page2 = abap_true.
      client->follow_up_action( val   = client->cs_event-control_by_id
                                t_arg = VALUE #( ( `rootControl` ) ( `to` ) ( `page-comparison` ) ) ).
    ENDIF.

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).

      WHEN `SELECTION`.
        DATA(selected_count) = 0.
        LOOP AT t_products TRANSPORTING NO FIELDS WHERE selected = abap_true.
          selected_count = selected_count + 1.
        ENDLOOP.
        IF selected_count > 1.
          compare_text    = |Compare ({ selected_count })|.
          compare_visible = abap_true.
        ELSE.
          compare_visible = abap_false.
        ENDIF.

      WHEN `COMPARE`.
        comparison_build( ).
        check_page2 = abap_true.
        " the router's navTo("page2") mapped to the NavContainer `to` frontend action
        client->follow_up_action( val   = client->cs_event-control_by_id
                                  t_arg = VALUE #( ( `rootControl` ) ( `to` ) ( `page-comparison` ) ) ).
        " navTo also writes the router's hash: with the hash listener
        " registered this pushes the app-owned `#/Page2` - the original's URL
        " 1:1 - as a real history entry, so browser Back has somewhere to go
        client->hash_set( `/Page2` ).

      WHEN `HASH_CHANGED`.
        " browser Back/Forward (or a manual edit) moved the app-owned hash -
        " the router's routeMatched: show the page the hash now names. The
        " hash rides in s_config-hash with this very request; the app
        " instance is untouched, so the selection survives like with the
        " original's client-side router
        IF contains( val = client->get( )-s_config-hash sub = `/Page2` ).
          IF check_page2 = abap_false.
            comparison_build( ).
            check_page2 = abap_true.
            client->follow_up_action( val   = client->cs_event-control_by_id
                                      t_arg = VALUE #( ( `rootControl` ) ( `to` ) ( `page-comparison` ) ) ).
          ENDIF.
        ELSEIF check_page2 = abap_true.
          check_page2 = abap_false.
          " NavContainer `back` pops the page the `to` above pushed
          client->follow_up_action( val   = client->cs_event-control_by_id
                                    t_arg = VALUE #( ( `rootControl` ) ( `back` ) ) ).
        ENDIF.

      WHEN `PAGE_CHANGED`.
        DATA(page_arg) = client->get_event_arg( ).
        IF page_arg CO `0123456789`.
          first_item = page_arg.
        ELSE.
          first_item = 0.
        ENDIF.
        comparison_props_build( ).
        " _updateCarouselsActivePage: the original keeps the two Carousels in
        " step by handing each its own page AT THE SAME INDEX
        " (carousel.setActivePage( carousel.getPages()[ iFirstItem ] )). Those
        " pages are aggregation-template CLONES with no id the backend can
        " spell, so they are addressed positionally since 2026-08-06
        client->follow_up_action( val   = client->cs_event-control_by_id
                                  t_arg = VALUE #( ( `carousel-snapped` )
                                                   ( `setActivePage` )
                                                   ( |carousel-snapped/pages/{ first_item }| ) ) ).
        client->follow_up_action( val   = client->cs_event-control_by_id
                                  t_arg = VALUE #( ( `carousel-expanded` )
                                                   ( `setActivePage` )
                                                   ( |carousel-expanded/pages/{ first_item }| ) ) ).

      WHEN `PANEL_EXPANDED`.
        DATA(prop_key) = client->get_event_arg( ).
        DATA(expanded) = client->get_event_arg( 2 ).
        READ TABLE t_comp_props ASSIGNING FIELD-SYMBOL(<s_prop>) WITH KEY key = prop_key.
        IF sy-subrc = 0.
          LOOP AT <s_prop>-values ASSIGNING FIELD-SYMBOL(<s_value>).
            <s_value>-visible = expanded.
          ENDLOOP.
        ENDIF.

    ENDCASE.

  ENDMETHOD.


  METHOD comparison_build.

    t_comp_products = VALUE #( ).
    LOOP AT t_products INTO DATA(s_product) WHERE selected = abap_true.
      APPEND s_product TO t_comp_products.
    ENDLOOP.

    " the original's ResizeHandler-driven _getPagesCount (600/1024 thresholds), computed once from the reported device width
    DATA(width) = client->get( )-s_device-resize-width.
    IF width > 0 AND width <= 600.
      pages_count = 1.
    ELSEIF width > 0 AND width <= 1024.
      pages_count = 2.
    ELSE.
      pages_count = 4.
    ENDIF.
    IF pages_count > lines( t_comp_products ).
      pages_count = lines( t_comp_products ).
    ENDIF.
    " a cold #/Page2 (deep link, reload) has no selection: the original's
    " settings model is then empty and visiblePagesCount falls back to its
    " UI5 default 1 - a computed 0 would be an invalid CarouselLayout count
    IF pages_count < 1.
      pages_count = 1.
    ENDIF.
    is_desktop = xsdbool( pages_count = 4 ).

    first_item = 0.
    comparison_props_build( ).

  ENDMETHOD.


  METHOD comparison_props_build.

    " the original iterates the first selected product's JSON keys (except ProductPicUrl); here the same keys as a fixed list
    DATA(t_keys) = VALUE ty_t_key(
      ( key = `ProductId`     field = `PRODUCT_ID` )
      ( key = `Category`      field = `CATEGORY` )
      ( key = `MainCategory`  field = `MAIN_CATEGORY` )
      ( key = `TaxTarifCode`  field = `TAX_TARIF_CODE` )
      ( key = `SupplierName`  field = `SUPPLIER_NAME` )
      ( key = `WeightMeasure` field = `WEIGHT_MEASURE` )
      ( key = `WeightUnit`    field = `WEIGHT_UNIT` )
      ( key = `Description`   field = `DESCRIPTION` )
      ( key = `Name`          field = `NAME` )
      ( key = `DateOfSale`    field = `DATE_OF_SALE` )
      ( key = `Status`        field = `STATUS` )
      ( key = `Quantity`      field = `QUANTITY` )
      ( key = `UoM`           field = `UOM` )
      ( key = `CurrencyCode`  field = `CURRENCY_CODE` )
      ( key = `Price`         field = `PRICE` )
      ( key = `Width`         field = `WIDTH` )
      ( key = `Depth`         field = `DEPTH` )
      ( key = `Height`        field = `HEIGHT` )
      ( key = `DimUnit`       field = `DIM_UNIT` ) ).

    DATA(from_item) = first_item + 1.
    DATA(last_item) = first_item + pages_count.
    IF last_item > lines( t_comp_products ).
      last_item = lines( t_comp_products ).
    ENDIF.

    t_comp_props = VALUE #( ).
    " the original's cold #/Page2 renders BOTH lists empty ('no data') - its
    " Props are built per selected product, so no product means no rows, not
    " nineteen property panels with empty value lists
    IF t_comp_products IS INITIAL.
      RETURN.
    ENDIF.
    LOOP AT t_keys INTO DATA(s_key).
      DATA(s_prop) = VALUE ty_s_comp_prop( key = s_key-key ).
      LOOP AT t_comp_products FROM from_item TO last_item INTO DATA(s_product).
        ASSIGN COMPONENT s_key-field OF STRUCTURE s_product TO FIELD-SYMBOL(<value>).
        IF sy-subrc = 0.
          APPEND VALUE #( text        = |<strong>{ <value> }</strong>|
                          description = `Some description of the property here`
                          visible     = abap_false ) TO s_prop-values.
        ENDIF.
      ENDLOOP.
      APPEND s_prop TO t_comp_props.
    ENDLOOP.

  ENDMETHOD.


  METHOD model_init.

    " the full mock /ProductCollection (sap/ui/demo/mock/products.json); the table binding filters to Category = Laptops (onAfterRendering), as the original loads all rows and filters client-side
    " ProductPicUrl resolved to absolute OpenUI5 URLs (the sample's .formatter.url)
    t_products = VALUE #(
      ( product_id = `HT-1000` category = `Laptops` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `4.2` weight_unit = `KG`
        description = `Notebook Basic 15 with 2,80 GHz quad core, 15" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro` name = `Notebook Basic 15` date_of_sale = `2017-03-26`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1000.jpg`
        status = `Available` quantity = `10` uom = `PC` currency_code = `EUR` price = `956.00` width = `30` depth = `18` height = `3` dim_unit = `cm` )
      ( product_id = `HT-1001` category = `Laptops` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `4.5` weight_unit = `KG`
        description = `Notebook Basic 17 with 2,80 GHz quad core, 17" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro` name = `Notebook Basic 17` date_of_sale = `2017-04-17`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1001.jpg`
        status = `Available` quantity = `20` uom = `PC` currency_code = `EUR` price = `1249.00` width = `29` depth = `17` height = `3.1` dim_unit = `cm` )
      ( product_id = `HT-1002` category = `Laptops` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `4.2` weight_unit = `KG`
        description = `Notebook Basic 18 with 2,80 GHz quad core, 18" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro` name = `Notebook Basic 18` date_of_sale = `2017-01-07`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1002.jpg`
        status = `Available` quantity = `10` uom = `PC` currency_code = `EUR` price = `1570.00` width = `28` depth = `19` height = `2.5` dim_unit = `cm` )
      ( product_id = `HT-1003` category = `Laptops` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Smartcards` weight_measure = `4.2` weight_unit = `KG`
        description = `Notebook Basic 19 with 2,80 GHz quad core, 19" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro` name = `Notebook Basic 19` date_of_sale = `2017-04-09`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1003.jpg`
        status = `Out of Stock` quantity = `15` uom = `PC` currency_code = `EUR` price = `1650.00` width = `32` depth = `21` height = `4` dim_unit = `cm` )
      ( product_id = `HT-1007` category = `Accessories` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Technocom` weight_measure = `0.2` weight_unit = `KG`
        description = `Digital Organizer with State-of-the-Art Storage Encryption` name = `ITelO Vault` date_of_sale = `2017-05-17`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1007.jpg`
        status = `Out of Stock` quantity = `15` uom = `PC` currency_code = `EUR` price = `299.00` width = `32` depth = `22` height = `3` dim_unit = `cm` )
      ( product_id = `HT-1010` category = `Accessories` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `4.3` weight_unit = `KG`
        description = `Notebook Professional 15 with 2,80 GHz quad core, 15" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro` name = `Notebook Professional 15` date_of_sale = `2017-02-22`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1010.jpg`
        status = `Out of Stock` quantity = `16` uom = `PC` currency_code = `EUR` price = `1999.00` width = `33` depth = `20` height = `3` dim_unit = `cm` )
      ( product_id = `HT-1011` category = `Laptops` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `4.1` weight_unit = `KG`
        description = `Notebook Professional 17 with 2,80 GHz quad core, 17" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro` name = `Notebook Professional 17` date_of_sale = `2017-01-02`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1011.jpg`
        status = `Out of Stock` quantity = `17` uom = `PC` currency_code = `EUR` price = `2299.00` width = `33` depth = `23` height = `2` dim_unit = `cm` )
      ( product_id = `HT-1020` category = `Accessories` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Technocom` weight_measure = `0.16` weight_unit = `KG`
        description = `Digital Organizer with State-of-the-Art Encryption for Storage and Network Communications` name = `ITelO Vault Net` date_of_sale = `2017-05-08`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1020.jpg`
        status = `Discontinued` quantity = `14` uom = `PC` currency_code = `EUR` price = `459.00` width = `10` depth = `1.8` height = `17` dim_unit = `cm` )
      ( product_id = `HT-1021` category = `Accessories` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Technocom` weight_measure = `0.18` weight_unit = `KG`
        description = `Digital Organizer with State-of-the-Art Encryption for Storage and Secure Stellite Link` name = `ITelO Vault SAT` date_of_sale = `2017-06-30`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1021.jpg`
        status = `Available` quantity = `50` uom = `PC` currency_code = `EUR` price = `149.00` width = `11` depth = `1.7` height = `18` dim_unit = `cm` )
      ( product_id = `HT-1022` category = `Accessories` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Technocom` weight_measure = `0.2` weight_unit = `KG`
        description = `32 GB Digital Assistant with high-resolution color screen` name = `Comfort Easy` date_of_sale = `2017-03-02`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1022.jpg`
        status = `Out of Stock` quantity = `30` uom = `PC` currency_code = `EUR` price = `1679.00` width = `84` depth = `1.5` height = `14` dim_unit = `cm` )
      ( product_id = `HT-1023` category = `Accessories` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Technocom` weight_measure = `0.8` weight_unit = `KG`
        description = `64 GB Digital Assistant with high-resolution color screen and synthesized voice output` name = `Comfort Senior` date_of_sale = `2017-02-25`
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1023.jpg`
        status = `Available` quantity = `24` uom = `PC` currency_code = `EUR` price = `512.00` width = `80` depth = `1.6` height = `13` dim_unit = `cm` )
      ( product_id = `HT-1030` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `21` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 1920 x 1080 @ 85Hz, Dot Pitch: 0.27mm` name = `Ergo Screen E-I` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1030.jpg`
        status = `Available` quantity = `14` uom = `PC` currency_code = `EUR` price = `230.00` width = `37` depth = `12` height = `36` dim_unit = `cm` )
      ( product_id = `HT-1031` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `21` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 1920 x 1200 @ 85Hz, Dot Pitch: 0.26mm` name = `Ergo Screen E-II` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1031.jpg`
        status = `Available` quantity = `24` uom = `PC` currency_code = `EUR` price = `285.00` width = `40.8` depth = `19` height = `43` dim_unit = `cm` )
      ( product_id = `HT-1032` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `21` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 2560 x 1440 @ 85Hz, Dot Pitch: 0.25mm` name = `Ergo Screen E-III` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1032.jpg`
        status = `Out of Stock` quantity = `50` uom = `PC` currency_code = `EUR` price = `345.00` width = `40.8` depth = `19` height = `43` dim_unit = `cm` )
      ( product_id = `HT-1035` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `14` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 1600 x 1200 @ 85Hz, Dot Pitch: 0.24mm` name = `Flat Basic` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1035.jpg`
        status = `Available` quantity = `23` uom = `PC` currency_code = `EUR` price = `399.00` width = `39` depth = `20` height = `41` dim_unit = `cm` )
      ( product_id = `HT-1036` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `15` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 2048 x 1080 @ 85Hz, Dot Pitch: 0.26mm` name = `Flat Future` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1036.jpg`
        status = `Available` quantity = `22` uom = `PC` currency_code = `EUR` price = `430.00` width = `45` depth = `26` height = `46` dim_unit = `cm` )
      ( product_id = `HT-1037` category = `Flat Screen Monitors` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Very Best Screens` weight_measure = `17` weight_unit = `KG`
        description = `Optimum Hi-Resolution max. 2016 x 1512 @ 85Hz, Dot Pitch: 0.24mm` name = `Flat XL` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1037.jpg`
        status = `Available` quantity = `23` uom = `PC` currency_code = `EUR` price = `1230.00` width = `54.5` depth = `22.1` height = `39.1` dim_unit = `cm` )
      ( product_id = `HT-1040` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Alpha Printers` weight_measure = `32` weight_unit = `KG`
        description = `Print 2400 dpi image quality color documents at speeds of up to 32 ppm (color) or 36 ppm (monochrome), letter/A4. Powerful 500 MHz processor, 512MB of memory` name = `Laser Professional Eco` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1040.jpg`
        status = `Available` quantity = `21` uom = `PC` currency_code = `EUR` price = `830.00` width = `51` depth = `46` height = `30` dim_unit = `cm` )
      ( product_id = `HT-1041` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Alpha Printers` weight_measure = `23` weight_unit = `KG`
        description = `Up to 22 ppm color or 24 ppm monochrome A4/letter, powerful 500 MHz processor and 128MB of memory` name = `Laser Basic` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1041.jpg`
        status = `Available` quantity = `8` uom = `PC` currency_code = `EUR` price = `490.00` width = `48` depth = `42` height = `26` dim_unit = `cm` )
      ( product_id = `HT-1042` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Alpha Printers` weight_measure = `17` weight_unit = `KG`
        description = `Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with Available first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color` name = `Laser Allround` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1042.jpg`
        status = `Available` quantity = `9` uom = `PC` currency_code = `EUR` price = `349.00` width = `53` depth = `50` height = `65` dim_unit = `cm` )
      ( product_id = `HT-1050` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Alpha Printers` weight_measure = `3` weight_unit = `KG`
        description = `4800 dpi x 1200 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB, Ethernet` name = `Ultra Jet Super Color` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1050.jpg`
        status = `Discontinued` quantity = `17` uom = `PC` currency_code = `EUR` price = `139.00` width = `41` depth = `41` height = `28` dim_unit = `cm` )
      ( product_id = `HT-1051` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `1.9` weight_unit = `KG`
        description = `1000 dpi x 1000 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB - excellent dimensions for the small office` name = `Ultra Jet Mobile` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1051.jpg`
        status = `Discontinued` quantity = `18` uom = `PC` currency_code = `EUR` price = `99.00` width = `46` depth = `32` height = `25` dim_unit = `cm` )
      ( product_id = `HT-1052` category = `Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `18` weight_unit = `KG`
        description = `4800 dpi x 1200 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB2.0, Ethernet` name = `Ultra Jet Super Highspeed` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1052.jpg`
        status = `Available` quantity = `25` uom = `PC` currency_code = `EUR` price = `170.00` width = `41` depth = `41` height = `28` dim_unit = `cm` )
      ( product_id = `HT-1055` category = `Multifunction Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `6.3` weight_unit = `KG`
        description = `1000 dpi x 1000 dpi - up to 16 ppm (mono) / up to 15 ppm (color)- capacity 80 sheets - scanner (216 x 297 mm, 1200dpi x 2400dpi)` name = `Multi Print` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1055.jpg`
        status = `Available` quantity = `16` uom = `PC` currency_code = `EUR` price = `99.00` width = `55` depth = `45` height = `29` dim_unit = `cm` )
      ( product_id = `HT-1056` category = `Multifunction Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `4.3` weight_unit = `KG`
        description = `1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (color)- capacity 80 sheets - scanner (216 x 297 mm, 2400dpi x 4800dpi, high resolution)` name = `Multi Color` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1056.jpg`
        status = `Available` quantity = `5` uom = `PC` currency_code = `EUR` price = `119.00` width = `51` depth = `41.3` height = `22` dim_unit = `cm` )
      ( product_id = `HT-1060` category = `Mice` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `0.09` weight_unit = `KG`
        description = `Cordless Optical USB Mice, Laptop, Color: Black, Plug&Play` name = `Cordless Mouse` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1060.jpg`
        status = `Available` quantity = `25` uom = `PC` currency_code = `EUR` price = `9.00` width = `6` depth = `14.5` height = `3.5` dim_unit = `cm` )
      ( product_id = `HT-1061` category = `Mice` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `0.09` weight_unit = `KG`
        description = `Optical USB, PS/2 Mouse, Color: Blue, 3-button-functionality (incl. Scroll wheel)` name = `Speed Mouse` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1061.jpg`
        status = `Available` quantity = `12` uom = `PC` currency_code = `EUR` price = `7.00` width = `7` depth = `15` height = `3.1` dim_unit = `cm` )
      ( product_id = `HT-1062` category = `Mice` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `0.03` weight_unit = `KG`
        description = `Optical USB Mouse, Color: Red, 5-button-functionality(incl. Scroll wheel), Plug&Play` name = `Track Mouse` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1062.jpg`
        status = `Discontinued` quantity = `12` uom = `PC` currency_code = `EUR` price = `11.00` width = `3` depth = `7` height = `4` dim_unit = `cm` )
      ( product_id = `HT-1063` category = `Keyboards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `2.1` weight_unit = `KG`
        description = `Ergonomic USB Keyboard for Desktop, Plug&Play` name = `Ergonomic Keyboard` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1063.jpg`
        status = `Available` quantity = `50` uom = `PC` currency_code = `EUR` price = `14.00` width = `50` depth = `21` height = `3.5` dim_unit = `cm` )
      ( product_id = `HT-1064` category = `Keyboards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `1.8` weight_unit = `KG`
        description = `Corded Keyboard with special keys for Internet Usability, USB` name = `Internet Keyboard` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1064.jpg`
        status = `Out of Stock` quantity = `35` uom = `PC` currency_code = `EUR` price = `16.00` width = `52` depth = `25` height = `3` dim_unit = `cm` )
      ( product_id = `HT-1065` category = `Keyboards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `2.3` weight_unit = `KG`
        description = `Corded Ergonomic Keyboard with special keys for Media Usability, USB` name = `Media Keyboard` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1065.jpg`
        status = `Available` quantity = `26` uom = `PC` currency_code = `EUR` price = `26.00` width = `51.4` depth = `23` height = `4` dim_unit = `cm` )
      ( product_id = `HT-1066` category = `Mousepads` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `80` weight_unit = `G`
        description = `Nice mouse pad with ITelO Logo` name = `Mousepad` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1066.jpg`
        status = `Available` quantity = `12` uom = `PC` currency_code = `EUR` price = `6.99` width = `15` depth = `6` height = `0.2` dim_unit = `cm` )
      ( product_id = `HT-1067` category = `Mousepads` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Oxynum` weight_measure = `80` weight_unit = `G`
        description = `Ergonomic mouse pad with ITelO Logo` name = `Ergo Mousepad` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1067.jpg`
        status = `Out of Stock` quantity = `16` uom = `PC` currency_code = `EUR` price = `8.99` width = `15` depth = `6` height = `0.2` dim_unit = `cm` )
      ( product_id = `HT-1068` category = `Mousepads` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Fasttech` weight_measure = `90` weight_unit = `G`
        description = `ITelO Mousepad Special Edition` name = `Designer Mousepad` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1068.jpg`
        status = `Available` quantity = `26` uom = `PC` currency_code = `EUR` price = `12.99` width = `24` depth = `24` height = `0.6` dim_unit = `cm` )
      ( product_id = `HT-1069` category = `Computer System Accessories` main_category = `Computer Systems` tax_tarif_code = `1` supplier_name = `Fasttech` weight_measure = `45` weight_unit = `G`
        description = `Universal card reader` name = `Universal card reader` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1069.jpg`
        status = `Available` quantity = `22` uom = `PC` currency_code = `EUR` price = `14.00` width = `6` depth = `6` height = `3` dim_unit = `cm` )
      ( product_id = `HT-1070` category = `Graphic Cards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Ultrasonic United` weight_measure = `0.255` weight_unit = `KG`
        description = `Proctra X: PCI-E GDDR5 3072MB` name = `Proctra X` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1070.jpg`
        status = `Out of Stock` quantity = `15` uom = `PC` currency_code = `EUR` price = `70.90` width = `22` depth = `35` height = `17` dim_unit = `cm` )
      ( product_id = `HT-1071` category = `Graphic Cards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Ultrasonic United` weight_measure = `0.3` weight_unit = `KG`
        description = `Gladiator XLN: PCI-E GDDR5 3072MB DVI Out, TV Out low-noise` name = `Gladiator MX` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1071.jpg`
        status = `Discontinued` quantity = `16` uom = `PC` currency_code = `EUR` price = `81.70` width = `22` depth = `35` height = `17` dim_unit = `cm` )
      ( product_id = `HT-1072` category = `Graphic Cards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Ultrasonic United` weight_measure = `0.4` weight_unit = `KG`
        description = `Hurricane GX: PCI-E 691 GFLOPS game-optimized` name = `Hurricane GX` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1072.jpg`
        status = `Available` quantity = `13` uom = `PC` currency_code = `EUR` price = `101.20` width = `22` depth = `35` height = `17` dim_unit = `cm` )
      ( product_id = `HT-1073` category = `Graphic Cards` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Smartcards` weight_measure = `0.4` weight_unit = `KG`
        description = `Hurricane GX/LN: PCI-E 691 GFLOPS game-optimized, low-noise.` name = `Hurricane GX/LN` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1073.jpg`
        status = `Out of Stock` quantity = `5` uom = `PC` currency_code = `EUR` price = `139.99` width = `22` depth = `35` height = `17` dim_unit = `cm` )
      ( product_id = `HT-1080` category = `Scanners` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `2.3` weight_unit = `KG`
        description = `Flatbed scanner - 9.600 × 9.600 dpi - 216 x 297 mm - Hi-Speed USB - Bluetooth` name = `Photo Scan` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1080.jpg`
        status = `Out of Stock` quantity = `8` uom = `PC` currency_code = `EUR` price = `129.00` width = `34` depth = `48` height = `5` dim_unit = `cm` )
      ( product_id = `HT-1081` category = `Scanners` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `2.4` weight_unit = `KG`
        description = `Flatbed scanner - 9.600 × 9.600 dpi - 216 x 297 mm - SCSI for backward compatibility` name = `Power Scan` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1081.jpg`
        status = `Out of Stock` quantity = `11` uom = `PC` currency_code = `EUR` price = `89.00` width = `31` depth = `43` height = `7` dim_unit = `cm` )
      ( product_id = `HT-1082` category = `Scanners` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `3.2` weight_unit = `KG`
        description = `Flatbed scanner - Letter - 2400 dpi x 2400 dpi - 216 x 297 mm - add-on module` name = `Jet Scan Professional` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1082.jpg`
        status = `Out of Stock` quantity = `13` uom = `PC` currency_code = `EUR` price = `169.00` width = `33` depth = `41` height = `12` dim_unit = `cm` )
      ( product_id = `HT-1083` category = `Scanners` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Printer for All` weight_measure = `3.2` weight_unit = `KG`
        description = `Flatbed scanner - A4 - 2400 dpi x 2400 dpi - 216 x 297 mm - add-on module` name = `Jet Scan Professional` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1083.jpg`
        status = `Available` quantity = `10` uom = `PC` currency_code = `EUR` price = `189.00` width = `35` depth = `40` height = `10` dim_unit = `cm` )
      ( product_id = `HT-1085` category = `Multifunction Printers` main_category = `Printers & Scanners` tax_tarif_code = `1` supplier_name = `Alpha Printers` weight_measure = `23.2` weight_unit = `KG`
        description = `Copymaster` name = `Copymaster` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1085.jpg`
        status = `Available` quantity = `10` uom = `PC` currency_code = `EUR` price = `1499.00` width = `45` depth = `42` height = `22` dim_unit = `cm` )
      ( product_id = `HT-1090` category = `Speakers` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Speaker Experts` weight_measure = `3` weight_unit = `KG`
        description = `PC multimedia speakers - 5 Watt (Total)` name = `Surround Sound` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1090.jpg`
        status = `Available` quantity = `20` uom = `PC` currency_code = `EUR` price = `39.00` width = `12` depth = `10` height = `16` dim_unit = `cm` )
      ( product_id = `HT-1091` category = `Speakers` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Speaker Experts` weight_measure = `1.4` weight_unit = `KG`
        description = `PC multimedia speakers - 10 Watt (Total) - 2-way` name = `Blaster Extreme` date_of_sale = ``
        product_pic_url = `https://sdk.openui5.org/test-resources/sap/ui/documentation/sdk/images/HT-1091.jpg`
        status = `Available` quantity = `15` uom = `PC` currency_code = `EUR` price = `26.00` width = `13` depth = `11` height = `17.5` dim_unit = `cm` )
      ( product_id = `HT-1092` category = `Speakers` main_category = `Computer Components` tax_tarif_code = `1` supplier_name = `Speaker Experts` weight_measure = `2.1` weight_unit = `KG`