ObjectPage with Hidden Section Titles
ObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.
Z2UI5_CL_SMPC_APP_200
Controls
sap.uxap
UI5 1.77
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_200- Source file
z2ui5_cl_smpc_app_200.clas.abap↗- Library
- sap.uxap
- UI5 entity
sap.uxap.HeaderFacetPattern- Demo kit sample
sap.uxap.sample.ObjectPageSectionShowTitle- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.77
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: headerfacetpattern, header, facet, pattern, sap.uxap, objectpagesectionshowtitle, objectpagelayout, objectpagedynamicheadertitle, title, hbox, avatar, vbox
Controls it builds
- sap.m.Avatar
- sap.m.Button
- sap.m.Column
- sap.m.ColumnListItem
- sap.m.FlexBox
- sap.m.HBox
- sap.m.Label
- sap.m.Link
- sap.m.ObjectNumber
- sap.m.ObjectStatus
- sap.m.OverflowToolbar
- sap.m.OverflowToolbarButton
- sap.m.SearchField
- sap.m.Table
- sap.m.Text
- sap.m.Title
- sap.m.ToolbarSpacer
- sap.m.VBox
- sap.ui.core.Title
- sap.ui.core.mvc.View
- sap.ui.layout.form.SimpleForm
- sap.uxap.ObjectPageDynamicHeaderTitle
- sap.uxap.ObjectPageLayout
- sap.uxap.ObjectPageSection
- sap.uxap.ObjectPageSubSection
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_200.clas.abap — 488 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords headerfacetpattern header facet pattern sap.uxap objectpagesectionshowtitle objectpagelayout objectpagedynamicheadertitle title hbox avatar vbox
" @summary ObjectPage sample that demonstrates the combination of header facets and showTitle properties of sections and subsections.
CLASS z2ui5_cl_smpc_app_200 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_200 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( ).
" robot.png avatar assets rewritten from the sample's relative
" ./test-resources path to the sdk.openui5.org host (offline asset rule)
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns` v = `sap.uxap`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:m` v = `sap.m`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:forms` v = `sap.ui.layout.form`
)->ele( `ObjectPageLayout`
)->a( n = `id` v = `ObjectPageLayout`
)->a( n = `upperCaseAnchorBar` v = `false`
)->ele( `headerTitle`
)->ele( `ObjectPageDynamicHeaderTitle`
)->ele( `expandedHeading`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Robot Arm Series 9`
)->end(
)->ele( `snappedHeading`
)->ele( n = `HBox` ns = `m`
" POST-1.71: sap.m.Avatar (since 1.73) kept 1:1, here and in headerContent
)->tag( n = `Avatar` ns = `m`
)->a( n = `src` v = `https://sdk.openui5.org/test-resources/sap/uxap/images/robot.png`
)->a( n = `class` v = `sapUiMediumMarginEnd`
)->a( n = `displayShape` v = `Square`
)->ele( n = `VBox` ns = `m`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Robot Arm Series 9`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `PO-48865`
)->end(
)->end(
)->end(
)->ele( `expandedContent`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `PO-48865`
)->end(
)->ele( `snappedTitleOnMobile`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Robot Arm Series 9`
)->end(
)->ele( `actions`
)->tag( n = `Button` ns = `m`
)->a( n = `text` v = `Edit`
)->a( n = `type` v = `Emphasized`
)->tag( n = `Button` ns = `m`
)->a( n = `text` v = `Delete`
)->tag( n = `Button` ns = `m`
)->a( n = `text` v = `Simulate Assembly`
)->end(
)->end(
)->end(
)->ele( `headerContent`
)->ele( n = `FlexBox` ns = `m`
)->a( n = `wrap` v = `Wrap`
)->a( n = `fitContainer` v = `true`
)->tag( n = `Avatar` ns = `m`
)->a( n = `src` v = `https://sdk.openui5.org/test-resources/sap/uxap/images/robot.png`
)->a( n = `class` v = `sapUiMediumMarginEnd`
)->a( n = `displayShape` v = `Square`
)->a( n = `displaySize` v = `L`
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiLargeMarginEnd sapUiSmallMarginBottom`
)->ele( n = `HBox` ns = `m`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->a( n = `renderType` v = `Bare`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Manufacturer:`
)->a( n = `class` v = `sapUiTinyMarginEnd`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = ` Robotech`
)->end(
)->ele( n = `HBox` ns = `m`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->a( n = `renderType` v = `Bare`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Factory:`
)->a( n = `class` v = `sapUiTinyMarginEnd`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = ` Orlando, Florida`
)->end(
)->ele( n = `HBox` ns = `m`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Supplier:`
)->a( n = `class` v = `sapUiTinyMarginEnd`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `Robotech (234242343)`
)->end(
)->end(
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiLargeMarginEnd sapUiSmallMarginBottom`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Status`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->tag( n = `ObjectStatus` ns = `m`
)->a( n = `text` v = `Delivery`
)->a( n = `state` v = `Success`
)->a( n = `class` v = `sapMObjectStatusLarge`
)->end(
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiLargeMarginEnd sapUiSmallMarginBottom`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Delivery Time`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->tag( n = `ObjectStatus` ns = `m`
)->a( n = `text` v = `12 Days`
)->a( n = `icon` v = `sap-icon://shipping-status`
)->a( n = `class` v = `sapMObjectStatusLarge`
)->end(
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiLargeMarginEnd sapUiSmallMarginBottom`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Assembly Option`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->tag( n = `ObjectStatus` ns = `m`
)->a( n = `text` v = `To Be Selected`
)->a( n = `state` v = `Error`
)->a( n = `class` v = `sapMObjectStatusLarge`
)->end(
)->ele( n = `VBox` ns = `m`
)->a( n = `class` v = `sapUiLargeMarginEnd`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Monthly Leasing Instalment`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->tag( n = `ObjectNumber` ns = `m`
)->a( n = `number` v = `379.99`
)->a( n = `unit` v = `USD`
)->a( n = `emphasized` v = `false`
)->a( n = `class` v = `sapMObjectNumberLarge`
)->end(
)->end(
)->end(
)->ele( `sections`
)->ele( `ObjectPageSection`
)->a( n = `titleUppercase` v = `false`
)->a( n = `title` v = `General Information`
)->ele( `subSections`
)->ele( `ObjectPageSubSection`
)->a( n = `title` v = `Order Details`
" POST-1.71: showTitle (since 1.77) kept 1:1, here and on the Products subsection
)->a( n = `showTitle` v = `false`
)->ele( `blocks`
)->ele( n = `SimpleForm` ns = `forms`
)->a( n = `class` v = `sapUxAPObjectPageSubSectionAlignContent`
)->a( n = `layout` v = `ColumnLayout`
)->a( n = `columnsM` v = `2`
)->a( n = `columnsL` v = `3`
)->a( n = `columnsXL` v = `4`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Order Details`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Order ID`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `589946637`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Cotract`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10045876`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Transaction Date:`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `May 6, 2018`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Expected Delivery Date`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `June 23, 2018`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Factory`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Orlando, FL`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Supplier`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Robotech`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Configuration Accounts`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Model`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Robot Arm Series 9`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Color`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `White (default)`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Socket`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Default Socket 10`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Leasing Instalment`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `379.99 USD per month`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Axis`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `6 Axis`
)->end(
)->end(
)->end(
)->ele( `ObjectPageSubSection`
)->a( n = `title` v = `Products`
)->a( n = `showTitle` v = `false`
)->ele( `blocks`
)->ele( n = `Table` ns = `m`
)->a( n = `class` v = `sapUxAPObjectPageSubSectionAlignContent`
)->a( n = `width` v = `auto`
)->ele( n = `headerToolbar` ns = `m`
)->ele( n = `OverflowToolbar` ns = `m`
)->tag( n = `Title` ns = `m`
)->a( n = `text` v = `Products`
)->a( n = `level` v = `H2`
)->tag( n = `ToolbarSpacer` ns = `m`
)->tag( n = `SearchField` ns = `m`
)->a( n = `width` v = `17.5rem`
)->tag( n = `OverflowToolbarButton` ns = `m`
)->a( n = `tooltip` v = `Sort`
)->a( n = `text` v = `Sort`
)->a( n = `icon` v = `sap-icon://sort`
)->tag( n = `OverflowToolbarButton` ns = `m`
)->a( n = `tooltip` v = `Filter`
)->a( n = `text` v = `Filter`
)->a( n = `icon` v = `sap-icon://filter`
)->tag( n = `OverflowToolbarButton` ns = `m`
)->a( n = `tooltip` v = `Group`
)->a( n = `text` v = `Group`
)->a( n = `icon` v = `sap-icon://group-2`
)->tag( n = `OverflowToolbarButton` ns = `m`
)->a( n = `tooltip` v = `Settings`
)->a( n = `text` v = `Settings`
)->a( n = `icon` v = `sap-icon://action-settings`
)->end(
)->end(
)->ele( n = `columns` ns = `m`
)->ele( n = `Column` ns = `m`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Document Number`
)->end(
)->ele( n = `Column` ns = `m`
)->a( n = `minScreenWidth` v = `Tablet`
)->a( n = `demandPopin` v = `true`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Company`
)->end(
)->ele( n = `Column` ns = `m`
)->a( n = `minScreenWidth` v = `Tablet`
)->a( n = `demandPopin` v = `true`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Contact Person`
)->end(
)->ele( n = `Column` ns = `m`
)->a( n = `minScreenWidth` v = `Tablet`
)->a( n = `demandPopin` v = `true`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Posting Date`
)->end(
)->ele( n = `Column` ns = `m`
)->a( n = `hAlign` v = `End`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Amount (Local Currency)`
)->end(
)->end(
)->ele( n = `items` ns = `m`
)->ele( n = `ColumnListItem` ns = `m`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10223882001820`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Jologa`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Denise Smith`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `11/15/19`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `12,897.00 EUR`
)->end(
)->ele( n = `ColumnListItem` ns = `m`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10223882001820`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Jologa`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Denise Smith`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `11/15/19`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `12,897.00 EUR`
)->end(
)->ele( n = `ColumnListItem` ns = `m`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10223882001820`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Jologa`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Denise Smith`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `11/15/19`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `12,897.00 EUR`
)->end(
)->ele( n = `ColumnListItem` ns = `m`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10223882001820`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Jologa`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Denise Smith`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `11/15/19`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `12,897.00 EUR`
)->end(
)->ele( n = `ColumnListItem` ns = `m`
)->tag( n = `Link` ns = `m`
)->a( n = `text` v = `10223882001820`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Jologa`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `Denise Smith`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `11/15/19`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `12,897.00 EUR`
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( `ObjectPageSection`
)->a( n = `titleUppercase` v = `false`
)->a( n = `title` v = `Contact Information`
)->ele( `subSections`
)->ele( `ObjectPageSubSection`
)->a( n = `title` v = `Contact Information`
)->ele( `blocks`
)->ele( n = `SimpleForm` ns = `forms`
)->a( n = `class` v = `sapUxAPObjectPageSubSectionAlignContent`
)->a( n = `layout` v = `ColumnLayout`
)->a( n = `columnsM` v = `2`
)->a( n = `columnsL` v = `3`
)->a( n = `columnsXL` v = `4`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Phone Numbers`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Home`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `+ 1 415-321-1234`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Office phone`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `+ 1 415-321-5555`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Social Accounts`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `LinkedIn`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `/DeniseSmith`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Twitter`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `@DeniseSmith`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Addresses`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Home Address`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `2096 Mission Street`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Mailing Address`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `PO Box 32114`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Mailing Address`
)->tag( n = `Label` ns = `m`
)->a( n = `text` v = `Work`
)->tag( n = `Text` ns = `m`
)->a( n = `text` v = `DeniseSmith@sap.com` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.uxap
- Subsection with Expand/Collapse — This example shows subsections in expanded and collapsed mode.
- Single View sample — Use of implicit static view definition.
- Subsection with Action buttons sample — Example of a subsection displaying action buttons.
- Object Page Layout Section sample — This example explains the rules for the rendering of sections
- Navigation to Section sample — This example shows how to change the default behavior in order to be able to navigate to…
- Object Page Header Content Priorities — The sample shows how to set priorities of the ObjectPageHeader content items by using the…
- ObjectPageHeaderContent — This is an example of an ObjectPageHeaderContent.
- Standard Fiori ObjectPageHeader — This is an example of an ObjectPageHeader containing mainly KPIs.
- Bound Model Mapping — Use of dynamic bound model mapping
- Object Page with ObjectPageHeaderActionButtons — This example demonstrates ObjectPage with ObjectPageHeaderActionButtons and a GenericTag…
- Subsection with hidden title — Example of a subsection with showTitle property set to false.
- Object Page with Translucent backgroundDesign — This example demonstrates ObjectPage with ObjectPageDynamicHeaderTitle with Solid backgro…
On this page