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

1. 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.
2. 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).
3. 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.
4. 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.
5. 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:

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗