Block Layout with custom background color set per cell
Block Layout in which all cells use different background color set and different shade.
Z2UI5_CL_SMPC_APP_343
Controls
sap.ui.layout
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_343- Source file
z2ui5_cl_smpc_app_343.clas.abap↗- Library
- sap.ui.layout
- UI5 entity
sap.ui.layout.BlockLayout- Demo kit sample
sap.ui.layout.sample.BlockLayoutCustomBackgroundPerCell- 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, blocklayoutcustombackgroundpercell, html, blocklayoutrow, blocklayoutcell, vbox, label, select, item
Controls it builds
- sap.m.Input
- sap.m.Label
- sap.m.Select
- sap.m.Text
- sap.m.TextArea
- sap.m.VBox
- sap.ui.core.HTML
- sap.ui.core.Icon
- sap.ui.core.Item
- sap.ui.core.mvc.View
- sap.ui.layout.BlockLayout
- sap.ui.layout.BlockLayoutCell
- sap.ui.layout.BlockLayoutRow
- 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_343.clas.abap — 613 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 blocklayoutcustombackgroundpercell html blocklayoutrow blocklayoutcell vbox label select item
" @summary Block Layout in which all cells use different background color set and different shade.
CLASS z2ui5_cl_smpc_app_343 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
" the controller's _modelData: one record per cell, each bound as the
" cell's own context (binding="{/cellN}") so the two Selects inside the
" cell write straight into it
TYPES:
BEGIN OF ty_s_cell,
colorset TYPE string,
colorshade TYPE string,
END OF ty_s_cell.
DATA cell1 TYPE ty_s_cell.
DATA cell2 TYPE ty_s_cell.
DATA cell3 TYPE ty_s_cell.
DATA cell4 TYPE ty_s_cell.
DATA cell5 TYPE ty_s_cell.
DATA cell6 TYPE ty_s_cell.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_343 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( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
" the sample's six BlockLayoutRows. Each cell carries its OWN context
" (binding="{/cellN}") and the ColorSelect fragment is inlined into every
" one of them - abap2UI5 serves one view, so a core:Fragment reference has
" no file to resolve; the relative {COLORSET}/{COLORSHADE} bindings then
" resolve against the cell's context exactly like in the original.
" resources/sample.css is injected through a core:HTML <style> (CSS braces
" escaped \{ \} so the XMLView parser does not read them as bindings).
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:f` v = `sap.ui.layout.form`
)->tag( n = `HTML` ns = `core`
)->a( n = `content` v = `<style>.customCellImageBackground\{color:#fff;` &&
`background-image:url("https://sdk.openui5.org/test-resources/sap/ui/layout/demokit/sample/BlockLayoutCustomBackgroundPerCell/resources/Night_sky.jpg");` &&
`background-size:100% auto;background-position:0 80%\}` &&
`.customCellImageBackground .sapUiBlockCellContent,` &&
`.customCellImageBackground .sapUiBlockCellContent .sapMText\{color:#fff\}</style>`
)->ele( n = `BlockLayout` ns = `l`
)->a( n = `id` v = `blockLayout`
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-1`
)->a( n = `binding` v = |\{{ client->_bind_path( cell1 ) }\}|
)->a( n = `title` v = `Select Cells' Custom Color`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `title` v = `The Title`
)->a( n = `titleAlignment` v = `Center`
)->a( n = `class` v = `customCellImageBackground`
)->tag( `Text`
)->a( n = `text` v = `Donec bibendum diam nibh, sit amet ornare ante fermentum sed. Ut vulputate justo at orci sollicitudin.`
)->end(
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-2`
)->a( n = `binding` v = |\{{ client->_bind_path( cell2 ) }\}|
)->a( n = `title` v = `An Icon`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->tag( n = `Icon` ns = `core`
)->a( n = `src` v = `sap-icon://add-activity`
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-3`
)->a( n = `binding` v = |\{{ client->_bind_path( cell3 ) }\}|
)->a( n = `title` v = `Simple Form`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->ele( n = `SimpleForm` ns = `f`
)->a( n = `editable` v = `true`
)->a( n = `backgroundDesign` v = `Transparent`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->tag( `Label`
)->a( n = `text` v = `sap.m.Input`
)->tag( `Input`
)->a( n = `type` v = `Text`
)->a( n = `placeholder` v = `Enter Name ...`
)->tag( `Label`
)->a( n = `text` v = `sap.m.TextArea`
)->tag( `TextArea`
)->a( n = `placeholder` v = `Please add your comment...`
)->a( n = `rows` v = `6`
)->a( n = `maxLength` v = `255`
)->a( n = `width` v = `100%`
)->tag( `Label`
)->a( n = `text` v = `sap.m.Text`
)->tag( `Text`
)->a( n = `text` v = `Donec bibendum diam nibh, sit amet ornare ante fermentum sed. Ut vulputate justo at orci sollicitudin, in gravida lectus aliquam. Vivamus tortor lorem, semper et diam ac, faucibus suscipit metus. ` &&
`Curabitur eget aliquet purus, id vestibulum sapien. Cras vitae imperdiet felis. Fusce placerat velit orci, at tempor nisl aliquam laoreet. Aliquam in sapien sit amet tortor laoreet feugiat id ` &&
`in ligula.`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-4`
)->a( n = `binding` v = |\{{ client->_bind_path( cell4 ) }\}|
)->a( n = `title` v = `Right Aligned Title`
)->a( n = `titleAlignment` v = `Right`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->tag( `Text`
)->a( n = `text` v = `Morbi id ullamcorper lorem, vestibulum facilisis velit. Ut elementum aliquam nisl a pretium. Donec auctor mattis convallis. Aenean sodales tortor nec facilisis fringilla. Nam feugiat nulla at diam ` &&
`sollicitudin pretium. Sed at lacus volutpat, finibus arcu ultricies, convallis elit. Aliquam sollicitudin tortor sit amet mi consequat fringilla. Fusce nisl leo, tempor et nulla id, pellentesque ` &&
`suscipit augue. Morbi cursus molestie tellus. Ut volutpat orci interdum, condimentum risus sed, iaculis tellus. Proin nisi eros, tristique nec tortor quis, suscipit sodales dui.`
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-5`
)->a( n = `binding` v = |\{{ client->_bind_path( cell5 ) }\}|
)->a( n = `title` v = `Left Aligned Title`
)->a( n = `titleAlignment` v = `Left`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->tag( `Text`
)->a( n = `text` v = `Morbi id ullamcorper lorem, vestibulum facilisis velit. Ut elementum aliquam nisl a pretium. Donec auctor mattis convallis. Aenean sodales tortor nec facilisis fringilla. Nam feugiat nulla at diam ` &&
`sollicitudin pretium. Sed at lacus volutpat, finibus arcu ultricies, convallis elit. Aliquam sollicitudin tortor sit amet mi consequat fringilla. Fusce nisl leo, tempor et nulla id, pellentesque ` &&
`suscipit augue. Morbi cursus molestie tellus. Ut volutpat orci interdum, condimentum risus sed, iaculis tellus. Proin nisi eros, tristique nec tortor quis, suscipit sodales dui.`
)->end(
)->end(
)->ele( n = `BlockLayoutRow` ns = `l`
)->ele( n = `BlockLayoutCell` ns = `l`
)->a( n = `id` v = `cell-6`
)->a( n = `binding` v = |\{{ client->_bind_path( cell6 ) }\}|
)->a( n = `title` v = `Default Aligned Title`
)->a( n = `backgroundColorSet` v = `{COLORSET}`
)->a( n = `backgroundColorShade` v = `{COLORSHADE}`
)->ele( `VBox`
)->tag( `Label`
)->a( n = `text` v = `Cell Color Set`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSET}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet1`
)->a( n = `text` v = `ColorSet1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet2`
)->a( n = `text` v = `ColorSet2`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet3`
)->a( n = `text` v = `ColorSet3`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet4`
)->a( n = `text` v = `ColorSet4`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet5`
)->a( n = `text` v = `ColorSet5`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet6`
)->a( n = `text` v = `ColorSet6`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet7`
)->a( n = `text` v = `ColorSet7`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet8`
)->a( n = `text` v = `ColorSet8`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet9`
)->a( n = `text` v = `ColorSet9`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet10`
)->a( n = `text` v = `ColorSet10`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ColorSet11`
)->a( n = `text` v = `ColorSet11 (transparent in SAP Horizon theme)`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Cell Color Shade`
)->ele( `Select`
)->a( n = `selectedKey` v = `{COLORSHADE}`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeA`
)->a( n = `text` v = `ShadeA`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeB`
)->a( n = `text` v = `ShadeB`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeC`
)->a( n = `text` v = `ShadeC`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeD`
)->a( n = `text` v = `ShadeD`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeE`
)->a( n = `text` v = `ShadeE (only available for SAP Quartz and Horizon themes)`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `ShadeF`
)->a( n = `text` v = `ShadeF (only available for SAP Quartz and Horizon themes)`
)->end(
)->end(
)->tag( `Text`
)->a( n = `text` v = `Morbi id ullamcorper lorem, vestibulum facilisis velit. Ut elementum aliquam nisl a pretium. Donec auctor mattis convallis. Aenean sodales tortor nec facilisis fringilla. Nam feugiat nulla at diam ` &&
`sollicitudin pretium. Sed at lacus volutpat, finibus arcu ultricies, convallis elit. Aliquam sollicitudin tortor sit amet mi consequat fringilla. Fusce nisl leo, tempor et nulla id, pellentesque ` &&
`suscipit augue. Morbi cursus molestie tellus. Ut volutpat orci interdum, condimentum risus sed, iaculis tellus. Proin nisi eros, tristique nec tortor quis, suscipit sodales dui.`
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD model_init.
" the controller's _modelData verbatim - every cell starts on ColorSet6,
" with shades A..F one per cell
cell1 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeA` ).
cell2 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeB` ).
cell3 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeC` ).
cell4 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeD` ).
cell5 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeE` ).
cell6 = VALUE #( colorset = `ColorSet6` colorshade = `ShadeF` ).
ENDMETHOD.
ENDCLASS.More in sap.ui.layout
- Fullscreen – three groups using ColumnLayout with up to 4 columns — Form with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 co…
- Fullscreen – three groups using ColumnLayout with up to 6 columns — Form with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 co…
- Fullscreen – two groups using ColumnLayout with up to 4 columns — Form with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 colu…
- Fix Flex - Fix container size — Shows a FixFlex control where fixContentSize is set to a specific value(200px) and sap.m…
- Splitter Layout - 2 non-resizable areas — Simple splitter example with two content areas that cannot be resized
- Splitter Layout - 3 areas — Simple splitter example with three content areas
- Dynamic Side Content - position — The side content is positioned on the left side of the main content in left-to-right mode…
- Grid - Own properties — You can see how the different properties of the sap.ui.layout.Grid affect it's final appe…
- Automatic Sizing for Additional Rows and Columns — Example of setting gridAutoRows and gridAutoColumns properties.
- Grid Gap and Layout Data — Example of setting the gridGap property and using of Layout Data.
- Responsive Column Layout — Example of using ResponsiveColumnLayout.
- Configuring Rows and Columns — Example of setting gridTemplateRows and gridTemplateColumns properties.
On this page