{"ref":"artifact:abap2ui5-layout-editor","page":"/artifacts/abap2ui5-layout-editor","json":"/artifacts/abap2ui5-layout-editor.json","generated":"2026-10-26","drafted_with_ai":true,"entity":{"id":"abap2ui5-layout-editor","name":"abap2UI5 Layout Editor","artifact_type":"web-tool","ecosystem":"abap","serves_ecosystems":["ui5"],"domain":"developer-experience","secondary_domains":["ui-and-frontend-bridge"],"origin_ring":"community-org","flavors":[{"key":"standard-abap","source":{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, What the generated class needs","checked":"2026-10-17","quote":"ABAP 7.40 or later, or ABAP Cloud. The class uses inline declarations and `VALUE #( )`, like every abap2UI5 sample."}},{"key":"abap-cloud","source":{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, What the generated class needs","checked":"2026-10-17","quote":"ABAP 7.40 or later, or ABAP Cloud. The class uses inline declarations and `VALUE #( )`, like every abap2UI5 sample."}}],"description":{"one_line":"A browser editor that lays out a UI5 view by drag and drop and writes it out as one [abap2UI5](artifact:abap2ui5-abap2ui5) app class, pulled into the system with [abapGit](artifact:abapgit-abapgit).","short":"Drag-and-drop UI5 view editor that writes an abap2UI5 app class","what_it_solves":"An [abap2UI5](artifact:abap2ui5-abap2ui5) view is ABAP code: a `z2ui5_cl_ui5_view_builder` chain written by hand, against the control names and properties of UI5 1.71. This editor lays the view out on a canvas of real UI5 and writes that chain with the class beside it, so selecting a control marks the lines that build it and clicking a line selects the control. What comes out is one class on the abap2UI5 app template, with the attributes of the *Data* tab as its public data and each named event a `WHEN` branch in `on_event`, downloaded with its abapGit files or as the plain `.clas.abap`. It also reads an existing app class back in: the builder chain becomes the design again, and the next export rewrites that chain alone and leaves every other line as the author wrote it. It stops at the file. Nothing in it writes to an SAP system.","when_not_to_use":"The class has to be moved by hand: an abapGit pull of the exported ZIP, or a paste into ADT or SE24. The palette is held to the 121 controls of UI5 1.71, and a control inserted by its class name instead comes from whatever UI5 the canvas has loaded, with nothing checking it against 1.71 - *Checks* reports that. An app class that builds no view, or more than one, is refused.","to_build_on_it":"There is no build step: `index.html`, `preview.html`, `styles.css` and `src/` are the app as it is served, `npm run serve` puts it on 127.0.0.1:8080, and `npm run verify` runs four checks - the palette against the metadata of a real UI5 1.71.80, the [abap2UI5 linter](https://abap2ui5.github.io/linter/) over the generated classes, every starter transpiled and run on abap2UI5, and the editor in Chromium. A control added to `src/catalog.js` needs its 1.71 metadata regenerated with `npm run ui5:metadata` rather than written by hand, and a generator change has to pass all four."},"links":{"repo":"https://github.com/abap2UI5/layout-editor","homepage":"https://abap2ui5.github.io/layout-editor/"},"provides":[{"capability":"capability:abap-ui-from-abap","what_it_does":"Turns a drag-and-drop design into the ABAP that builds the UI: one app class on the abap2UI5 template whose view is a single `z2ui5_cl_ui5_view_builder` chain, with the bound attributes in the public section and each named event a `WHEN` branch in `on_event`.","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — repository description","checked":"2026-10-17","quote":"A drag-and-drop layout editor for abap2UI5: design a UI5 view in the browser, export one ABAP class via abapGit."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README","checked":"2026-10-17","quote":"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."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, How it works","checked":"2026-10-17","quote":"It becomes `client->_event( )` in the view and a `WHEN` branch in `on_event`."}]},{"capability":"capability:generators","what_it_does":"Generates the class, and regenerates it from one that exists: starters for a blank page, a form, a table with search, tabs and four floorplans; an export with the abapGit files or the plain `.clas.abap`; and a 7.02 variant for systems before 7.40. An imported class is patched rather than rewritten - only the view chain changes, new attributes go to the end of the public section and new events get a `WHEN` branch.","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, Also in the editor","checked":"2026-10-17","quote":"**Starters**: a blank page, a form, a table with search, tabs, and the floorplans: a list report (filter fields and a search over a table), an object page (header, a form section and an items section), a worklist (a table with a status column and a row press) and master-detail (a list next to the details of the selected entry, in two columns)."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, How it works","checked":"2026-10-17","quote":"*Export* downloads the class with its abapGit files."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, Also in the editor","checked":"2026-10-17","quote":"Export writes the chain back into that class and leaves every other line as it was; new attributes go to the end of the public section, new events get a `WHEN` branch in `on_event`."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, What the generated class needs","checked":"2026-10-17","quote":"For an older system, choose **ABAP 7.02** next to the class name: the class then declares its variables at the top of a method, fills its sample rows with `APPEND`, and writes a line break as `cl_abap_char_utilities=>newline` joined with `&&` - no inline declarations, string templates or constructor expressions."}]}],"requires":[{"ref":"artifact:abap2ui5-abap2ui5","requirement":"required","basis":"binding","role":"framework","for":"the generated class: it implements `z2ui5_if_app` and builds its view with `z2ui5_cl_ui5_view_builder`, so the system needs a release that ships that class; the editor's output is verified against 1.147.0","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, What the generated class needs","checked":"2026-10-17","quote":"An abap2UI5 release that ships `z2ui5_cl_ui5_view_builder`. The class is verified against **abap2UI5 1.147.0**."}]},{"ref":"artifact:abapgit-abapgit","requirement":"conditional","basis":"binding","role":"installation","condition":"the exported ZIP is pulled into the system, rather than the `.clas.abap` pasted into a new class in ADT or SE24","for":"getting the class onto a system: *Export* downloads it with its abapGit files, which abapGit imports as an offline repository","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, Deploying to your system","checked":"2026-10-17","quote":"*Export* the ZIP and pull it with abapGit (*New Offline* → *Import ZIP*), or paste the `.clas.abap` into a new class in ADT or SE24 and activate it."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, How it works","checked":"2026-10-17","quote":"*Export* downloads the class with its abapGit files. In abapGit, choose *New Offline* → *Import ZIP* and pull."}]}],"connects":[{"ref":"external:openui5-cdn","kind":"data","direction":"outbound","for":"the canvas: it loads the UI5 runtime it renders the view on, at the release chosen above the canvas, and a UI5 named by a link may only be the editor's own server, localhost or SAP's UI5 CDNs","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, Standards, and what is not used","checked":"2026-10-17","quote":"The canvas loads OpenUI5 (Apache 2.0) from the OpenUI5 CDN at runtime."},{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, A UI5 of your own","checked":"2026-10-17","quote":"A UI5 runs its scripts with the editor's rights, so a link may only name a UI5 on the editor's own server, on `localhost` / `127.0.0.1`, or on SAP's UI5 CDNs (`sdk.openui5.org`, `ui5.sap.com`)."}]},{"ref":"artifact:abap2ui5-vscode-extension","kind":"data","direction":"outbound","for":"handing the generated class over: *Open in VS Code* calls `vscode://abap2ui5.abap2ui5/open`, and the extension opens the class as an unsaved `.clas.abap`","sources":[{"url":"https://github.com/abap2ui5/layout-editor","title":"abap2UI5/layout-editor — README, Also in the editor","checked":"2026-10-17","quote":"**Open in VS Code** hands the class to the abap2UI5 extension (`vscode://abap2ui5.abap2ui5/open`), which opens it as an unsaved `.clas.abap` and offers to run it."}]}],"maintainers":["actor:abap2ui5"],"provenance":{"discovered_via":[{"source":"source:github"}],"first_seen":"2026-10-17"},"drafted_with_ai":true,"contributors":["actor:oblomov-dev"]},"effective_normative_relations":[],"readings":{"liveness":[{"label":"Maintenance","tier":"unknown","evidence":"no release data"},{"label":"Continuity","tier":"fair","evidence":"1 contributor, org-owned"},{"label":"Repository","tier":"good","evidence":"pushed 2026-10, not archived"}],"compatibility":[{"label":"Declared for","tier":"fair","evidence":"nothing declared"},{"label":"Survived majors","tier":"unknown","evidence":"not read on ABAP: its lines run side by side"},{"label":"Maintainer's CI","tier":"good","evidence":"pages green, 2026-10-18"}],"practice":[{"label":"Tests","tier":"good","evidence":"17 test files"},{"label":"Docs","tier":"good","evidence":"README 17 KB"},{"label":"Changelog","tier":"fair","evidence":"none in the repo"}],"reach":[{"value":null,"unit":"installs/week"},{"value":0,"unit":"watching"}]},"signals":{"crawled_at":"2026-10-24","npm":"not published under this name","stars":0,"forks":0,"open_issues":0,"archived":false,"pushed_at":"2026-10-18","license_spdx":"MIT","org_owned":true,"default_branch":"main","created_at":"2026-10-14T07:36:49Z","open_prs":0,"tree_truncated":false,"test_files":17,"workflows":2,"other_ci":false,"readme_bytes":17677,"docs_files":0,"changelog":false,"license_file":true,"dts_files":0,"first_commit":"2026-10-14","last_commit":"2026-10-18","commits":9,"contributors":1,"ci_status":"success","ci_run_at":"2026-10-18","ci_workflow":"pages","ci_event":"push","readme_path":"README.md","readme_sha":"a9776afb52fece8655027250d93cdefa54ba84ca","repo_read":"2026-10-24"},"edges":{"maintainers":[{"ref":"actor:abap2ui5","name":"abap2UI5","json":"/actors/abap2ui5.json"}],"contributors":[{"ref":"actor:oblomov-dev","name":"oblomov-dev","json":"/actors/oblomov-dev.json"}],"explained_by":[],"alternative_to_this":[],"needed_by":[],"available_via":[],"parts":[],"add_on_to":{"ref":"artifact:abap2ui5-abap2ui5","name":"abap2UI5","json":"/artifacts/abap2ui5-abap2ui5.json"},"add_ons":[],"answered_through_parts":[]}}