Dynamic Date Range
The dynamic date range is a control that offers a choice of absolute and relative dates, using different offset from the current date. The list of values offered must be defined by the application.
Z2UI5_CL_SMPC_APP_639
Controls
sap.m
UI5 1.92
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_639- Source file
z2ui5_cl_smpc_app_639.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.DynamicDateRange- Demo kit sample
sap.m.sample.DynamicDateRange- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.92
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: dynamicdaterange, dynamic, date, range, sap.m, table, overflowtoolbar, title, toolbarspacer, label, column, text
Controls it builds
- sap.m.Column
- sap.m.ColumnListItem
- sap.m.DynamicDateRange
- sap.m.Label
- sap.m.ObjectNumber
- sap.m.OverflowToolbar
- sap.m.Table
- sap.m.Text
- sap.m.Title
- sap.m.ToolbarSpacer
- sap.ui.core.mvc.View
- 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_639.clas.abap — 215 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords dynamicdaterange dynamic date range sap.m table overflowtoolbar title toolbarspacer label column text
" @summary The dynamic date range is a control that offers a choice of absolute and relative dates, using different offset from the current date. The list of values offered must be defined by the application.
" @origin sap.m.sample.DynamicDateRange - https://sdk.openui5.org/entity/sap.m.DynamicDateRange/sample/sap.m.sample.DynamicDateRange (status: generated - machine-written, not yet reviewed)
CLASS z2ui5_cl_smpc_app_639 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES:
BEGIN OF ty_s_payment,
transactiontype TYPE string,
perfomdatetime TYPE string,
amount TYPE p LENGTH 8 DECIMALS 2,
currencycode TYPE string,
END OF ty_s_payment.
DATA t_payments TYPE STANDARD TABLE OF ty_s_payment WITH EMPTY KEY.
DATA filterinputwidth TYPE string.
DATA value_state TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS shifted_now
IMPORTING
days TYPE i
months TYPE i
years TYPE i
RETURNING
VALUE(result) TYPE string.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_639 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( ).
ELSEIF client->check_on_event( ).
on_event( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:l` v = `sap.ui.layout`
)->a( n = `xmlns` v = `sap.m`
)->ele( `Table`
)->a( n = `id` v = `payments-table`
)->a( n = `inset` v = `false`
)->a( n = `items` v = client->_bind( t_payments )
)->ele( `headerToolbar`
)->ele( `OverflowToolbar`
)->ele( `content`
)->tag( `Title`
)->a( n = `text` v = `Payments`
)->a( n = `level` v = `H2`
)->tag( `ToolbarSpacer`
)->tag( `Label`
)->a( n = `visible` v = `false`
)->a( n = `text` v = `Transaction date`
)->a( n = `labelFor` v = `dynamic-range`
" the controller's setValueState is the bound valueState; toDates runs on the source control
)->tag( `DynamicDateRange`
)->a( n = `placeholder` v = `Choose date range`
)->a( n = `id` v = `dynamic-range`
)->a( n = `valueState` v = client->_bind( value_state )
)->a( n = `change` v = client->_event(
val = `CHANGE`
t_arg = VALUE #( ( `${$parameters>/valid}` )
( `${$parameters>/value/operator}` )
( `${$parameters>/value} ? ${$source>}.toDates(${$parameters>/value})[0].getJSDate() : ''` )
( `${$parameters>/value} ? (${$source>}.toDates(${$parameters>/value})[1] ? ${$source>}.toDates(${$parameters>/value})[1].getJSDate() : '') : ''` ) ) )
)->a( n = `width` v = client->_bind( filterinputwidth )
)->end(
)->end(
)->end(
)->ele( `infoToolbar`
)->ele( `OverflowToolbar`
)->tag( `Label`
)->a( n = `text` v = `List of payments`
)->end(
)->end(
)->ele( `columns`
)->ele( `Column`
)->tag( `Text`
)->a( n = `text` v = `Transaction date`
)->end(
)->ele( `Column`
)->a( n = `hAlign` v = `Center`
)->tag( `Text`
)->a( n = `text` v = `Transaction type`
)->end(
)->ele( `Column`
)->a( n = `hAlign` v = `End`
)->tag( `Text`
)->a( n = `text` v = `Amount`
)->end(
)->end(
)->ele( `items`
)->ele( `ColumnListItem`
)->ele( `cells`
" the controller's _dateFormatter pattern as a DateTime type over the ISO string
)->tag( `Text`
)->a( n = `text` v = `{ path: 'PERFOMDATETIME', type: 'sap.ui.model.type.DateTime', formatOptions: { pattern: 'MMMM dd YY, hh:mm:ss', source: { pattern: 'yyyy-MM-dd\'T\'HH:mm:ss' } } }`
)->tag( `Text`
)->a( n = `text` v = `{TRANSACTIONTYPE}`
)->tag( `ObjectNumber`
)->a( n = `number` v = `{ parts: [{path: 'AMOUNT'}, {path: 'CURRENCYCODE'}], type: 'sap.ui.model.type.Currency', formatOptions: {showMeasure: false} }`
)->a( n = `unit` v = `{CURRENCYCODE}`
)->end(
)->end(
)->end(
)->end(
)->tag( n = `VerticalLayout` ns = `l`
)->a( n = `id` v = `tableLayout` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
IF client->get_event( ) = `CHANGE`.
IF client->get_event_arg( ) = abap_false.
value_state = `Error`.
RETURN.
ENDIF.
value_state = `None`.
" the controller's _createFilter - an empty value clears the filter
DATA(operator) = SWITCH string( client->get_event_arg( 2 )
WHEN `FROM` OR `FROMDATETIME` THEN `GT`
WHEN `TO` OR `TODATETIME` THEN `LT`
ELSE `BT` ).
client->follow_up_action( val = client->cs_event-binding_call
t_arg = VALUE #( ( `payments-table` )
( `items` )
( `filter` )
( `PERFOMDATETIME` )
( operator )
( client->get_event_arg( 3 ) )
( client->get_event_arg( 4 ) ) ) ).
ENDIF.
ENDMETHOD.
METHOD shifted_now.
" getIcrementedDateFromToday: years and months first, the day offset overflows like JS setDate
DATA(month) = CONV i( sy-datum+4(2) ) - 1 + months.
DATA(year) = CONV i( sy-datum(4) ) + years + month DIV 12.
month = month MOD 12 + 1.
DATA(first) = CONV d( |{ year WIDTH = 4 ALIGN = RIGHT PAD = `0` }{ month WIDTH = 2 ALIGN = RIGHT PAD = `0` }01| ).
DATA(day) = CONV d( first + CONV i( sy-datum+6(2) ) - 1 + days ).
result = |{ day DATE = ISO }T{ sy-uzeit TIME = ISO }|.
ENDMETHOD.
METHOD model_init.
filterinputwidth = COND #( WHEN client->get( )-s_device-system = z2ui5_if_client=>cs_device-system-phone
THEN `auto`
ELSE `300px` ).
value_state = `None`.
t_payments = VALUE #(
( transactiontype = `ATM withdrawal` perfomdatetime = shifted_now( days = -1 months = 0 years = 0 ) amount = `100.00` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -2 months = 0 years = 0 ) amount = `18.00` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -3 months = 0 years = 0 ) amount = `54.05` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -4 months = 0 years = 0 ) amount = `30.00` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -5 months = 0 years = 0 ) amount = `105.50` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -3 months = 0 years = 0 ) amount = `74.35` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -3 months = -1 years = 0 ) amount = `9.50` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -1 months = -1 years = 0 ) amount = `3.90` currencycode = `EUR` )
( transactiontype = `ATM withdrawal` perfomdatetime = shifted_now( days = -5 months = -2 years = 0 ) amount = `200.00` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -4 months = -2 years = 0 ) amount = `153.80` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -9 months = 0 years = 0 ) amount = `5.30` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = -8 months = 0 years = 0 ) amount = `1.60` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = shifted_now( days = 0 months = -1 years = -1 ) amount = `95.60` currencycode = `EUR` )
( transactiontype = `ATM withdrawal` perfomdatetime = shifted_now( days = 0 months = 0 years = 0 ) amount = `400.00` currencycode = `EUR` )
( transactiontype = `ATM withdrawal` perfomdatetime = `2021-06-09T15:15:00` amount = `50.00` currencycode = `EUR` )
( transactiontype = `payment on POS terminal` perfomdatetime = `2021-06-08T10:15:00` amount = `22.34` currencycode = `EUR` ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Illustrated Message in a Dialog — IllustratedMessage as content of sap.m.Dialog.
- Default Illustration Set (sapIllus) — The available illustrations are from the default ('sapIllus') illustration set.
- Illustrated Message in a Page with Configurable Properties (Custom Illustration Set) — The available properties of the IllustratedMessage are configurable in this sample. The a…
- Illustrated Message in a Page with Configurable Properties (TNT Illustration Set) — The available properties of the IllustratedMessage are configurable in this sample. The a…
- 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 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…
- Expandable Text — The ExpandableText control can be used to display a larger texts inside a table, list or…
- 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
On this page