Block Layout with links as titles
The BlockLayout Cells can have links as titles. The link text overwrites the title text.
Z2UI5_CL_SMPC_APP_223
Controls
sap.ui.layout
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_223- Source file
z2ui5_cl_smpc_app_223.clas.abap↗- Library
- sap.ui.layout
- UI5 entity
sap.ui.layout.BlockLayout- Demo kit sample
sap.ui.layout.sample.BlockLayoutLinkTitle- 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: blocklayout, block, layout, sap.ui.layout, blocklayoutlinktitle, simpleform, label, slider, segmentedbutton, segmentedbuttonitem, messagestrip, verticallayout
Controls it builds
- sap.m.Label
- sap.m.Link
- sap.m.MessageStrip
- sap.m.SegmentedButton
- sap.m.SegmentedButtonItem
- sap.m.Slider
- sap.m.Text
- sap.ui.core.mvc.View
- sap.ui.layout.BlockLayout
- sap.ui.layout.BlockLayoutCell
- sap.ui.layout.BlockLayoutRow
- sap.ui.layout.VerticalLayout
- sap.ui.layout.form.SimpleForm
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_223.clas.abap — 211 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords blocklayout block layout sap.ui.layout blocklayoutlinktitle simpleform label slider segmentedbutton segmentedbuttonitem messagestrip verticallayout
" @summary The BlockLayout Cells can have links as titles. The link text overwrites the title text.
CLASS z2ui5_cl_smpc_app_223 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA slidervalue TYPE i.
DATA selectedbackground TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_223 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_init( ).
slidervalue = 100.
selectedbackground = `Default`.
view_display( ).
ELSEIF 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` v = `sap.m`
)->a( n = `xmlns:l` v = `sap.ui.layout`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `editable` v = `true`
)->a( n = `backgroundDesign` v = `Transparent`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `Parent width`
)->tag( `Slider`
)->a( n = `id` v = `widthSlider`
)->a( n = `value` v = client->_bind( slidervalue )
)->tag( `Label`
)->a( n = `id` v = `backgroundLabel`
)->a( n = `text` v = `Background`
)->ele( `SegmentedButton`
)->a( n = `selectedKey` v = client->_bind( selectedbackground )
)->a( n = `ariaDescribedBy` v = `backgroundLabel`
)->a( n = `ariaLabelledBy` v = `backgroundLabel`
)->ele( `items`
)->tag( `SegmentedButtonItem`
)->a( n = `key` v = `Default`
)->a( n = `text` v = `Default`
)->tag( `SegmentedButtonItem`
)->a( n = `key` v = `Light`
)->a( n = `text` v = `Light`
)->tag( `SegmentedButtonItem`
)->a( n = `key` v = `Dashboard`
)->a( n = `text` v = `Dashboard`
)->end(
)->end(
)->end(
)->tag( `MessageStrip`
)->a( n = `type` v = `Warning`
)->a( n = `text` v = `Note: Usage of Disabled, Emphasized or Subtle links as titles is not recommended. ` &&
`Dark background designs, for example Accent, are not fully supported with regards to Accessibility when used with links as titles.`
)->a( n = `class` v = `sapUiSmallMarginBeginEnd sapUiSmallMarginTop`
)->ele( n = `VerticalLayout` ns = `l`
)->a( n = `id` v = `containerLayout`
)->a( n = `width` v = |\{= ${ client->_bind( slidervalue ) } + '%' \}|
)->ele( n = `BlockLayout` ns = `l`
)->a( n = `id` v = `BlockLayout`
)->a( n = `background` v = client->_bind( selectedbackground )
)->ele( n = `BlockLayoutRow` ns = `l`
)->a( n = `accentCells` v = `Accent1`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `Accent1`
)->a( n = `width` v = `2`
)->a( n = `title` v = `Left aligned heading`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->ele( n = `titleLink` ns = `l`
)->tag( `Link`
)->a( n = `text` v = `This is a title link`
)->a( n = `href` v = `https://sdk.openui5.org/`
)->end(
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `This is just a title`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `titleAlignment` v = `End`
)->a( n = `title` v = `End aligned heading`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.`
)->ele( n = `titleLink` ns = `l`
)->tag( `Link`
)->a( n = `text` v = `This is a title link - wrapping true`
)->a( n = `href` v = `https://sdk.openui5.org/`
)->a( n = `wrapping` v = `true`
)->end(
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `This is just a title`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `25% width cell`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->ele( n = `titleLink` ns = `l`
)->tag( `Link`
)->a( n = `text` v = `This is a title link`
)->a( n = `href` v = `https://sdk.openui5.org/`
)->end(
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `25% width cell`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->ele( n = `titleLink` ns = `l`
)->tag( `Link`
)->a( n = `text` v = `This is a title link - open in new window`
)->a( n = `href` v = `https://sdk.openui5.org/`
)->a( n = `target` v = `_blank`
)->end(
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `25% width cell`
)->tag( `Text`
)->a( n = `text` v = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ` &&
`At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. ` &&
`Lorem ipsum dolor sit amet, consetetur sadipscing elitr.`
)->ele( n = `titleLink` ns = `l`
)->tag( `Link`
)->a( n = `text` v = `This is a title link - wrapping true`
)->a( n = `href` v = `https://sdk.openui5.org/`
)->a( n = `wrapping` v = `true`
)->end(
)->end(
)->end(
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.ui.layout
- Fullscreen – with toolbar — A SimpleForm that uses Toolbars as Form header and FormContainer headers.
- Responsive Splitter — ResponsiveSplitter is used to visually divide the content of its parent. It consists of P…
- Grid - Info Layout — You can use the Grid control to make responsive table-free layouts; here we are using a d…
- Block Layout — The BlockLayout is intended to be used with rows and cells. The cells have predefined wid…
- Fix Flex - Vertical Direction with minFlexSize — Shows a FixFlex control where the minFlexSize is set to 400px.
- Fix Flex - Horizontal Direction — Shows a FixFlex control with a horizontal layout.
- Grid - Features Demo — The major layout features of the Grid control are shown in this example. Features like in…
- Nested Splitter Layouts - 7 Areas — Nested Splitter example with 7 content areas
- Dynamic Side Content - equal split mode — The side content and the main content take 50%/50% of the container on all screen sizes e…
- Dynamic Side Content - product page — Product page with comments example.
- Nested Example — CSSGrid example nested grids.
- Responsiveness — Example of setting customLayout for different layout (screen) sizes.
On this page