Fullscreen – two groups using ColumnLayout with up to 4 columns
Form with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).
Z2UI5_CL_SMPC_APP_324
Controls
sap.ui.layout
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_324- Source file
z2ui5_cl_smpc_app_324.clas.abap↗- Library
- sap.ui.layout
- UI5 entity
sap.ui.layout.form.Form- Demo kit sample
sap.ui.layout.sample.Form_Column_twoGroups234- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: form, sap.ui.layout.form, form_column_twogroups234, bar, button, vbox, title, columnlayout, formcontainer, formelement, text, link
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
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_324.clas.abap — 520 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords form sap.ui.layout.form form_column_twogroups234 bar button vbox title columnlayout formcontainer formelement text link
" @summary Form with two groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 columns in XL size).
CLASS z2ui5_cl_smpc_app_324 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.
" handleEditPress clones the record so Cancel can restore it - the clone is
" not bound, so it stays out of the round-trip model scan
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_324 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( ).
" _showFormFragment swaps the Page content between the Display and the Change
" fragment; both are inlined here and switched by one bound flag instead
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:f` 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`
" the original enables Edit once the mock request completes;
" the ABAP model is seeded synchronously, so it starts enabled
)->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 = `f`
)->a( n = `id` v = `FormDisplayColumn_twoGroups234`
)->a( n = `editable` v = `false`
)->ele( n = `title` ns = `f`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Supplier`
)->end(
)->ele( n = `layout` ns = `f`
)->tag( n = `ColumnLayout` ns = `f`
)->a( n = `columnsM` v = `2`
)->a( n = `columnsL` v = `3`
)->a( n = `columnsXL` v = `4`
)->end(
)->ele( n = `formContainers` ns = `f`
)->ele( n = `FormContainer` ns = `f`
)->a( n = `title` v = `Address`
)->ele( n = `formElements` ns = `f`
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Name`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( suppliername )
)->a( n = `id` v = `nameText`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Street`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = |{ client->_bind( street ) } { client->_bind( housenumber ) }|
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `ZIP Code/City`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = |{ client->_bind( zipcode ) } { client->_bind( city ) }|
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Country`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( country )
)->a( n = `id` v = `countryText`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Web`
)->ele( n = `fields` ns = `f`
)->tag( `Link`
)->a( n = `text` v = `Url`
)->a( n = `href` v = client->_bind( url )
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `f`
)->a( n = `title` v = `Contact`
)->ele( n = `formElements` ns = `f`
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Twitter`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( twitter )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Email`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( email )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Tel.`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( tel )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `SMS`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( sms )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Mobile`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( mobile )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Pager`
)->ele( n = `fields` ns = `f`
)->tag( `Text`
)->a( n = `text` v = client->_bind( pager )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Fax`
)->ele( n = `fields` ns = `f`
)->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 = `f`
)->a( n = `id` v = `FormChangeColumn_twoGroups234`
)->a( n = `editable` v = `true`
)->ele( n = `title` ns = `f`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Supplier`
)->end(
)->ele( n = `layout` ns = `f`
)->tag( n = `ColumnLayout` ns = `f`
)->a( n = `columnsM` v = `2`
)->a( n = `columnsL` v = `3`
)->a( n = `columnsXL` v = `4`
)->end(
)->ele( n = `formContainers` ns = `f`
)->ele( n = `FormContainer` ns = `f`
)->a( n = `title` v = `Address`
)->ele( n = `formElements` ns = `f`
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Name`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( suppliername )
)->a( n = `id` v = `name`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Street`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( street )
)->ele( `Input`
)->a( n = `value` v = client->_bind( housenumber )
)->ele( `layoutData`
)->tag( n = `ColumnElementData` ns = `f`
)->a( n = `cellsSmall` v = `2`
)->a( n = `cellsLarge` v = `1`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `ZIP Code/City`
)->ele( n = `fields` ns = `f`
)->ele( `Input`
)->a( n = `value` v = client->_bind( zipcode )
)->ele( `layoutData`
)->tag( n = `ColumnElementData` ns = `f`
)->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 = `f`
)->a( n = `label` v = `Country`
)->ele( n = `fields` ns = `f`
)->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 = `f`
)->a( n = `label` v = `Web`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( url )
)->a( n = `type` v = `Url`
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `f`
)->a( n = `title` v = `Contact`
)->ele( n = `formElements` ns = `f`
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Twitter`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( twitter )
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Email`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( email )
)->a( n = `type` v = `Email`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Tel.`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( tel )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `SMS`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( sms )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Mobile`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( mobile )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Pager`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( pager )
)->a( n = `type` v = `Tel`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Fax`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( fax )
)->a( n = `type` v = `Tel` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `EDIT`.
" handleEditPress: clone the record, then show the Change form and the
" Save/Cancel buttons
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`.
" handleSavePress: keep the edited values, back to the Display form
edit_mode = abap_false.
WHEN `CANCEL`.
" handleCancelPress: restore the cloned record, back to the Display form
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 original binds /SupplierCollection/0 of the shared demo supplier.json;
" flattened here to top-level fields the form binds absolutely
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.More in sap.ui.layout
- Fullscreen – two columns of size M — Form with two groups, gets a two-column layout whenever possible.
- Fullscreen – three groups (horizontal) — Form with three groups in a three-column layout. On extra large screens a three-column la…
- Fullscreen – one group using ColumnLayout — Form with one single group in a fullscreen app using the ColumnLayout control with defaul…
- Fullscreen – one group using ColumnLayout with up to 4 columns — Form with one large single group in a fullscreen app (with 2 columns in M, 3 columns in L…
- Fullscreen – three groups using ColumnLayout with up to 4 columns — Form with three groups in a fullscreen app (with 2 columns in M, 3 columns in L, and 4 co…
- 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 co…
- Fullscreen – one group — Form with one single group in a fullscreen app with a label field ratio of 3:5:4 in all s…
- Fullscreen – one group with long labels — Form with one single group in a fullscreen app for long labels and fields, so some more s…
- Fullscreen – two groups (horizontal) — Form with two groups with long labels and fields in a fullscreen app.
- Splitscreen – one group — Form with one single group in a split app with a label field ratio of 4:7:1 in all sizes…
- Fullscreen – address form with edit switch — The same fullscreen address form built with SimpleForm: Edit / Save / Cancel in the page…
- Fullscreen – two groups (vertical) — Form with two groups. On large screens a two-column layout (4:8:0) is used; on medium scr…
On this page