layout-management
An abap2UI5abap2UI5One ABAP class implementing z2ui5_if_app is the whole app: the browser loads a generic UI5 shell once, and every interaction after that is an HTTP roundtrip back into ABAP.community org, abap addon that renders an internal table or a structure as a UI5 table or form with a settings popup, where the user lays it out and saves the result as a layout variant.
In a hand-written UI5 view every column sits in the code, so an app that wants ALV-like layouts has to build the layout dialog and its persistence itself. layout-management takes an internal table or a structure, builds the table or simple form from it via RTTI, adds a settings button that opens the layout popup, and stores what the user picks in its own database tables z2ui5_t_11 and z2ui5_t_12 under up to four handles the app passes; the default variant is loaded at the next start. A generic mode does the same for a view that is neither a table nor a form: controls registered by their id are hidden, moved inside the aggregation they sit in and relabelled, applied to the finished XML by xml_apply_layout( ). Every write goes through the interface z2ui5_if_layo_auth, whose shipped default allows a user's own layouts, allows deletion by the owner only and denies shared layouts; no authorization object ships with it, because the right object differs per installation. It is pulled in with abapGitabapGitA Git client written in ABAP that runs inside the system, so objects are cloned, pulled and pushed without leaving it; with no package manager in ABAP, a cloned repository is how code is distributed.community org, abap after abap2UI5abap2UI5One ABAP class implementing z2ui5_if_app is the whole app: the browser loads a generic UI5 shell once, and every interaction after that is an HTTP roundtrip back into ABAP.community org, abap, from main for ABAP Cloud, S/4HANA and NetWeaver 7.50 and higher, or from the downported 702 branch for NetWeaver 7.02 to 7.40.
Facts
Where it sits
Who is behind it
In the atlas: maintains 21@abap2UI5-addonsmaintainerabapsheepContributes to this
In the atlas: contributes to 6@abapsheepJosh ElliottContributes to this
In the atlas: contributes to 9@jelliottpoblomov-devContributes to this
In the atlas: maintains 4, contributes to 44@oblomov-dev3 contributors
Before choosing this
Conditions
PracticalFunctional boundary
The layout is rendered into an abap2UI5abap2UI5One ABAP class implementing z2ui5_if_app is the whole app: the browser loads a generic UI5 shell once, and every interaction after that is an HTTP roundtrip back into ABAP.community org, abap view and its events are passed on from the app's main method, so there is nothing here for a UI outside an abap2UI5 app. Shared layouts stay denied until a class implementing z2ui5_if_layo_auth exists in the system, so an installation whose key users are to maintain shared layouts has that class and its authorization object to write first.
What it declares
Every artifact
- Type
- Package
- Origin
- Independently maintained
As a package
- Where it runs
- does not say
- Distributed through
- abapGit
Connections
Producing a web user interface from ABAP code
Ready-made dialogs for abap2UI5 apps
Select-options with saved variants for abap2UI5 apps
UI5 apps written as one ABAP class, rendered by a generic shell
Git client written in ABAP that runs inside the system
Download
README
quoted from abap2UI5-addons/layout-management under MIT, readlayout-management
Tables and forms in your abap2UI5 apps that users can lay out themselves - and save as variants. You hand over an internal table or a structure; layout-management renders it as a table or a simple form with a settings button. There the user picks the visible columns or fields, their order, labels and sorting, and saves the result as a layout variant in the database - the default variant is loaded automatically the next time the app starts. For developers of abap2UI5 apps who want ALV-like layouts without building them.
Part of abap2UI5-addons - addons and apps for abap2UI5, installed with abapGit.
Why
Users are used to ALV layouts: hide a column, move it, sort, save the setup and get it back tomorrow. In a hand-written UI5 view every column is fixed in the code, and each app would have to build layout dialogs and their persistence on its own.
layout-management does that once. It builds the table or form from your data
via RTTI, offers the layout popup, and stores the variants per app in its own
tables (z2ui5_t_11, z2ui5_t_12). Other addons build on it - for example
the value and search helps of
abap2UI5-addons/popups.
Installation
Requirements
- ABAP Cloud (S/4 Public Cloud, BTP ABAP Environment), S/4 Private Cloud or
On-Premise, or SAP NetWeaver AS ABAP 7.50 or higher; NetWeaver 7.02 with the
downported branch
702 - abap2UI5
Steps - with abapGit, in this order:
- abap2UI5
- this repository, from the branch that fits your system - classes and the
two tables
z2ui5_t_11/z2ui5_t_12for the layout variants:
| System | Branch to pull |
|---|---|
| ABAP Cloud, S/4HANA, NetWeaver 7.50 or higher | main |
| NetWeaver 7.02 - 7.40 | 702 (downported automatically from main) |
Start - run a sample like any abap2UI5 app, e.g.
?app_start=z2ui5_cl_layo_sample_01 for a table with icons, charts and
indicators. All samples are listed under Samples.
Usage
Create a layout manager for your data, let z2ui5_cl_layo_xml_builder render
it into your view and pass the events on to z2ui5_cl_layo_pop - it opens the
layout popup when the user presses the settings button:
" DATA mt_table TYPE ty_t_table. " your rows
" DATA mo_layout TYPE REF TO z2ui5_cl_layo_manager.
METHOD z2ui5_if_app~main.
IF client->check_on_init( ).
mo_layout = z2ui5_cl_layo_manager=>factory( control = z2ui5_cl_layo_manager=>m_table
data = REF #( mt_table )
handle01 = `ZCL_MY_APP` ).
render( client ).
ELSEIF client->check_on_navigated( ).
" back from the layout popup - take over the chosen layout
TRY.
mo_layout = CAST z2ui5_cl_layo_pop( client->get_app( client->get( )-s_draft-id_prev_app ) )->mo_layout.
render( client ).
CATCH cx_root.
ENDTRY.
ELSE.
z2ui5_cl_layo_pop=>on_event_layout( client = client
layout = mo_layout ).
ENDIF.
ENDMETHOD.
METHOD render.
" view = z2ui5_cl_ui5_view_builder=>factory( ) ... page = view->...->ele( `Page` )
z2ui5_cl_layo_xml_builder=>xml_build_table( i_data = REF #( mt_table )
i_xml = page
i_client = client
i_layout = mo_layout ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
controlisz2ui5_cl_layo_manager=>m_tablefor a table; for a form, usez2ui5_cl_layo_manager=>ui_simpleform, pass a structure and render it withz2ui5_cl_layo_xml_builder=>xml_build_simple_form( ).handle01tohandle04are the keys the variants are saved under - e.g. the app class and the table name.
The samples below are complete apps, z2ui5_cl_layo_sample_03 is the table
above with the namespaces of the view.
Any view - the generic mode
For a view that is neither a table nor a form, the generic mode personalizes
the controls of the view itself: the user hides them, moves them inside the
aggregation they sit in (the buttons of a toolbar, the inputs of a box) and
renames them. Register the controls by their id, build the view as usual
and pass the finished XML through xml_apply_layout( ):
" in check_on_init( ) - once
mo_layout = z2ui5_cl_layo_manager=>factory_generic( handle01 = `ZCL_MY_APP`
handle02 = `MAIN_VIEW` ).
mo_layout->register( id = `inpName` label = `Name` ).
mo_layout->register( id = `btnSave` label = `Save` ).
mo_layout->register( id = `lstNotes` label = `Notes` label_attr = `headerText` ).
" in the view - the settings button, then the layout applied to the XML
z2ui5_cl_layo_pop=>render_layout_function( xml = header
client = client
layout = mo_layout ).
...
client->view_display( z2ui5_cl_layo_xml_builder=>xml_apply_layout( i_xml = view->stringify( )
i_layout = mo_layout ) ).
- A hidden control gets
visible="false"; aLabeldirectly in front of it whoselabelFornames it is hidden, moved and renamed with it. - Reordering stays inside the parent aggregation: the registered controls swap the places they occupy there, every other child keeps its position, nothing moves into another container.
- A renamed control gets its text written into
text,title,header,headerText,labelorplaceholder- whichever it has - or into the attribute named withlabel_attr. register_by_xml( xml = ... prefix = ... )registers every control of a view whose id starts with the prefix, with the label the view carries.- Navigation back from the popup, events and variants work as for a table
(
z2ui5_cl_layo_sample_06). The tables and forms of the other modes are unchanged and can sit in the same view.
The XML handling is z2ui5_cl_layo_xml_tree - no dependency on the framework
or the database, covered by ABAP Unit tests.
Features
- Generic Output - Universal table and form rendering
- Layout Customization - Flexible customization of table and form outputs
- Any View - Hide, reorder within the parent aggregation and relabel the controls of any view built with the view builder (generic mode)
- Variant Persistence - Save layout variants to database
- Auto-Loading - Load default layouts automatically at startup
- Authorization Hook - Shared layouts and deletions are decided by
z2ui5_if_layo_auth, with a safe default
Samples
| Sample | Shows |
|---|---|
z2ui5_cl_layo_sample_01 | Table with icons, tags, progress indicators, radial charts and status indicators |
z2ui5_cl_layo_sample_02 | Simple form with the same field types |
z2ui5_cl_layo_sample_03 | Table from a database table |
z2ui5_cl_layo_sample_04 | Simple form from a database record |
z2ui5_cl_layo_sample_05 | Table and form with two layouts on one page |
z2ui5_cl_layo_sample_06 | Generic mode: a page with a panel of inputs, a toolbar and a list, personalized by control id |
Demo
Tables
Forms
Charts & Indicators
Persistence
Security
This library persists layout variants to its own database tables. Who may
write what is decided in one place, the interface z2ui5_if_layo_auth.
Ownership of the variants:
- A layout saved with User specific belongs to the user who saved it; one saved without it is shared and is offered to every user.
- The layout popup lists the user's own layouts and the shared ones - never another user's personal layout.
- Saving never takes a layout away from anybody: saving another user's layout, or saving a shared layout as user specific, stores a new layout of the user's own under the same name and leaves the original as it was. A shared layout saved again as shared is updated for everybody.
Authorization concept
Before every write the popup asks z2ui5_cl_layo_auth=>check( action = ... head = ... )
with one of three actions of z2ui5_if_layo_auth=>cs_action:
| Action | Asked when | Shipped default |
|---|---|---|
SAVE_OWN | a user specific layout is saved (head-uname = the user) | allowed |
SAVE_SHARED | a shared layout is saved, new or updated (head-uname empty) | denied |
DELETE | a layout is deleted - head is read from the database, uname is its owner | allowed for the owner only, shared layouts never |
The decision goes to, in this order:
- an instance set with
z2ui5_cl_layo_auth=>set_instance( )- for tests, or for an installation that wants to choose the class itself; - the one class in the system that implements
z2ui5_if_layo_auth- found by its interface, the way abap2UI5 finds its user exit (the first by name if there are several, so keep it to one); z2ui5_cl_layo_authitself, the default above.
A denial ends in a message toast and nothing is written. Without an implementation the save popup starts on User specific, so the first save of every user just works.
The addon ships no authorization object on purpose: an AUTHORITY-CHECK
against an object that does not exist in the customer system is always
refused, and the right object differs per installation. To let key users
maintain shared layouts, implement the interface with your own object:
CLASS zcl_my_layo_auth DEFINITION PUBLIC FINAL CREATE PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_layo_auth.
ENDCLASS.
CLASS zcl_my_layo_auth IMPLEMENTATION.
METHOD z2ui5_if_layo_auth~check_authorized.
CASE action.
WHEN z2ui5_if_layo_auth=>cs_action-save_own.
result = xsdbool( head-uname = sy-uname ).
WHEN z2ui5_if_layo_auth=>cs_action-save_shared
OR z2ui5_if_layo_auth=>cs_action-delete.
" head-handle01 .. 04 say which app and table the layout belongs to
AUTHORITY-CHECK OBJECT 'Z_LAYOUT' ID 'ACTVT' FIELD '02'.
result = xsdbool( sy-subrc = 0 OR ( action = z2ui5_if_layo_auth=>cs_action-delete
AND head-uname = sy-uname ) ).
ENDCASE.
ENDMETHOD.
ENDCLASS.
Shared layouts written before an implementation existed, or by another tool,
stay in table z2ui5_t_11 (positions in z2ui5_t_12) and can be removed
there.
Development
npm ci
npm run check # all gates below, as in CI
npm run lint # abaplint, Standard ABAP (v750)
npm run check:cloud # abaplint, ABAP Cloud
npm run check:abap2ui5 # abap2UI5-linter over apps and views
npm run rename # namespace rename check
npm run downport # downport the source to 7.02 syntax
Contributing
Issues and pull requests are welcome - whether you're fixing bugs, adding new functionality, or improving documentation. Read CONTRIBUTING.md first.
License
MIT - see LICENSE.
History
Others providing
Compare all 17 on the UI written in ABAP page →- abap2UI5-localabap2UI5-localThe whole abap2UI5 framework folded into the local classes of one HTTP handler, so an app runs without the framework installed as a package.community org, abapabap2UI5 folded into the local classes of one HTTP handlerfrom ABAP
- abap2UI5abap2UI5One ABAP class implementing z2ui5_if_app is the whole app: the browser loads a generic UI5 shell once, and every interaction after that is an HTTP roundtrip back into ABAP.community org, abapUI5 apps written as one ABAP class, rendered by a generic shellfrom ABAP
- abap-cloud-guiabap-cloud-guiA report-style programming model for abap2UI5: one class produces a selection screen with a WRITE list or an ALV grid, running as a UI5 app on ABAP Cloud as well as on NetWeaver 7.02.independent, abapReport-style programming model for abap2UI5 on ABAP Cloudfrom ABAP
- custom-controlscustom-controlsThirteen custom controls for abap2UI5, a signature pad and a scanner that reads several barcodes at once among them, each one an ABAP builder class with a single render( ) method and all of them shipped in a BSP of their own.community org, abapThirteen custom UI5 controls for abap2UI5 appsfrom ABAP
- http-connectorhttp-connectorAn add-on that makes the abap2UI5 apps of one ABAP system reachable through another: a thin ICF handler on the consumer system forwards every roundtrip to the source system through an SM59 destination.community org, abapForwards abap2UI5 roundtrips to another system over HTTPfrom ABAP
- abap2UI5 for Excelabap2UI5 for ExcelAn Office add-in that runs an abap2UI5 app in Excel's task pane, where the app reads and writes the workbook through the z2ui5.cc.ExcelBridge control.community org, abapOffice add-in running an abap2UI5 app in Excel's task panefrom ABAP
- abap2UI5-addons/popupsabap2UI5-addons/popupsReady-made dialogs for an abap2UI5 app: confirm, inform, select from a list, file up- and download, table, text edit, PDF, HTML, messages, range, value help and search help, each opened with one factory( ) call.community org, abapReady-made dialogs for abap2UI5 appsfrom ABAP
- rap-extrap-extFloorplan classes that read a CDS entity's UI annotations at runtime and render a list report, worklist, tree, object page, overview page, value help or action dialog as an abap2UI5 app.community org, abapFloorplans rendered from CDS UI annotations as abap2UI5 appsfrom ABAP
- selection-screenselection-screenSelect-options with saved variants for an abap2UI5 app, built from a database table name or from an internal table the app passes in.independent, abapSelect-options with saved variants for abap2UI5 appsfrom ABAP
- abap2UI5 frontend-webcomponentabap2UI5 frontend-webcomponentAn alternative abap2UI5 frontend: one ES module registering <abap2ui5-app>, which renders the views an unchanged abap2UI5 app class sends with UI5 Web Components and no UI5 core.community org, abapabap2UI5 frontend rendering with UI5 Web Componentsfrom ABAP
- abap2UI5 frontendabap2UI5 frontendThe abap2UI5 frontend as installable ABAP artefacts: per system type one generated branch carrying the BSP or HTTP service with its handler, pulled into the system with abapGit.community org, abapabap2UI5 frontend as ABAP artefacts installed with abapGitfrom ABAP
- abap2UI5 Layout Editorabap2UI5 Layout EditorA browser editor that lays out a UI5 view by drag and drop and writes it out as one abap2UI5 app class, pulled into the system with abapGit.community org, abapDrag-and-drop UI5 view editor that writes an abap2UI5 app classfrom ABAP
- abap2UI5 protocolabap2UI5 protocolThe abap2UI5 roundtrip written down: a versioned specification of the wire between frontends and backends, JSON Schemas for its messages, and two conformance suites that test either side.community org, abapVersioned specification of the abap2UI5 roundtrip protocolfrom ABAP
- ZFPM_TOOLSZFPM_TOOLSA report that shows the development objects of an FPM hierarchy in one view and edits, copies, deletes, imports and exports the hierarchy as a whole rather than one object at a time.independent, abapEdits, copies and transports a whole FPM hierarchy at oncefrom ABAP
- ZWD_CALENDAR_VHZWD_CALENDAR_VHA value help for date fields in Web Dynpro ABAP screens that shows a calendar view, so the user picks a day from it instead of typing the date.independent, abapWeb Dynpro ABAP calendar value help for date fieldsfrom ABAP
- abap_mustacheabap_mustacheA Mustache template engine for ABAP, rendering logic-less templates into HTML or any other text from a structure or table of any type, with partials and a separate Steampunk-compatible branch.independent, abapMustache template engine for ABAPfrom ABAP
Details
Sources
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
Compatibility and provenance
abaplint
Flavors
“ABAP Cloud (S/4 Public Cloud, BTP ABAP Environment), S/4 Private Cloud” — abap2UI5-addons/layout-management — README, Installation
“SAP NetWeaver AS ABAP 7.50 or higher” — abap2UI5-addons/layout-management — README, Installation
Contributors
History in the atlas
- First seen.
For your agent
- Ref
artifact:abap2ui5-addons-layout-management- JSON
- /artifacts/abap2ui5-addons-layout-management.json
- MCP
- Connecting an agent