Custom Message Strip Design
Demonstrates MessageStrips with different colorSet and colorScheme properties.
Z2UI5_CL_SMPC_APP_452
Controls
sap.m
UI5 1.143
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_452- Source file
z2ui5_cl_smpc_app_452.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.MessageStrip- Demo kit sample
sap.m.sample.CustomMessageStripDesign- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.143
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: messagestrip, message, strip, sap.m, custommessagestripdesign, verticallayout, panel, horizontallayout, label, select, item
Controls it builds
- sap.m.Label
- sap.m.MessageStrip
- sap.m.Panel
- sap.m.Select
- sap.ui.core.Item
- 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_452.clas.abap — 184 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords messagestrip message strip sap.m custommessagestripdesign verticallayout panel horizontallayout label select item
" @summary Demonstrates MessageStrips with different colorSet and colorScheme properties.
CLASS z2ui5_cl_smpc_app_452 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA color_set TYPE string VALUE `1`.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_452 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
" _updateDesignForColorSet writes ColorSet1 / ColorSet2 onto all ten strips -
" one expression binding over the two-way bound Select key does the same
DATA(color_set_expr) = |\{= ${ client->_bind( color_set ) } === '1' ? 'ColorSet1' : 'ColorSet2' \}|.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->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` v = `sap.m`
)->ele( n = `VerticalLayout` ns = `l`
)->a( n = `class` v = `sapUiContentPadding`
)->a( n = `id` v = `oVerticalContent`
)->a( n = `width` v = `100%`
)->ele( n = `content` ns = `l`
)->ele( `Panel`
)->a( n = `headerText` v = `ColorSet Configuration`
)->a( n = `class` v = `sapUiMediumMarginBottom`
)->ele( `content`
)->ele( n = `HorizontalLayout` ns = `l`
)->ele( n = `content` ns = `l`
)->tag( `Label`
)->a( n = `text` v = `ColorSet:`
)->a( n = `class` v = `sapUiSmallMarginEnd sapUiSmallMarginTop`
)->ele( `Select`
)->a( n = `id` v = `colorSetSelect`
)->a( n = `class` v = `sapUiMediumMarginEnd`
)->a( n = `selectedKey` v = client->_bind( color_set )
)->ele( `items`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `1`
)->a( n = `text` v = `ColorSet 1`
)->tag( n = `Item` ns = `core`
)->a( n = `key` v = `2`
)->a( n = `text` v = `ColorSet 2`
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( `Panel`
)->a( n = `headerText` v = `All Color Schemes (1-10)`
)->a( n = `class` v = `sapUiMediumMarginBottom`
)->ele( `content`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme1`
)->a( n = `text` v = `Color Scheme 1 - Information message`
)->a( n = `type` v = `Information`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `1`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme2`
)->a( n = `text` v = `Color Scheme 2 - Success message`
)->a( n = `type` v = `Success`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `2`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme3`
)->a( n = `text` v = `Color Scheme 3 - Warning message`
)->a( n = `type` v = `Warning`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `3`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme4`
)->a( n = `text` v = `Color Scheme 4 - Error message`
)->a( n = `type` v = `Error`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `4`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme5`
)->a( n = `text` v = `Color Scheme 5 - Information message`
)->a( n = `type` v = `Information`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `5`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme6`
)->a( n = `text` v = `Color Scheme 6 - Success message`
)->a( n = `type` v = `Success`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `6`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme7`
)->a( n = `text` v = `Color Scheme 7 - Warning message`
)->a( n = `type` v = `Warning`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `7`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme8`
)->a( n = `text` v = `Color Scheme 8 - Error message`
)->a( n = `type` v = `Error`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `8`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme9`
)->a( n = `text` v = `Color Scheme 9 - Information message`
)->a( n = `type` v = `Information`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `9`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `MessageStrip`
)->a( n = `id` v = `messageStrip_scheme10`
)->a( n = `text` v = `Color Scheme 10 - Success message`
)->a( n = `type` v = `Success`
)->a( n = `colorSet` v = color_set_expr
)->a( n = `colorScheme` v = `10`
)->a( n = `showIcon` v = `true`
)->a( n = `showCloseButton` v = `true`
)->a( n = `class` v = `sapUiSmallMarginBottom`
).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.m
- Notification List Group with max number of notifications reached — Notification List Group with max number of notifications reached. The group will render t…
- Text - Hyphenation — The Text control has a property allowing hyphenation.
- Link - Subtle — Subtle links should be used to indicate less important links in tables with a large numbe…
- Message Box Details — MessageBox with the option to display detailed information.
- Semantic Page using Draft Indicator — Integration of Draft Indicator inside Semantic Page
- Tab Container - with icons and additional text — This example shows how you can add additional text and an Icon to the tabs in TabContaine…
- Object Header Responsive I — This is a responsive Object Header with a Title, 2 Statuses/Attributes rendered next to t…
- Table Select Dialog Growing — Table Select Dialog can be created with property growing set to true or false.
- ComboBox - Clear Icon — The combo box control can show 'clear' icon, which when pressed will remove the user's in…
- Input - Assisted Two Values — This example shows how to easily implement an assisted input with two-value suggestions.
- MultiInput Data Binding — MultiInput data binding allows data to be bound to tokens in MultiInput.
- MultiComboBox - Two columns layout — Use the dropdown list with two columns layout if you need to display additional informati…
On this page