Expandable Text
The ExpandableText control can be used to display a larger texts inside a table, list or form.
Z2UI5_CL_SMPC_APP_643
Controls
sap.m
UI5 1.87
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_643- Source file
z2ui5_cl_smpc_app_643.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.ExpandableText- Demo kit sample
sap.m.sample.ExpandableText- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.87
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: expandabletext, expandable, text, sap.m, table, column, columnlistitem
Controls it builds
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_643.clas.abap — 113 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords expandabletext expandable text sap.m table column columnlistitem
" @summary The ExpandableText control can be used to display a larger texts inside a table, list or form.
" @origin sap.m.sample.ExpandableText - https://sdk.openui5.org/entity/sap.m.ExpandableText/sample/sap.m.sample.ExpandableText (status: generated - machine-written, not yet reviewed)
CLASS z2ui5_cl_smpc_app_643 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES:
BEGIN OF ty_s_product,
name TYPE string,
attribute1 TYPE string,
attribute2 TYPE string,
status TYPE string,
overflowmode TYPE string,
END OF ty_s_product.
DATA t_products TYPE STANDARD TABLE OF ty_s_product WITH EMPTY KEY.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_643 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( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->ele( `Table`
)->a( n = `mode` v = `MultiSelect`
)->a( n = `items` v = client->_bind( t_products )
)->a( n = `autoPopinMode` v = `true`
)->ele( `columns`
)->ele( `Column`
)->tag( `Text`
)->a( n = `text` v = `Product`
)->end(
)->ele( `Column`
)->tag( `Text`
)->a( n = `text` v = `Attribute 1`
)->end(
)->ele( `Column`
)->tag( `Text`
)->a( n = `text` v = `Attribute 2`
)->end(
)->ele( `Column`
)->tag( `Text`
)->a( n = `text` v = `Status`
)->end(
)->end(
)->ele( `items`
)->ele( `ColumnListItem`
)->ele( `cells`
)->tag( `Text`
)->a( n = `text` v = `{NAME}`
)->tag( `ExpandableText`
)->a( n = `class` v = `sapUiTinyMarginBottom sapUiTinyMarginTop`
)->a( n = `text` v = `{ATTRIBUTE1}`
)->a( n = `overflowMode` v = `{OVERFLOWMODE}`
)->tag( `Text`
)->a( n = `text` v = `{ATTRIBUTE2}`
)->tag( `Text`
)->a( n = `text` v = `{STATUS}` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD model_init.
DATA(lorem) = `Lorem ipsum dolor sit amet, 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.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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr`.
t_products = VALUE #(
( name = `Product 1` attribute1 = |The full text is displayed in place. { lorem }| attribute2 = `Attribute related to label` status = `Some status` overflowmode = `InPlace` )
( name = `Product 2` attribute1 = |The full text is displayed in a popover. { lorem }| attribute2 = `Attribute related to label` status = `Some status` overflowmode = `Popover` )
( name = `Product 3` attribute1 = |The full text is displayed in place. { lorem }| attribute2 = `Attribute related to label` status = `Some status` overflowmode = `InPlace` )
( name = `Product 4` attribute1 = |The full text is displayed in a popover. { lorem }| attribute2 = `Attribute related to label` status = `Some status` overflowmode = `Popover` ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Illustrative style illustrations using the 'src' property — The available illustrations are from the default illustration set with the use of the 'sr…
- Illustrated Message Session Timeout — All applications that require user sign-in should employ a mechanism for automating user…
- Dynamic Date Range — The dynamic date range is a control that offers a choice of absolute and relative dates…
- Dynamic Date Range with calendarWeekNumbering — This example shows the Dynamic Date Range control with Middle Eastern calendar week numbe…
- Dynamic Date Range - Open by Another Control — This example shows Dynamic Date Range which is opened by another control.
- Dynamic Date Range with Custom Options — This example shows the Dynamic Date Range control with custom options for interval or dat…
- p13n.Container usage in a Dialog/Popover — Dialog & Popover with a sap.m.P13nContainer as content.
- Personalization for responsive table — Responsive Table using the personalization Engine
- Personalization implementing custom filter controls — Filtering using the personalization Engine
- Personalization for grid list — GridList using the personalization Engine
- Personalization for grid table — Grid Table using the personalization Engine
- Personalization with multiple SelectionControllers — Personalization for Reponsive Table using multiple SelectionControllers
On this page