Generic Tag with Different Configurations
Previews of the GenericTag control based on combinations of different sets of properties.
Z2UI5_CL_SMPC_APP_027
Controls
sap.m
UI5 1.97
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_027- Source file
z2ui5_cl_smpc_app_027.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.GenericTag- Demo kit sample
sap.m.sample.GenericTag- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.97
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: generictag, generic, tag, sap.m, displays, app-speci, verticallayout, grid, flexbox, text, objectnumber
Controls it builds
- sap.m.FlexBox
- sap.m.GenericTag
- sap.m.ObjectNumber
- sap.m.Text
- sap.ui.core.mvc.View
- sap.ui.layout.Grid
- 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_027.clas.abap — 204 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords generictag generic tag sap.m displays app-speci verticallayout grid flexbox text objectnumber
" @summary Previews of the GenericTag control based on combinations of different sets of properties.
CLASS z2ui5_cl_smpc_app_027 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_027 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:l` v = `sap.ui.layout`
)->ele( n = `VerticalLayout` ns = `l`
)->a( n = `class` v = `sapUiContentPadding`
)->a( n = `width` v = `100%`
)->ele( n = `Grid` ns = `l`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->a( n = `hSpacing` v = `0`
)->a( n = `vSpacing` v = `0`
)->a( n = `defaultSpan` v = `L4 M6 S12`
)->a( n = `width` v = `100%`
)->ele( `FlexBox`
)->a( n = `class` v = `sapUiTinyMarginBottom`
)->a( n = `direction` v = `Column`
)->a( n = `fitContainer` v = `true`
)->a( n = `alignItems` v = `Start`
)->a( n = `justifyContent` v = `Start`
)->tag( `Text`
)->a( n = `text` v = `Generic Tag - KPI`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->ele( `GenericTag`
)->a( n = `text` v = `Project Cost`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Error`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Error`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `3.5M`
)->a( n = `unit` v = `EUR`
)->end(
)->ele( `GenericTag`
)->a( n = `text` v = `Project Cost`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Warning`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Warning`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `2.4M`
)->a( n = `unit` v = `EUR`
)->end(
)->ele( `GenericTag`
)->a( n = `text` v = `Project Cost`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Success`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Success`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `1.6M`
)->a( n = `unit` v = `EUR`
)->end(
)->ele( `GenericTag`
)->a( n = `text` v = `PC`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Error`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Error`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `35`
)->a( n = `unit` v = `%`
)->end(
)->ele( `GenericTag`
)->a( n = `text` v = `PC`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Warning`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Warning`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `71`
)->a( n = `unit` v = `%`
)->end(
)->ele( `GenericTag`
)->a( n = `text` v = `PC`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Success`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Success`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `96`
)->a( n = `unit` v = `%`
)->end(
)->end(
)->ele( `FlexBox`
)->a( n = `direction` v = `Column`
)->a( n = `fitContainer` v = `true`
)->a( n = `alignItems` v = `Start`
)->a( n = `justifyContent` v = `Start`
)->tag( `Text`
)->a( n = `text` v = `Generic Tag - KPI (error handling)`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `GenericTag`
)->a( n = `text` v = `Project Cost`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Error`
)->a( n = `valueState` v = `Error`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->end(
)->ele( `FlexBox`
)->a( n = `direction` v = `Column`
)->a( n = `fitContainer` v = `true`
)->a( n = `alignItems` v = `Start`
)->a( n = `justifyContent` v = `Start`
)->tag( `Text`
)->a( n = `text` v = `Generic Tag - Situation`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `GenericTag`
)->a( n = `text` v = `Shortage Expected`
)->a( n = `status` v = `Warning`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `GenericTag`
)->a( n = `text` v = `Material Shortage`
)->a( n = `status` v = `Warning`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->end(
)->ele( `FlexBox`
)->a( n = `direction` v = `Column`
)->a( n = `fitContainer` v = `true`
)->a( n = `alignItems` v = `Start`
)->a( n = `justifyContent` v = `Start`
)->tag( `Text`
)->a( n = `text` v = `Generic Tag with label`
)->a( n = `id` v = `genericTagLabel`
)->a( n = `class` v = `sapUiSmallMarginBottom`
" ariaLabelledBy (since UI5 1.97) kept for the 1:1 port
)->ele( `GenericTag`
)->a( n = `ariaLabelledBy` v = `genericTagLabel`
)->a( n = `text` v = `Project Cost`
)->a( n = `design` v = `StatusIconHidden`
)->a( n = `status` v = `Error`
)->a( n = `class` v = `sapUiSmallMarginBottom`
)->tag( `ObjectNumber`
)->a( n = `state` v = `Error`
)->a( n = `emphasized` v = `false`
)->a( n = `number` v = `3.5M`
)->a( n = `unit` v = `EUR` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.More in sap.m
- Draft Indicator — The Draft Indicator shows that eighter currently a draft is saving or that it is already…
- Facet Filter - Light — This is a 'Light' version of the Facet Filter. It is for small displays where only a sele…
- Feed Content — Shows the tile containing the text of the feed, a subheader, and a numeric value.
- Feed — This sample shows you how to build a complete feed user interface by combining a FeedInpu…
- Feed List Item — The Feed List Item provides a standard UI for 'feeds' where multiple users publish inform…
- Flex Box - Nested — Flex Boxes can be nested. Remember also that HBox and VBox are 'convenience' controls bas…
- KPI Tile — Shows KPI Tile samples that can contain header, subheader, key value, trend, scale, unit…
- Header Container - Horizontal Mode — The Header Container with horizontal layout. It provides horizontal scrolling on mobile d…
- Icon Tab Bar - Stretch Content Height — In this example, the IconTabBar height is stretched to the maximum height of the page con…
- Image with ImageMode.Background — Visualizes the state of the control when the mode property is set to ImageMode.Background.
- Input - Value States — This example shows different input value states.
- Link - Emphasized — Usually you use an Object Identifier in the first column of a table. But if you need an a…
On this page