Dynamic Page with Sticky Subheader
Dynamic Page containing an sap.m.IconTabBar in the sticky subheader content area.
Z2UI5_CL_SMPC_APP_238
Controls
sap.f
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_238- Source file
z2ui5_cl_smpc_app_238.clas.abap↗- Library
- sap.f
- UI5 entity
sap.f.DynamicPage- Demo kit sample
sap.f.sample.DynamicPageWithStickySubheader- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: dynamicpage, dynamic, sap.f, dynamicpagewithstickysubheader, dynamicpagetitle, title, breadcrumbs, link, label, overflowtoolbar, generictag, objectnumber
Controls it builds
- sap.f.Card
- sap.f.DynamicPage
- sap.f.DynamicPageHeader
- sap.f.DynamicPageTitle
- sap.f.cards.NumericHeader
- sap.f.cards.NumericSideIndicator
- sap.m.Breadcrumbs
- sap.m.Button
- sap.m.Column
- sap.m.ColumnListItem
- sap.m.GenericTag
- sap.m.IconTabBar
- sap.m.IconTabFilter
- sap.m.Label
- sap.m.Link
- sap.m.ObjectAttribute
- sap.m.ObjectIdentifier
- sap.m.ObjectNumber
- sap.m.ObjectStatus
- sap.m.OverflowToolbar
- sap.m.Popover
- sap.m.Table
- sap.m.Text
- sap.m.Title
- sap.m.Toolbar
- sap.m.ToolbarSpacer
- sap.ui.core.FragmentDefinition
- sap.ui.core.mvc.View
- sap.ui.layout.HorizontalLayout
- sap.ui.layout.VerticalLayout
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_238.clas.abap — 536 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords dynamicpage dynamic sap.f dynamicpagewithstickysubheader dynamicpagetitle title breadcrumbs link label overflowtoolbar generictag objectnumber
" @summary Dynamic Page containing an sap.m.IconTabBar in the sticky subheader content area.
CLASS z2ui5_cl_smpc_app_238 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES:
BEGIN OF ty_row,
name TYPE string,
productid TYPE string,
suppliername TYPE string,
width TYPE string,
depth TYPE string,
height TYPE string,
dimunit TYPE string,
price TYPE p LENGTH 13 DECIMALS 2,
currencycode TYPE string,
END OF ty_row.
DATA productcollection TYPE STANDARD TABLE OF ty_row WITH EMPTY KEY.
DATA titleclickable TYPE abap_bool.
DATA showfooter TYPE abap_bool.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS popover_card.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_238 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.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
" sap.f.DynamicPage with a sticky subheader provider (the content IconTabBar).
" toggleHeaderOnTitleClick keeps the original {/titleClickable} binding;
" showFooter is two-way bound to a model flag ({/SHOWFOOTER}, default false)
" and the Toggle Footer action flips it via a round-trip - the faithful
" abap2UI5 form of the controller's imperative setShowFooter. The Products
" table keeps the original sorter + Currency composite type bindings 1:1.
" The GenericTag press opens the Card popover fragment anchored to the tag.
view->ele( n = `View` ns = `mvc`
)->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:layout` v = `sap.ui.layout`
)->a( n = `height` v = `100%`
)->ele( n = `DynamicPage` ns = `f`
)->a( n = `id` v = `dynamicPageId`
)->a( n = `stickySubheaderProvider` v = `iconTabBar`
)->a( n = `class` v = `sapUiNoContentPadding`
)->a( n = `toggleHeaderOnTitleClick` v = client->_bind( titleclickable )
)->a( n = `showFooter` v = client->_bind( showfooter )
)->ele( n = `title` ns = `f`
)->ele( n = `DynamicPageTitle` ns = `f`
)->ele( n = `heading` ns = `f`
)->tag( `Title`
)->a( n = `text` v = `Header Title`
)->end(
)->ele( n = `breadcrumbs` ns = `f`
)->ele( `Breadcrumbs`
)->tag( `Link`
)->a( n = `text` v = `Home`
)->tag( `Link`
)->a( n = `text` v = `Page 1`
)->tag( `Link`
)->a( n = `text` v = `Page 2`
)->tag( `Link`
)->a( n = `text` v = `Page 3`
)->tag( `Link`
)->a( n = `text` v = `Page 4`
)->tag( `Link`
)->a( n = `text` v = `Page 5`
)->end(
)->end(
)->ele( n = `expandedContent` ns = `f`
)->tag( `Label`
)->a( n = `text` v = `This is a subheading`
)->end(
)->ele( n = `snappedContent` ns = `f`
)->tag( `Label`
)->a( n = `text` v = `This is a subheading`
)->end(
)->ele( n = `snappedTitleOnMobile` ns = `f`
)->tag( `Title`
)->a( n = `text` v = `This is a subheading`
)->end(
)->ele( n = `content` ns = `f`
)->ele( `OverflowToolbar`
)->ele( `GenericTag`
)->a( n = `text` v = `SR`
)->a( n = `status` v = `Error`
)->a( n = `press` v = client->_event( val = `GENERIC_TAG_PRESS` arg = `$event.oSource.sId` )
)->a( n = `design` v = `StatusIconHidden`
)->tag( `ObjectNumber`
)->a( n = `number` v = `2`
)->a( n = `unit` v = `M`
)->a( n = `emphasized` v = `false`
)->a( n = `state` v = `Error`
)->end(
)->end(
)->end(
)->ele( n = `actions` ns = `f`
)->tag( `Button`
)->a( n = `text` v = `Edit`
)->a( n = `type` v = `Emphasized`
)->tag( `Button`
)->a( n = `text` v = `Delete`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Copy`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `text` v = `Toggle Footer`
)->a( n = `type` v = `Transparent`
)->a( n = `press` v = client->_event( `TOGGLE_FOOTER` )
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://action`
)->a( n = `type` v = `Transparent`
)->end(
)->ele( n = `navigationActions` ns = `f`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://full-screen`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://decline`
)->a( n = `type` v = `Transparent`
)->end(
)->end(
)->end(
)->ele( n = `header` ns = `f`
)->ele( n = `DynamicPageHeader` ns = `f`
)->a( n = `pinnable` v = `true`
)->ele( n = `HorizontalLayout` ns = `layout`
)->a( n = `allowWrapping` v = `true`
)->ele( n = `VerticalLayout` ns = `layout`
)->a( n = `class` v = `sapUiMediumMarginEnd`
)->tag( `ObjectAttribute`
)->a( n = `title` v = `Location`
)->a( n = `text` v = `Warehouse A`
)->tag( `ObjectAttribute`
)->a( n = `title` v = `Halway`
)->a( n = `text` v = `23L`
)->tag( `ObjectAttribute`
)->a( n = `title` v = `Rack`
)->a( n = `text` v = `34`
)->end(
)->ele( n = `VerticalLayout` ns = `layout`
)->tag( `ObjectAttribute`
)->a( n = `title` v = `Availability`
)->tag( `ObjectStatus`
)->a( n = `text` v = `In Stock`
)->a( n = `state` v = `Success`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `content` ns = `f`
)->ele( `IconTabBar`
)->a( n = `id` v = `iconTabBar`
)->a( n = `class` v = `sapUiResponsiveContentPadding`
)->ele( `items`
)->ele( `IconTabFilter`
)->a( n = `text` v = `Products`
)->ele( `Table`
)->a( n = `id` v = `idProductsTable`
)->a( n = `inset` v = `false`
)->a( n = `sticky` v = `HeaderToolbar,ColumnHeaders`
)->a( n = `items` v = |\{ path: '{ client->_bind_path( productcollection ) }', sorter: \{ path: 'NAME' \} \}|
)->a( n = `class` v = `sapUiSmallNegativeMarginBeginEnd`
)->a( n = `width` v = `auto`
)->ele( `headerToolbar`
)->ele( `Toolbar`
)->tag( `Label`
)->a( n = `text` v = `Cars`
)->end(
)->end(
)->ele( `columns`
)->ele( `Column`
)->a( n = `width` v = `12em`
)->tag( `Text`
)->a( n = `text` v = `Product`
)->end(
)->ele( `Column`
)->a( n = `minScreenWidth` v = `Tablet`
)->a( n = `demandPopin` v = `true`
)->tag( `Text`
)->a( n = `text` v = `Supplier`
)->end(
)->ele( `Column`
)->a( n = `minScreenWidth` v = `Tablet`
)->a( n = `demandPopin` v = `true`
)->a( n = `hAlign` v = `End`
)->tag( `Text`
)->a( n = `text` v = `Dimensions`
)->end(
)->ele( `Column`
)->a( n = `hAlign` v = `End`
)->tag( `Text`
)->a( n = `text` v = `Price`
)->end(
)->end(
)->ele( `items`
)->ele( `ColumnListItem`
)->ele( `cells`
)->tag( `ObjectIdentifier`
)->a( n = `title` v = `{NAME}`
)->a( n = `text` v = `{PRODUCTID}`
)->tag( `Text`
)->a( n = `text` v = `{SUPPLIERNAME}`
)->tag( `Text`
)->a( n = `text` v = `{WIDTH} x {DEPTH} x {HEIGHT} {DIMUNIT}`
)->tag( `ObjectNumber`
)->a( n = `number` v = |\{ parts:[\{path:'PRICE'\},\{path:'CURRENCYCODE'\}], type: 'sap.ui.model.type.Currency', formatOptions: \{showMeasure: false\} \}|
)->a( n = `unit` v = `{CURRENCYCODE}`
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( `IconTabFilter`
)->a( n = `text` v = `Attachments`
)->tag( `Text`
)->a( n = `text` v = `Attachments go here ...`
)->end(
)->ele( `IconTabFilter`
)->a( n = `text` v = `Notes`
)->tag( `Text`
)->a( n = `text` v = `Notes go here ...`
)->end(
)->ele( `IconTabFilter`
)->a( n = `text` v = `People`
)->tag( `Text`
)->a( n = `text` v = `People content goes here ...`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `footer` ns = `f`
)->ele( `OverflowToolbar`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `type` v = `Accept`
)->a( n = `text` v = `Accept`
)->tag( `Button`
)->a( n = `type` v = `Reject`
)->a( n = `text` v = `Reject`
)->end(
)->end(
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `GENERIC_TAG_PRESS`.
popover_card( ).
WHEN `TOGGLE_FOOTER`.
" showFooter is BOUND, so the automatic model push is the whole update -
" no view_display( ). A re-render would hand back a fresh control tree
" and throw away what the original never touches: the IconTabBar's
" selected tab (neither side declares a selectedKey), the pinnable
" header's expanded state and the scroll position
showfooter = xsdbool( showfooter = abap_false ).
ENDCASE.
ENDMETHOD.
METHOD popover_card.
" onGenericTagPress: Fragment.load( Card.fragment.xml ) -> openBy( GenericTag ).
" The popover (a Popover > sap.f.Card > sap.f.cards.NumericHeader with two
" NumericSideIndicators) is built server-side and shown anchored to the
" pressed GenericTag ($event.oSource.sId) via popover_display( xml by_id ).
DATA(popover) = z2ui5_cl_ui5_view_builder=>factory( ).
popover->ele( n = `FragmentDefinition` ns = `core`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:f` v = `sap.f`
)->a( n = `xmlns:card` v = `sap.f.cards`
)->ele( `Popover`
)->a( n = `placement` v = `Right`
)->a( n = `showHeader` v = `false`
)->a( n = `contentWidth` v = `300px`
)->ele( n = `Card` ns = `f`
)->a( n = `width` v = `300px`
)->ele( n = `header` ns = `f`
)->ele( n = `NumericHeader` ns = `card`
)->a( n = `title` v = `Sales Revenue`
)->a( n = `subtitle` v = `Sales revenue in the current quarter`
)->a( n = `unitOfMeasurement` v = `EUR`
)->a( n = `number` v = `2.16`
)->a( n = `scale` v = `M`
)->a( n = `trend` v = `Down`
)->a( n = `state` v = `Error`
)->ele( n = `sideIndicators` ns = `card`
)->tag( n = `NumericSideIndicator` ns = `card`
)->a( n = `number` v = `4.74`
)->a( n = `unit` v = `M`
)->a( n = `title` v = `Target`
)->tag( n = `NumericSideIndicator` ns = `card`
)->a( n = `number` v = `-54.49`
)->a( n = `unit` v = `%`
)->a( n = `title` v = `Deviation`
)->end(
)->end(
)->end(
)->end(
)->end( ).
client->popover_display( xml = popover->stringify( )
by_id = client->get_event_arg( ) ).
ENDMETHOD.
METHOD model_init.
" the DynamicPage starts with a click-toggleable header ({/titleClickable},
" the original binds it against a model that never sets it, so it falls back
" to the control default true) and a hidden footer (revealed by Toggle Footer)
titleclickable = abap_true.
showfooter = abap_false.
" the shared 123-row demo ProductCollection (sap/ui/demo/mock/products.json),
" the five columns the table binds (+ Price/CurrencyCode for the Currency type)
productcollection = VALUE #(
( name = `Notebook Basic 15` productid = `HT-1000` suppliername = `Very Best Screens` width = `30` depth = `18` height = `3` dimunit = `cm` price = `956` currencycode = `EUR` )
( name = `Notebook Basic 17` productid = `HT-1001` suppliername = `Very Best Screens` width = `29` depth = `17` height = `3.1` dimunit = `cm` price = `1249` currencycode = `EUR` )
( name = `Notebook Basic 18` productid = `HT-1002` suppliername = `Very Best Screens` width = `28` depth = `19` height = `2.5` dimunit = `cm` price = `1570` currencycode = `EUR` )
( name = `Notebook Basic 19` productid = `HT-1003` suppliername = `Smartcards` width = `32` depth = `21` height = `4` dimunit = `cm` price = `1650` currencycode = `EUR` )
( name = `ITelO Vault` productid = `HT-1007` suppliername = `Technocom` width = `32` depth = `22` height = `3` dimunit = `cm` price = `299` currencycode = `EUR` )
( name = `Notebook Professional 15` productid = `HT-1010` suppliername = `Very Best Screens` width = `33` depth = `20` height = `3` dimunit = `cm` price = `1999` currencycode = `EUR` )
( name = `Notebook Professional 17` productid = `HT-1011` suppliername = `Very Best Screens` width = `33` depth = `23` height = `2` dimunit = `cm` price = `2299` currencycode = `EUR` )
( name = `ITelO Vault Net` productid = `HT-1020` suppliername = `Technocom` width = `10` depth = `1.8` height = `17` dimunit = `cm` price = `459` currencycode = `EUR` )
( name = `ITelO Vault SAT` productid = `HT-1021` suppliername = `Technocom` width = `11` depth = `1.7` height = `18` dimunit = `cm` price = `149` currencycode = `EUR` )
( name = `Comfort Easy` productid = `HT-1022` suppliername = `Technocom` width = `84` depth = `1.5` height = `14` dimunit = `cm` price = `1679` currencycode = `EUR` )
( name = `Comfort Senior` productid = `HT-1023` suppliername = `Technocom` width = `80` depth = `1.6` height = `13` dimunit = `cm` price = `512` currencycode = `EUR` )
( name = `Ergo Screen E-I` productid = `HT-1030` suppliername = `Very Best Screens` width = `37` depth = `12` height = `36` dimunit = `cm` price = `230` currencycode = `EUR` )
( name = `Ergo Screen E-II` productid = `HT-1031` suppliername = `Very Best Screens` width = `40.8` depth = `19` height = `43` dimunit = `cm` price = `285` currencycode = `EUR` )
( name = `Ergo Screen E-III` productid = `HT-1032` suppliername = `Very Best Screens` width = `40.8` depth = `19` height = `43` dimunit = `cm` price = `345` currencycode = `EUR` )
( name = `Flat Basic` productid = `HT-1035` suppliername = `Very Best Screens` width = `39` depth = `20` height = `41` dimunit = `cm` price = `399` currencycode = `EUR` )
( name = `Flat Future` productid = `HT-1036` suppliername = `Very Best Screens` width = `45` depth = `26` height = `46` dimunit = `cm` price = `430` currencycode = `EUR` )
( name = `Flat XL` productid = `HT-1037` suppliername = `Very Best Screens` width = `54.5` depth = `22.1` height = `39.1` dimunit = `cm` price = `1230` currencycode = `EUR` )
( name = `Laser Professional Eco` productid = `HT-1040` suppliername = `Alpha Printers` width = `51` depth = `46` height = `30` dimunit = `cm` price = `830` currencycode = `EUR` )
( name = `Laser Basic` productid = `HT-1041` suppliername = `Alpha Printers` width = `48` depth = `42` height = `26` dimunit = `cm` price = `490` currencycode = `EUR` )
( name = `Laser Allround` productid = `HT-1042` suppliername = `Alpha Printers` width = `53` depth = `50` height = `65` dimunit = `cm` price = `349` currencycode = `EUR` )
( name = `Ultra Jet Super Color` productid = `HT-1050` suppliername = `Alpha Printers` width = `41` depth = `41` height = `28` dimunit = `cm` price = `139` currencycode = `EUR` )
( name = `Ultra Jet Mobile` productid = `HT-1051` suppliername = `Printer for All` width = `46` depth = `32` height = `25` dimunit = `cm` price = `99` currencycode = `EUR` )
( name = `Ultra Jet Super Highspeed` productid = `HT-1052` suppliername = `Printer for All` width = `41` depth = `41` height = `28` dimunit = `cm` price = `170` currencycode = `EUR` )
( name = `Multi Print` productid = `HT-1055` suppliername = `Printer for All` width = `55` depth = `45` height = `29` dimunit = `cm` price = `99` currencycode = `EUR` )
( name = `Multi Color` productid = `HT-1056` suppliername = `Printer for All` width = `51` depth = `41.3` height = `22` dimunit = `cm` price = `119` currencycode = `EUR` )
( name = `Cordless Mouse` productid = `HT-1060` suppliername = `Oxynum` width = `6` depth = `14.5` height = `3.5` dimunit = `cm` price = `9` currencycode = `EUR` )
( name = `Speed Mouse` productid = `HT-1061` suppliername = `Oxynum` width = `7` depth = `15` height = `3.1` dimunit = `cm` price = `7` currencycode = `EUR` )
( name = `Track Mouse` productid = `HT-1062` suppliername = `Oxynum` width = `3` depth = `7` height = `4` dimunit = `cm` price = `11` currencycode = `EUR` )
( name = `Ergonomic Keyboard` productid = `HT-1063` suppliername = `Oxynum` width = `50` depth = `21` height = `3.5` dimunit = `cm` price = `14` currencycode = `EUR` )
( name = `Internet Keyboard` productid = `HT-1064` suppliername = `Oxynum` width = `52` depth = `25` height = `3` dimunit = `cm` price = `16` currencycode = `EUR` )
( name = `Media Keyboard` productid = `HT-1065` suppliername = `Oxynum` width = `51.4` depth = `23` height = `4` dimunit = `cm` price = `26` currencycode = `EUR` )
( name = `Mousepad` productid = `HT-1066` suppliername = `Oxynum` width = `15` depth = `6` height = `0.2` dimunit = `cm` price = `6.99` currencycode = `EUR` )
( name = `Ergo Mousepad` productid = `HT-1067` suppliername = `Oxynum` width = `15` depth = `6` height = `0.2` dimunit = `cm` price = `8.99` currencycode = `EUR` )
( name = `Designer Mousepad` productid = `HT-1068` suppliername = `Fasttech` width = `24` depth = `24` height = `0.6` dimunit = `cm` price = `12.99` currencycode = `EUR` )
( name = `Universal card reader` productid = `HT-1069` suppliername = `Fasttech` width = `6` depth = `6` height = `3` dimunit = `cm` price = `14` currencycode = `EUR` )
( name = `Proctra X` productid = `HT-1070` suppliername = `Ultrasonic United` width = `22` depth = `35` height = `17` dimunit = `cm` price = `70.9` currencycode = `EUR` )
( name = `Gladiator MX` productid = `HT-1071` suppliername = `Ultrasonic United` width = `22` depth = `35` height = `17` dimunit = `cm` price = `81.7` currencycode = `EUR` )
( name = `Hurricane GX` productid = `HT-1072` suppliername = `Ultrasonic United` width = `22` depth = `35` height = `17` dimunit = `cm` price = `101.2` currencycode = `EUR` )
( name = `Hurricane GX/LN` productid = `HT-1073` suppliername = `Smartcards` width = `22` depth = `35` height = `17` dimunit = `cm` price = `139.99` currencycode = `EUR` )
( name = `Photo Scan` productid = `HT-1080` suppliername = `Printer for All` width = `34` depth = `48` height = `5` dimunit = `cm` price = `129` currencycode = `EUR` )
( name = `Power Scan` productid = `HT-1081` suppliername = `Printer for All` width = `31` depth = `43` height = `7` dimunit = `cm` price = `89` currencycode = `EUR` )
( name = `Jet Scan Professional` productid = `HT-1082` suppliername = `Printer for All` width = `33` depth = `41` height = `12` dimunit = `cm` price = `169` currencycode = `EUR` )
( name = `Jet Scan Professional` productid = `HT-1083` suppliername = `Printer for All` width = `35` depth = `40` height = `10` dimunit = `cm` price = `189` currencycode = `EUR` )
( name = `Copymaster` productid = `HT-1085` suppliername = `Alpha Printers` width = `45` depth = `42` height = `22` dimunit = `cm` price = `1499` currencycode = `EUR` )
( name = `Surround Sound` productid = `HT-1090` suppliername = `Speaker Experts` width = `12` depth = `10` height = `16` dimunit = `cm` price = `39` currencycode = `EUR` )
( name = `Blaster Extreme` productid = `HT-1091` suppliername = `Speaker Experts` width = `13` depth = `11` height = `17.5` dimunit = `cm` price = `26` currencycode = `EUR` )
( name = `Sound Booster` productid = `HT-1092` suppliername = `Speaker Experts` width = `12.4` depth = `10.4` height = `18.1` dimunit = `cm` price = `45` currencycode = `EUR` )
( name = `Lovely Sound 5.1 Wireless` productid = `HT-1095` suppliername = `Fasttech` width = `24` depth = `19` height = `23` dimunit = `cm` price = `49` currencycode = `EUR` )
( name = `Lovely Sound 5.1` productid = `HT-1096` suppliername = `Fasttech` width = `25` depth = `17` height = `19` dimunit = `cm` price = `39` currencycode = `EUR` )
( name = `Lovely Sound Stereo` productid = `HT-1097` suppliername = `Fasttech` width = `21.3` depth = `2.4` height = `19.7` dimunit = `cm` price = `29` currencycode = `EUR` )
( name = `Smart Office` productid = `HT-1100` suppliername = `Technocom` width = `15` depth = `6.5` height = `2.1` dimunit = `cm` price = `89.9` currencycode = `EUR` )
( name = `Smart Design` productid = `HT-1101` suppliername = `Technocom` width = `14` depth = `6.7` height = `24` dimunit = `cm` price = `79.9` currencycode = `EUR` )
( name = `Smart Network` productid = `HT-1102` suppliername = `Technocom` width = `16` depth = `6` height = `27` dimunit = `cm` price = `69` currencycode = `EUR` )
( name = `Smart Multimedia` productid = `HT-1103` suppliername = `Technocom` width = `11` depth = `3.4` height = `22` dimunit = `cm` price = `77` currencycode = `EUR` )
( name = `Smart Games` productid = `HT-1104` suppliername = `Technocom` width = `10` depth = `3` height = `30` dimunit = `cm` price = `55` currencycode = `EUR` )
( name = `Smart Internet Antivirus` productid = `HT-1105` suppliername = `Brainsoft` width = `16` depth = `4` height = `21` dimunit = `cm` price = `29` currencycode = `EUR` )
( name = `Smart Firewall` productid = `HT-1106` suppliername = `Brainsoft` width = `17.9` depth = `4.2` height = `23.1` dimunit = `cm` price = `34` currencycode = `EUR` )
( name = `Smart Money` productid = `HT-1107` suppliername = `Brainsoft` width = `12` depth = `1.5` height = `19` dimunit = `cm` price = `29.9` currencycode = `EUR` )
( name = `PC Lock` productid = `HT-1110` suppliername = `Red Point Stores` width = `20` depth = `8` height = `4.3` dimunit = `cm` price = `8.9` currencycode = `EUR` )
( name = `Notebook Lock` productid = `HT-1111` suppliername = `Red Point Stores` width = `31` depth = `9` height = `7` dimunit = `cm` price = `6.9` currencycode = `EUR` )
( name = `Web cam reality` productid = `HT-1112` suppliername = `Red Point Stores` width = `9` depth = `8.2` height = `1.3` dimunit = `cm` price = `39` currencycode = `EUR` )
( name = `Screen clean` productid = `HT-1113` suppliername = `Red Point Stores` width = `2` depth = `2` height = `0.1` dimunit = `cm` price = `2.3` currencycode = `EUR` )
( name = `Fabric bag professional` productid = `HT-1114` suppliername = `Red Point Stores` width = `42` depth = `32` height = `7` dimunit = `cm` price = `31` currencycode = `EUR` )
( name = `Wireless DSL Router` productid = `HT-1115` suppliername = `Red Point Stores` width = `19.3` depth = `18` height = `5` dimunit = `cm` price = `49` currencycode = `EUR` )
( name = `Wireless DSL Router / Repeater` productid = `HT-1116` suppliername = `Red Point Stores` width = `19.3` depth = `18` height = `5` dimunit = `cm` price = `59` currencycode = `EUR` )
( name = `Wireless DSL Router / Repeater and Print Server` productid = `HT-1117` suppliername = `Technocom` width = `19.3` depth = `18` height = `5` dimunit = `cm` price = `69` currencycode = `EUR` )
( name = `USB Stick` productid = `HT-1118` suppliername = `Technocom` width = `1.5` depth = `8.7` height = `1.2` dimunit = `cm` price = `35` currencycode = `EUR` )
( name = `Travel Adapter` productid = `HT-1119` suppliername = `Titanium` width = `2` depth = `3.1` height = `3.9` dimunit = `cm` price = `79` currencycode = `EUR` )
( name = `Cordless Bluetooth Keyboard, english international` productid = `HT-1120` suppliername = `Technocom` width = `51.4` depth = `23` height = `4` dimunit = `cm` price = `29` currencycode = `EUR` )
( name = `Flat XXL` productid = `HT-1137` suppliername = `Technocom` width = `54` depth = `22` height = `38` dimunit = `cm` price = `1430` currencycode = `EUR` )
( name = `Pocket Mouse` productid = `HT-1138` suppliername = `Technocom` width = `0.3` depth = `0.5` height = `1` dimunit = `cm` price = `23` currencycode = `EUR` )
( name = `PC Power Station` productid = `HT-1210` suppliername = `Technocom` width = `28` depth = `31` height = `43` dimunit = `cm` price = `2399` currencycode = `EUR` )
( name = `Astro Laptop 1516` productid = `HT-1251` suppliername = `Ultrasonic United` width = `30` depth = `18` height = `3` dimunit = `cm` price = `989` currencycode = `EUR` )
( name = `Astro Phone 6` productid = `HT-1252` suppliername = `Ultrasonic United` width = `8` depth = `6` height = `1.5` dimunit = `cm` price = `649` currencycode = `EUR` )
( name = `Benda Laptop 1408` productid = `HT-1253` suppliername = `Ultrasonic United` width = `30` depth = `18` height = `3` dimunit = `cm` price = `976` currencycode = `EUR` )
( name = `Bending Screen 21HD` productid = `HT-1254` suppliername = `Ultrasonic United` width = `37` depth = `12` height = `36` dimunit = `cm` price = `250` currencycode = `EUR` )
( name = `Broad Screen 22HD` productid = `HT-1255` suppliername = `Ultrasonic United` width = `39` depth = `12` height = `38` dimunit = `cm` price = `270` currencycode = `EUR` )
( name = `Cerdik Phone 7` productid = `HT-1256` suppliername = `Ultrasonic United` width = `9` depth = `15` height = `1.5` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `Cepat Tablet 10.5` productid = `HT-1257` suppliername = `Ultrasonic United` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `Cepat Tablet 8` productid = `HT-1258` suppliername = `Ultrasonic United` width = `38` depth = `21` height = `3.5` dimunit = `cm` price = `529` currencycode = `EUR` )
( name = `Server Basic` productid = `HT-1500` suppliername = `Technocom` width = `34` depth = `35` height = `23` dimunit = `cm` price = `5000` currencycode = `EUR` )
( name = `Server Professional` productid = `HT-1501` suppliername = `Technocom` width = `29` depth = `30` height = `27` dimunit = `cm` price = `15000` currencycode = `EUR` )
( name = `Server Power Pro` productid = `HT-1502` suppliername = `Technocom` width = `22` depth = `27.3` height = `37` dimunit = `cm` price = `25000` currencycode = `EUR` )
( name = `Family PC Basic` productid = `HT-1600` suppliername = `Titanium` width = `21.4` depth = `29` height = `38` dimunit = `cm` price = `600` currencycode = `EUR` )
( name = `Family PC Pro` productid = `HT-1601` suppliername = `Titanium` width = `25` depth = `31.7` height = `40.2` dimunit = `cm` price = `900` currencycode = `EUR` )
( name = `Gaming Monster` productid = `HT-1602` suppliername = `Titanium` width = `26.5` depth = `34` height = `47` dimunit = `cm` price = `1200` currencycode = `EUR` )
( name = `Gaming Monster Pro` productid = `HT-1603` suppliername = `Titanium` width = `27` depth = `28` height = `42` dimunit = `cm` price = `1700` currencycode = `EUR` )
( name = `7" Widescreen Portable DVD Player w MP3` productid = `HT-2000` suppliername = `Titanium` width = `21.4` depth = `19` height = `27.6` dimunit = `cm` price = `249.99` currencycode = `EUR` )
( name = `10" Portable DVD player` productid = `HT-2001` suppliername = `Titanium` width = `24` depth = `19.5` height = `29` dimunit = `cm` price = `449.99` currencycode = `EUR` )
( name = `Portable DVD Player with 9" LCD Monitor` productid = `HT-2002` suppliername = `Technocom` width = `21` depth = `16.5` height = `14` dimunit = `cm` price = `853.99` currencycode = `EUR` )
( name = `CD/DVD case: 264 sleeves` productid = `HT-2025` suppliername = `Titanium` width = `13` depth = `13` height = `20` dimunit = `cm` price = `44.99` currencycode = `EUR` )
( name = `Audio/Video Cable Kit - 4m` productid = `HT-2026` suppliername = `Titanium` width = `21` depth = `10.2` height = `13` dimunit = `cm` price = `29.99` currencycode = `EUR` )
( name = `Removable CD/DVD Laser Labels` productid = `HT-2027` suppliername = `Titanium` width = `5.5` depth = `2` height = `2` dimunit = `cm` price = `8.99` currencycode = `EUR` )
( name = `Beam Breaker B-1` productid = `HT-6100` suppliername = `Titanium` width = `30.4` depth = `23.1` height = `23` dimunit = `cm` price = `469` currencycode = `EUR` )
( name = `Beam Breaker B-2` productid = `HT-6101` suppliername = `Technocom` width = `30.4` depth = `23.1` height = `23` dimunit = `cm` price = `679` currencycode = `EUR` )
( name = `Beam Breaker B-3` productid = `HT-6102` suppliername = `Technocom` width = `30.4` depth = `23.1` height = `23` dimunit = `cm` price = `889` currencycode = `EUR` )
( name = `Play Movie` productid = `HT-6110` suppliername = `Fasttech` width = `37` depth = `24` height = `6` dimunit = `cm` price = `130` currencycode = `EUR` )
( name = `Record Movie` productid = `HT-6111` suppliername = `Fasttech` width = `38` depth = `26` height = `6.2` dimunit = `cm` price = `288` currencycode = `EUR` )
( name = `ITelo MusicStick` productid = `HT-6120` suppliername = `Fasttech` width = `1.5` depth = `6` height = `1` dimunit = `cm` price = `45` currencycode = `EUR` )
( name = `ITelo Jog-Mate` productid = `HT-6121` suppliername = `Fasttech` width = `5.1` depth = `8` height = `9.2` dimunit = `cm` price = `63` currencycode = `EUR` )
( name = `Power Pro Player 40` productid = `HT-6122` suppliername = `Fasttech` width = `5.1` depth = `8` height = `9.2` dimunit = `cm` price = `167` currencycode = `EUR` )
( name = `Power Pro Player 80` productid = `HT-6123` suppliername = `Fasttech` width = `4` depth = `6` height = `0.8` dimunit = `cm` price = `299` currencycode = `EUR` )
( name = `Flat Watch HD32` productid = `HT-6130` suppliername = `Very Best Screens` width = `78` depth = `22.1` height = `55` dimunit = `cm` price = `1459` currencycode = `EUR` )
( name = `Flat Watch HD37` productid = `HT-6131` suppliername = `Very Best Screens` width = `99.1` depth = `26` height = `61` dimunit = `cm` price = `1199` currencycode = `EUR` )
( name = `Flat Watch HD41` productid = `HT-6132` suppliername = `Very Best Screens` width = `128` depth = `23` height = `79.1` dimunit = `cm` price = `899` currencycode = `EUR` )
( name = `Copperberry` productid = `HT-7000` suppliername = `Fasttech` width = `8.1` depth = `13` height = `12.1` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `Silverberry` productid = `HT-7010` suppliername = `Fasttech` width = `8.1` depth = `13` height = `12.1` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `Goldberry` productid = `HT-7020` suppliername = `Fasttech` width = `8.1` depth = `13` height = `12.1` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `Platinberry` productid = `HT-7030` suppliername = `Fasttech` width = `8.1` depth = `13` height = `12.1` dimunit = `cm` price = `549` currencycode = `EUR` )
( name = `ITelO FlexTop I4000` productid = `HT-8000` suppliername = `Titanium` width = `31` depth = `19` height = `3.1` dimunit = `cm` price = `799` currencycode = `EUR` )
( name = `ITelO FlexTop I6300c` productid = `HT-8001` suppliername = `Titanium` width = `32` depth = `20` height = `3.4` dimunit = `cm` price = `799` currencycode = `EUR` )
( name = `ITelO FlexTop I9100` productid = `HT-8002` suppliername = `Titanium` width = `38` depth = `21` height = `4.1` dimunit = `cm` price = `1199` currencycode = `EUR` )
( name = `ITelO FlexTop I9800` productid = `HT-8003` suppliername = `Titanium` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `1388` currencycode = `EUR` )
( name = `Smartphone Leather Case` productid = `HT-9991` suppliername = `Ultrasonic United` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `25` currencycode = `EUR` )
( name = `Smartphone Alpha` productid = `HT-9992` suppliername = `Ultrasonic United` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `599` currencycode = `EUR` )
( name = `Mini Tablet` productid = `HT-9993` suppliername = `Ultrasonic United` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `833` currencycode = `EUR` )
( name = `Camcorder View` productid = `HT-9994` suppliername = `Ultrasonic United` width = `48` depth = `31` height = `27` dimunit = `cm` price = `1388` currencycode = `EUR` )
( name = `Tablet Pouch` productid = `HT-9995` suppliername = `Titanium` width = `25` depth = `40` height = `4.5` dimunit = `cm` price = `20` currencycode = `EUR` )
( name = `Tablet Pouch` productid = `HT-9996` suppliername = `Titanium` width = `25` depth = `40` height = `4.5` dimunit = `cm` price = `20` currencycode = `EUR` )
( name = `e-Book Reader ReadMe` productid = `HT-9997` suppliername = `Titanium` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `33` currencycode = `EUR` )
( name = `Smartphone Beta` productid = `HT-9998` suppliername = `Titanium` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `30` currencycode = `EUR` )
( name = `Maxi Tablet` productid = `HT-9999` suppliername = `Titanium` width = `48` depth = `31` height = `4.5` dimunit = `cm` price = `749` currencycode = `EUR` )
( name = `Flyer` productid = `PF-1000` suppliername = `Titanium` width = `46` depth = `30` height = `3` dimunit = `cm` price = `0` currencycode = `EUR` )
).
ENDMETHOD.
ENDCLASS.More in sap.f
- Dynamic Page Freestyle Example — Dynamic Page freestyle example with a responsive sap.m.Table in the content area, showing…
- Grid List features - Grouping, Header, Growing — This sample illustrates subgroups with headers, custom header and lazy loading of GridLis…
- Grid List - Break point examples - S, M, L, XL — This sample illustrates how to configure the responsive settings for different container…
- Shell Bar with search — Shell Bar example with configured search functionality.
- Grid List with Responsive Column Layout — This layout displays a variable number of grid columns depending on available screen size…
- Flexible Column Layout (with Event Bus) — Clicking on a link in a column opens the next column.
- Dynamic Page with Responsive Avatar — Dynamic Page demonstrating the breakpointChange event to adjust Avatar sizes responsively…
- Flexible Column Layout Landmark Info For Columns — Flexible Column Layout where the first and the last columns have custom Landmark Info
- Flexible Column Layout Landmark Info For Arrows — Flexible Column Layout where the all the arrows have custom Landmark Info
- Grid Container - Drag and Drop — This sample represents GridContainer with enabled Drag and Drop functionality.
- Grid Container - Drag and Drop From List to GridContainer — This sample represents how items from a control which is not GridContainer can be dragged…
- Grid Container - Keyboard navigation between multiple grids — This sample demonstrates the keyboard navigation between multiple grids
On this page