Samples / Controls / sap.ui.layout
Fullscreen – three groups using ColumnLayout with up to 6 columns
Form with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).
- Class
z2ui5_cl_smpc_app_323- Repository
- abap2UI5/samples-controls
- Ports
sap.ui.layout.sample.Form_Column_threeGroups346- UI5 libraries
- sap.m, sap.ui.core, sap.ui.layout
- Lowest UI5 release
- 1.71
- In the browser
- Runs in the playground
- Controls it builds
- sap.m.Bar, sap.m.Button, sap.m.Input, sap.m.Link, sap.m.Page, sap.m.Select, sap.m.Text, sap.m.VBox, sap.ui.core.Item, sap.ui.core.Title, sap.ui.core.mvc.View, sap.ui.layout.form.ColumnElementData, sap.ui.layout.form.ColumnLayout, sap.ui.layout.form.Form, sap.ui.layout.form.FormContainer, sap.ui.layout.form.FormElement
The class
" @keywords form sap.ui.layout.form form_column_threegroups346 bar button vbox title columnlayout formcontainer formelement text link
" @summary Form with three groups in a fullscreen app (with 3 columns in M, 4 columns in L, and 6 columns in XL size).
" @origin sap.ui.layout.sample.Form_Column_threeGroups346 - https://sdk.openui5.org/entity/sap.ui.layout.form.Form/sample/sap.ui.layout.sample.Form_Column_threeGroups346 (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_323 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA edit_mode TYPE abap_bool.
DATA suppliername TYPE string.
DATA street TYPE string.
DATA housenumber TYPE string.
DATA zipcode TYPE string.
DATA city TYPE string.
DATA country TYPE string.
DATA url TYPE string.
DATA twitter TYPE string.
DATA tel TYPE string.
DATA sms TYPE string.
DATA mobile TYPE string.
DATA pager TYPE string.
DATA fax TYPE string.
DATA email TYPE string.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
" the record clone Page.controller.js keeps for Cancel - see the sidecar
DATA backup_suppliername TYPE string.
DATA backup_street TYPE string.
DATA backup_housenumber TYPE string.
DATA backup_zipcode TYPE string.
DATA backup_city TYPE string.
DATA backup_country TYPE string.
DATA backup_url TYPE string.
DATA backup_twitter TYPE string.
DATA backup_tel TYPE string.
DATA backup_sms TYPE string.
DATA backup_mobile TYPE string.
DATA backup_pager TYPE string.
DATA backup_fax TYPE string.
DATA backup_email TYPE string.
METHODS view_display.
METHODS on_event.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_323 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( ).
" both fragments Page.controller.js swaps in and out, inlined - see the sidecar
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:l` v = `sap.ui.layout`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->ele( `Page`
)->a( n = `id` v = `page`
)->a( n = `showHeader` v = `true`
)->ele( `customHeader`
)->ele( `Bar`
)->ele( `contentRight`
)->tag( `Button`
)->a( n = `id` v = `edit`
)->a( n = `text` v = `Edit`
" enabled from the start (Page.controller.js waits for the mock request) - see the sidecar
)->a( n = `enabled` v = `true`
)->a( n = `visible` v = |\{= !${ client->_bind( edit_mode ) }\}|
)->a( n = `press` v = client->_event( `EDIT` )
)->tag( `Button`
)->a( n = `id` v = `save`
)->a( n = `text` v = `Save`
)->a( n = `type` v = `Emphasized`
)->a( n = `visible` v = client->_bind( edit_mode )
)->a( n = `press` v = client->_event( `SAVE` )
)->tag( `Button`
)->a( n = `id` v = `cancel`
)->a( n = `text` v = `Cancel`
)->a( n = `visible` v = client->_bind( edit_mode )
)->a( n = `press` v = client->_event( `CANCEL` )
)->end(
)->end(
)->end(
)->ele( `content`
" Display.fragment.xml
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->a( n = `visible` v = |\{= !${ client->_bind( edit_mode ) }\}|
)->ele( n = `Form` ns = `form`
)->a( n = `id` v = `FormDisplayColumn_threeGroups346`
)->a( n = `editable` v = `false`
)->ele( n = `title` ns = `form`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Supplier`
)->end(
)->ele( n = `layout` ns = `form`
)->tag( n = `ColumnLayout` ns = `form`
)->a( n = `columnsM` v = `3`
)->a( n = `columnsL` v = `4`
)->a( n = `columnsXL` v = `6`
)->end(
)->ele( n = `formContainers` ns = `form`
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Address`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Name`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( suppliername )
)->a( n = `id` v = `nameText`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Street`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = |{ client->_bind( street ) } { client->_bind( housenumber ) }|
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `ZIP Code/City`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = |{ client->_bind( zipcode ) } { client->_bind( city ) }|
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Country`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( country )
)->a( n = `id` v = `countryText`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Web`
)->ele( n = `fields` ns = `form`
)->tag( `Link`
)->a( n = `text` v = `Url`
)->a( n = `href` v = client->_bind( url )
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Contact`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Twitter`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( twitter )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Email`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( email )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Tel.`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( tel )
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Other`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `SMS`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( sms )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Mobile`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( mobile )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Pager`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( pager )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Fax`
)->ele( n = `fields` ns = `form`
)->tag( `Text`
)->a( n = `text` v = client->_bind( fax )
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
" Change.fragment.xml
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->a( n = `visible` v = client->_bind( edit_mode )
)->ele( n = `Form` ns = `form`
)->a( n = `id` v = `FormChangeColumn_threeGroups346`
)->a( n = `editable` v = `true`
)->ele( n = `title` ns = `form`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Supplier`
)->end(
)->ele( n = `layout` ns = `form`
)->tag( n = `ColumnLayout` ns = `form`
)->a( n = `columnsM` v = `3`
)->a( n = `columnsL` v = `4`
)->a( n = `columnsXL` v = `6`
)->end(
)->ele( n = `formContainers` ns = `form`
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Address`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Name`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( suppliername )
)->a( n = `id` v = `name`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Street`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( street )
)->ele( `Input`
)->a( n = `value` v = client->_bind( housenumber )
)->ele( `layoutData`
)->tag( n = `ColumnElementData` ns = `form`
)->a( n = `cellsSmall` v = `2`
)->a( n = `cellsLarge` v = `1`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `ZIP Code/City`
)->ele( n = `fields` ns = `form`
)->ele( `Input`
)->a( n = `value` v = client->_bind( zipcode )
)->ele( `layoutData`
)->tag( n = `ColumnElementData` ns = `form`
)->a( n = `cellsSmall` v = `3`
)->a( n = `cellsLarge` v = `2`
)->end(
)->end(
)->tag( `Input`
)->a( n = `value` v = client->_bind( city )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Country`
)->ele( n = `fields` ns = `form`
)->ele( `Select`
)->a( n = `id` v = `country`
)->a( n = `selectedKey` v = client->_bind( country )
)->ele( `items`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `England`
)->a( n = `key` v = `England`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `Germany`
)->a( n = `key` v = `Germany`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `USA`
)->a( n = `key` v = `USA`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Web`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( url )
)->a( n = `type` v = `Url`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Contact`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Twitter`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( twitter )
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Email`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( email )
)->a( n = `type` v = `Email`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Tel.`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( tel )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `form`
)->a( n = `title` v = `Other`
)->ele( n = `formElements` ns = `form`
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `SMS`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( sms )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Mobile`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( mobile )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Pager`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( pager )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `form`
)->a( n = `label` v = `Fax`
)->ele( n = `fields` ns = `form`
)->tag( `Input`
)->a( n = `value` v = client->_bind( fax )
)->a( n = `type` v = `Tel` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
" the Edit/Save/Cancel handlers of Page.controller.js - see the sidecar
CASE client->get_event( ).
WHEN `EDIT`.
backup_suppliername = suppliername.
backup_street = street.
backup_housenumber = housenumber.
backup_zipcode = zipcode.
backup_city = city.
backup_country = country.
backup_url = url.
backup_twitter = twitter.
backup_tel = tel.
backup_sms = sms.
backup_mobile = mobile.
backup_pager = pager.
backup_fax = fax.
backup_email = email.
edit_mode = abap_true.
WHEN `SAVE`.
edit_mode = abap_false.
WHEN `CANCEL`.
suppliername = backup_suppliername.
street = backup_street.
housenumber = backup_housenumber.
zipcode = backup_zipcode.
city = backup_city.
country = backup_country.
url = backup_url.
twitter = backup_twitter.
tel = backup_tel.
sms = backup_sms.
mobile = backup_mobile.
pager = backup_pager.
fax = backup_fax.
email = backup_email.
edit_mode = abap_false.
ENDCASE.
ENDMETHOD.
METHOD model_init.
" the row 0 Page.controller.js element-binds, flattened - see the sidecar
suppliername = `Red Point Stores`.
street = `Main St`.
housenumber = `1618`.
zipcode = `31415`.
city = `Maintown`.
country = `Germany`.
url = `http://www.sap.com`.
twitter = `@sap`.
tel = `+49 6227 747474`.
sms = `+49 173 123456`.
mobile = `+49 173 123456`.
pager = `+49 173 123456`.
fax = `+49 123 456789`.
email = `john.smith@sap.com`.
ENDMETHOD.
ENDCLASS.