Fullscreen – with toolbar
A form that uses Toolbars as Form header and FormContainer headers.
Z2UI5_CL_SMPC_APP_142
Controls
sap.ui.layout
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_142- Source file
z2ui5_cl_smpc_app_142.clas.abap↗- Library
- sap.ui.layout
- UI5 entity
sap.ui.layout.form.Form- Demo kit sample
sap.ui.layout.sample.FormToolbar- 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, toolbars, vbox, toolbar, title, toolbarspacer, button, responsivegridlayout, formcontainer, formelement, input
Controls it builds
- sap.m.Button
- sap.m.Input
- sap.m.Select
- sap.m.Title
- sap.m.Toolbar
- sap.m.ToolbarSpacer
- sap.m.VBox
- sap.ui.core.Item
- 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
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_142.clas.abap — 226 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords form sap.ui.layout.form toolbars vbox toolbar title toolbarspacer button responsivegridlayout formcontainer formelement input
" @summary A form that uses Toolbars as Form header and FormContainer headers.
CLASS z2ui5_cl_smpc_app_142 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
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.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS model_init.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_142 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( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->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`
)->a( n = `xmlns` v = `sap.m`
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( n = `Form` ns = `f`
)->a( n = `id` v = `FormToolbar`
)->a( n = `editable` v = `true`
)->a( n = `ariaLabelledBy` v = `Title1`
)->ele( n = `toolbar` ns = `f`
)->ele( `Toolbar`
)->a( n = `id` v = `TB1`
)->tag( `Title`
)->a( n = `id` v = `Title1`
)->a( n = `text` v = `Address`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://settings`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://drop-down-list`
)->end(
)->end(
)->ele( n = `layout` ns = `f`
)->tag( n = `ResponsiveGridLayout` ns = `f`
)->a( n = `labelSpanXL` v = `4`
)->a( n = `labelSpanL` v = `3`
)->a( n = `labelSpanM` v = `4`
)->a( n = `labelSpanS` v = `12`
)->a( n = `adjustLabelSpan` v = `false`
)->a( n = `emptySpanXL` v = `0`
)->a( n = `emptySpanL` v = `4`
)->a( n = `emptySpanM` v = `0`
)->a( n = `emptySpanS` v = `0`
)->a( n = `columnsXL` v = `2`
)->a( n = `columnsL` v = `1`
)->a( n = `columnsM` v = `1`
)->a( n = `singleContainerFullSize` v = `false`
)->end(
)->ele( n = `formContainers` ns = `f`
)->ele( n = `FormContainer` ns = `f`
)->a( n = `ariaLabelledBy` v = `Title2`
)->ele( n = `toolbar` ns = `f`
)->ele( `Toolbar`
)->tag( `Title`
)->a( n = `id` v = `Title2`
)->a( n = `text` v = `Office`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://settings`
)->end(
)->end(
)->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 = `GridData` ns = `l`
)->a( n = `span` v = `XL2 L1 M3 S4`
)->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 = `GridData` ns = `l`
)->a( n = `span` v = `XL2 L1 M3 S4`
)->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 = `width` v = `100%`
)->a( n = `id` v = `country`
)->a( n = `selectedKey` v = client->_bind( country )
)->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`
)->tag( n = `Item` ns = `core`
)->a( n = `text` v = `England`
)->a( n = `key` v = `England`
)->end(
)->end(
)->end(
)->end(
)->end(
)->ele( n = `FormContainer` ns = `f`
)->a( n = `ariaLabelledBy` v = `Title3`
)->ele( n = `toolbar` ns = `f`
)->ele( `Toolbar`
)->tag( `Title`
)->a( n = `id` v = `Title3`
)->a( n = `text` v = `Online`
)->tag( `ToolbarSpacer`
)->tag( `Button`
)->a( n = `icon` v = `sap-icon://settings`
)->end(
)->end(
)->ele( n = `formElements` ns = `f`
)->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`
)->a( n = `id` v = `url`
)->end(
)->end(
)->ele( n = `FormElement` ns = `f`
)->a( n = `label` v = `Twitter`
)->ele( n = `fields` ns = `f`
)->tag( `Input`
)->a( n = `value` v = client->_bind( twitter )
)->a( n = `id` v = `twitter` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD model_init.
" original binds /SupplierCollection/0 from the shared demo supplier.json;
" flattened here to top-level fields the {...} form bindings resolve against.
suppliername = `Red Point Stores`.
street = `Main St`.
housenumber = `1618`.
zipcode = `31415`.
city = `Maintown`.
country = `Germany`.
url = `http://www.sap.com`.
twitter = `@sap`.
ENDMETHOD.
ENDCLASS.More in sap.ui.layout
- Fix Flex - Vertical Direction — Shows a FixFlex control with a vertical layout.
- CSSGrid — CSSGrid example for page layout.
- Splitter Layout - 2 areas — Simple splitter example with two content areas
- Dynamic Side Content — Attaches side content area which is next to the main content of the page on larger screen…
- Block Layout with custom background color set for the cells — Block Layout in which all cells use the same background color set and different color sha…
- Controlling Empty Spaces Within the Grid — Example of setting the gridAutoFlow property.
- Horizontal Layout — The Horizontal Layout control is a simple way to align multiple controls horizontally. By…
- Grid - Using GridData — Take advantage of sap.ui.layout.GridData to control the appearance of individual Grid chi…
- Vertical Layout — The Vertical Layout control is a simple way to align multiple controls vertically. If you…
- Fullscreen – with toolbar — A SimpleForm that uses Toolbars as Form header and FormContainer headers.
- Responsive Splitter — ResponsiveSplitter is used to visually divide the content of its parent. It consists of P…
- Grid - Info Layout — You can use the Grid control to make responsive table-free layouts; here we are using a d…
On this page