Samples / Controls / sap.ui.layout
Splitscreen – one group
Form with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).
- Class
z2ui5_cl_smpc_app_315- Repository
- abap2UI5/samples-controls
- Ports
sap.ui.layout.sample.Form471- 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.List, sap.m.Page, sap.m.Select, sap.m.SplitContainer, sap.m.StandardListItem, sap.m.Text, sap.m.VBox, sap.ui.core.Item, sap.ui.core.Title, sap.ui.core.mvc.View, sap.ui.layout.GridData, sap.ui.layout.form.Form, sap.ui.layout.form.FormContainer, sap.ui.layout.form.FormElement, sap.ui.layout.form.ResponsiveGridLayout
The class
" @keywords form sap.ui.layout.form form471 splitcontainer bar button vbox title responsivegridlayout formcontainer formelement text
" @summary Form with one single group in a split app with a label field ratio of 4:7:1 in all sizes besides size S (12:12:0).
" @origin sap.ui.layout.sample.Form471 - https://sdk.openui5.org/entity/sap.ui.layout.form.Form/sample/sap.ui.layout.sample.Form471 (status: reviewed - read against the original, not run)
CLASS z2ui5_cl_smpc_app_315 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.
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.
METHODS view_display.
METHODS on_event.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_315 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( `SplitContainer`
)->a( n = `id` v = `FormSplitscreen`
)->a( n = `initialDetail` v = `page`
)->a( n = `initialMaster` v = `master`
)->ele( `detailPages`
)->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`
)->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 = `FormDisplay471`
)->a( n = `editable` v = `false`
)->ele( n = `title` ns = `form`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Address`
)->end(
)->ele( n = `layout` ns = `form`
)->tag( n = `ResponsiveGridLayout` ns = `form`
)->a( n = `labelSpanXL` v = `4`
)->a( n = `labelSpanL` v = `4`
)->a( n = `labelSpanM` v = `4`
)->a( n = `labelSpanS` v = `12`
)->a( n = `adjustLabelSpan` v = `false`
)->a( n = `emptySpanXL` v = `1`
)->a( n = `emptySpanL` v = `1`
)->a( n = `emptySpanM` v = `1`
)->a( n = `emptySpanS` v = `0`
)->a( n = `columnsXL` v = `1`
)->a( n = `columnsL` v = `1`
)->a( n = `columnsM` v = `1`
)->a( n = `singleContainerFullSize` v = `false`
)->end(
)->ele( n = `formContainers` ns = `form`
)->ele( n = `FormContainer` ns = `form`
)->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(
)->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 = `FormChange471`
)->a( n = `editable` v = `true`
)->ele( n = `title` ns = `form`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `Address`
)->end(
)->ele( n = `layout` ns = `form`
)->tag( n = `ResponsiveGridLayout` ns = `form`
)->a( n = `labelSpanXL` v = `4`
)->a( n = `labelSpanL` v = `4`
)->a( n = `labelSpanM` v = `4`
)->a( n = `labelSpanS` v = `12`
)->a( n = `adjustLabelSpan` v = `false`
)->a( n = `emptySpanXL` v = `1`
)->a( n = `emptySpanL` v = `1`
)->a( n = `emptySpanM` v = `1`
)->a( n = `emptySpanS` v = `0`
)->a( n = `columnsXL` v = `1`
)->a( n = `columnsL` v = `1`
)->a( n = `columnsM` v = `1`
)->a( n = `singleContainerFullSize` v = `false`
)->end(
)->ele( n = `formContainers` ns = `form`
)->ele( n = `FormContainer` ns = `form`
)->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 = `GridData` ns = `l`
)->a( n = `span` v = `XL1 L2 M2 S4`
)->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 = `GridData` ns = `l`
)->a( n = `span` v = `XL1 L2 M2 S4`
)->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(
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( `masterPages`
)->ele( `Page`
)->a( n = `id` v = `master`
)->a( n = `title` v = `Master`
)->a( n = `class` v = `sapUiStdPage`
)->ele( `content`
)->ele( `List`
)->ele( `items`
)->tag( `StandardListItem`
)->a( n = `title` v = `Item 1`
)->a( n = `type` v = `Inactive`
)->tag( `StandardListItem`
)->a( n = `title` v = `Item 2`
)->a( n = `type` v = `Inactive` ).
client->view_display( view->stringify( ) ).
" onInit ends with oSplitContainer.toDetail( this.createId('page') ) -
" "to navigate to the page on phone and not show the split screen items".
" initialDetail names the detail page but does not put a PHONE into detail
" mode, so without this a phone opens on the master list where the sample
" opens on the form. toDetail is a listed control method taking a controlId,
" so the wire carries it as-is.
" It sits HERE, at the tail of view_display, and not in the on_init branch of
" main: view_display rebuilds the SplitContainer, so EVERY path that builds
" the view has to re-issue toDetail. check_on_navigated( ) reaches this method
" with check_on_init( ) false - a bookmarked draft restored into an already
" initialized container - and a phone would then re-render on the master list,
" the exact state this call exists to avoid. The invariant is "view built,
" toDetail follows", so the wire belongs to the builder, not to one branch.
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `FormSplitscreen` ) ( `toDetail` ) ( `page` ) ) ).
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.
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.
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`.
ENDMETHOD.
ENDCLASS.