Flexible sizing - Icon Tab Bar
This page shows flexible sizing with an Icon Tab Bar: The upper part extends with its content, but doesn't react to viewport changes. The Icon Tab Bar reacts to the viewport size. The table inside takes the available space.
Z2UI5_CL_SMPC_APP_406
Controls
sap.m
UI5 1.119
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_406- Source file
z2ui5_cl_smpc_app_406.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.Page- Demo kit sample
sap.m.sample.PageListReportIconTabBar- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.119
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: sap.m, pagelistreporticontabbar, vbox, simpleform, title, label, text, flexitemdata, icontabbar, icontabfilter, analyticaltable, auto
Controls it builds
- sap.m.Button
- sap.m.FlexItemData
- sap.m.IconTabBar
- sap.m.IconTabFilter
- sap.m.Label
- sap.m.OverflowToolbar
- sap.m.Page
- sap.m.SearchField
- sap.m.SegmentedButton
- sap.m.SegmentedButtonItem
- sap.m.Text
- sap.m.ToolbarSpacer
- sap.m.VBox
- sap.ui.core.Title
- sap.ui.core.mvc.View
- sap.ui.layout.form.SimpleForm
- sap.ui.table.AnalyticalColumn
- sap.ui.table.AnalyticalTable
- sap.ui.table.rowmodes.Auto
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_406.clas.abap — 195 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords sap.m pagelistreporticontabbar vbox simpleform title label text flexitemdata icontabbar icontabfilter analyticaltable auto
" @summary This page shows flexible sizing with an Icon Tab Bar: The upper part extends with its content, but doesn't react to viewport changes. The Icon Tab Bar reacts to the viewport size. The table inside takes the available space.
CLASS z2ui5_cl_smpc_app_406 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_406 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:c` v = `sap.ui.core`
)->a( n = `xmlns:t` v = `sap.ui.table`
)->a( n = `xmlns:trm` v = `sap.ui.table.rowmodes`
)->a( n = `xmlns:f` v = `sap.ui.layout.form`
)->a( n = `height` v = `100%`
)->ele( `Page`
)->a( n = `title` v = `Title`
)->a( n = `enableScrolling` v = `true`
)->a( n = `class` v = `sapUiResponsivePadding--header sapUiResponsivePadding--footer`
)->ele( `content`
)->ele( `VBox`
)->a( n = `fitContainer` v = `true`
)->ele( n = `SimpleForm` ns = `f`
)->a( n = `id` v = `SimpleFormDisplay480`
)->a( n = `editable` v = `false`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->a( n = `title` v = `Address`
)->a( n = `labelSpanL` v = `4`
)->a( n = `labelSpanM` v = `4`
)->a( n = `emptySpanL` v = `0`
)->a( n = `emptySpanM` v = `0`
)->a( n = `columnsL` v = `2`
)->a( n = `columnsM` v = `2`
)->ele( n = `content` ns = `f`
)->tag( n = `Title` ns = `c`
)->a( n = `text` v = `Office`
)->tag( `Label`
)->a( n = `text` v = `Name`
)->tag( `Text`
)->a( n = `text` v = `Red Point Stores`
)->tag( `Label`
)->a( n = `text` v = `Street/No.`
)->tag( `Text`
)->a( n = `text` v = `Main St 1618`
)->tag( `Label`
)->a( n = `text` v = `ZIP Code/City`
)->tag( `Text`
)->a( n = `text` v = `31415 Maintown`
)->tag( `Label`
)->a( n = `text` v = `Country`
)->tag( `Text`
)->a( n = `text` v = `Germany`
)->tag( n = `Title` ns = `c`
)->a( n = `text` v = `Online`
)->tag( `Label`
)->a( n = `text` v = `Web`
)->tag( `Text`
)->a( n = `text` v = `http://www.sap.com`
)->tag( `Label`
)->a( n = `text` v = `Twitter`
)->tag( `Text`
)->a( n = `text` v = `@sap`
)->end(
)->ele( n = `layoutData` ns = `f`
)->tag( `FlexItemData`
)->a( n = `shrinkFactor` v = `0`
)->a( n = `backgroundDesign` v = `Solid`
)->a( n = `styleClass` v = `sapContrastPlus`
)->end(
)->end(
)->ele( `IconTabBar`
)->a( n = `upperCase` v = `true`
)->a( n = `expandable` v = `false`
)->a( n = `applyContentPadding` v = `true`
)->a( n = `stretchContentHeight` v = `true`
)->a( n = `class` v = `sapUiResponsiveContentPadding`
)->ele( `items`
)->tag( `IconTabFilter`
)->a( n = `key` v = `balances`
)->a( n = `text` v = `Balances`
)->tag( `IconTabFilter`
)->a( n = `key` v = `compare`
)->a( n = `text` v = `Compare`
)->end(
)->ele( `content`
)->ele( n = `AnalyticalTable` ns = `t`
)->a( n = `selectionMode` v = `MultiToggle`
)->ele( n = `rowMode` ns = `t`
" sap.ui.table rowmodes.Auto (@since 1.119) - kept 1:1, see the POST_171 deviation
)->tag( n = `Auto` ns = `trm`
)->a( n = `rowContentHeight` v = `32`
)->end(
)->ele( n = `extension` ns = `t`
)->ele( `OverflowToolbar`
)->tag( `ToolbarSpacer`
)->tag( `SearchField`
)->a( n = `width` v = `12rem`
)->tag( `ToolbarSpacer`
)->a( n = `width` v = `1rem`
)->ele( `SegmentedButton`
)->ele( `items`
)->tag( `SegmentedButtonItem`
)->a( n = `icon` v = `sap-icon://table-view`
)->tag( `SegmentedButtonItem`
)->a( n = `icon` v = `sap-icon://bar-chart`
)->end(
)->end(
)->tag( `ToolbarSpacer`
)->a( n = `width` v = `1rem`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://group-2`
)->a( n = `type` v = `Transparent`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://action-settings`
)->a( n = `type` v = `Transparent`
)->end(
)->end(
)->ele( n = `columns` ns = `t`
)->tag( n = `AnalyticalColumn` ns = `t`
)->tag( n = `AnalyticalColumn` ns = `t`
)->tag( n = `AnalyticalColumn` ns = `t`
)->tag( n = `AnalyticalColumn` ns = `t`
)->end(
)->end(
)->end(
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `growFactor` v = `1`
)->a( n = `baseSize` v = `0%`
)->end(
)->end(
)->end(
)->end(
)->ele( `footer`
)->ele( `OverflowToolbar`
)->ele( `content`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `text` v = `Grouped View`
)->tag( `Button`
)->a( n = `text` v = `Classical Table` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.m
- Panel — Panels are helpful to group custom content. They can be decorated with header and info to…
- Carousel — A sample of a Carousel that contains images.
- Image — Images are faster than words and attract people's attention. Images can also have an acti…
- Object Header - with Circle-shaped Image — An Object Header can set shape of the image by using 'imageShape' property. The shapes co…
- Time Picker - Value States — This example shows different TimePicker value states.
- Flexible sizing - Toolbar — This page shows flexible sizing with a Toolbar. The upper part extends with its content…
- Title Properties — This sample shows the different behaviors of a title.
- Menu with Selectable Items — Some menu items can be added to groups to allow single or multiple item selection.
- Search Field - Suggestions — Add suggestion capabilities to a basic Search Field.
- QuickViewCard Scroll Example — QuickViewCard embedded in container with scroll bar
- Select Dialog Lazy Loading — Select Dialog lazy loading example with JSON model.
- Segmented Button Content Modes — Segmented Button different Content Modes
On this page