abap2UI5 Layout Editor
Lay out a UI5 view by drag and drop and get one ABAP class: an
abap2UI5 app with the view, its data
and its events. Pull the class into your system with abapGit and build on it
like any other class. There is no runtime of the editor's own, no metadata
and no lock-in: the class is all there is.
Open it: https://abap2ui5.github.io/layout-editor/
The editor follows the familiar pattern of the SAP Web IDE layout editor:
controls and outline on the left, the canvas in the middle, properties on
the right. It wears the look of the other abap2UI5 tools - the Playground,
the AI App Builder and the AI Agent - and the tool's name in its bar leads to
each of them. It adds
one thing of its own: the class is never hidden. Canvas and code sit side by
side, and selecting a control marks the lines that build it. Clicking a line
selects the control.
controls ──drag──▶ canvas (real UI5) ◀──linked──▶ ZCL_MY_APP.clas.abap ──abapGit──▶ your system
outline · data · checks properties
How it works
- Lay out. Drag controls or building blocks from Controls onto the
canvas or into the Outline. Click a control on the canvas, in the
outline or in the code to select it. The toolbar on the selected control
selects its parent, moves it, duplicates or deletes it, and the path
below the canvas shows where it sits. Ctrl+K opens a command palette
to insert, jump to or run anything.
- Set properties. Each property in Properties is one of four kinds:
a value (
Aa), bound to an attribute (@), a field of the row of a
bound list (#), or a raw UI5 expression (ƒx).
- Add data. On the Data tab, define the attributes of the app:
strings, numbers, flags, dates, times, and tables with fields and sample
rows. A list or table bound to a table attribute repeats its template per
row. A field can itself be a table, with fields and rows of its own:
that is what a tree's nodes come from, and what a list inside a list
repeats. When you insert a list, a table or a tree, one click creates
the table attribute and binds it. The canvas shows your sample data.
- Name events. Give a button's
press (or any other event) a name.
It becomes client->_event( ) in the view and a WHEN branch in
on_event.
- Export. Export downloads the class with its abapGit files. In
abapGit, choose New Offline → Import ZIP and pull. Start the app with
?app_start=zcl_my_app. The menu next to it has the plain .clas.abap
and copy to clipboard.
The class follows the abap2UI5 app template exactly: one class implementing
z2ui5_if_app, main as the single IF/ELSEIF dispatcher, bound data in
the public section, and view_display, on_event and model_init. The
view is one z2ui5_cl_ui5_view_builder chain in the abap2UI5 house layout.
From there it is your code:
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
)->ele( n = `View` ns = `mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `displayBlock` v = `true`
)->a( n = `height` v = `100%`
)->ele( `Page`
)->a( n = `title` v = `Customer`
)->tag( `Input`
)->a( n = `value` v = client->_bind( name )
)->tag( `Button`
)->a( n = `text` v = `Save`
)->a( n = `press` v = client->_event( `SAVE` ) ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
Also in the editor:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
