Formatter
You can format values such as currencies, numerics, or timestamps directly in the frontend using formatter functions.
abap
CLASS z2ui5_cl_demo_app_067 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA amount TYPE p LENGTH 14 DECIMALS 3.
DATA currency TYPE string.
DATA numeric TYPE n length 12.
DATA check_initialized TYPE abap_bool.
PROTECTED SECTION.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_demo_app_067 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
IF check_initialized = abap_false.
check_initialized = abap_true.
numeric = '000000000012'.
amount = '123456789.123'.
currency = `USD`.
ENDIF.
CASE client->get( )-event.
WHEN 'BACK'.
client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
ENDCASE.
DATA(page) = z2ui5_cl_xml_view=>factory( )->shell(
)->page( title = 'abap2UI5 - Currency Format'
navbuttonpress = client->_event( 'BACK' )
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL ) ).
page->simple_form( title = 'Currency'
editable = abap_true
)->content( 'form'
)->title( 'Input'
)->label( 'Documentation'
)->link( text = 'https://sapui5.hana.ondemand.com/#/entity/sap.ui.model.type.Currency'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.ui.model.type.Currency'
)->label( 'One field'
)->input(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' \}|
)->label( 'Two field'
)->input(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' , formatOptions: \{showMeasure: false\} \}|
)->input(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' , formatOptions: \{showNumber: false\} \}|
)->label( 'Default'
)->text(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' \}|
)->label( 'preserveDecimals:false'
)->text( |\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '| && client->_bind_edit(
val = currency
path = abap_true ) &&
|'], type: 'sap.ui.model.type.Currency' , formatOptions: \{ preserveDecimals : false \} \}|
)->label( 'currencyCode:false'
)->text( |\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '| && client->_bind_edit(
val = currency
path = abap_true ) &&
|'], type: 'sap.ui.model.type.Currency' , formatOptions: \{ currencyCode : false \} \}|
)->label( `style:'short'`
)->text(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' , formatOptions: \{ style : 'short' \} \}|
)->label( `style:'long'`
)->text(
|\{ parts: [ '{ client->_bind_edit( val = amount
path = abap_true ) }', '{ client->_bind_edit(
val = currency
path = abap_true ) }'], type: 'sap.ui.model.type.Currency' , formatOptions: \{ style : 'long' \} \}|
)->label( 'event'
)->button( text = 'send'
press = client->_event( 'BUTTON' ) ).
page->simple_form( title = 'No Zeros'
editable = abap_true
)->content( 'form'
)->title( 'Input'
)->label( 'Documentation'
)->link( text = 'https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.model.odata.type.String%23methods/formatValue'
href = 'https://sapui5.hana.ondemand.com/sdk/#/api/sap.ui.model.odata.type.String%23methods/formatValue'
)->label( 'Numeric'
)->input( value = client->_bind_edit( val = numeric )
)->label( `Without leading Zeros`
)->text(
text = |\{path : '{ client->_bind_edit(
val = numeric
path = abap_true ) }', type : 'sap.ui.model.odata.type.String', constraints : \{ isDigitSequence : true \} \}| ).
client->view_display( page->stringify( ) ).
ENDMETHOD.
ENDCLASS.Formatter types like sap.ui.model.type.Currency and sap.ui.model.odata.type.String allow flexible formatting using formatOptions and constraints. You can also check out the sample implementation in class z2ui5_cl_demo_app_067.