Support > Repository > Layout

Describe the screen layout design method provided by Wagby.

Wagby's layout design is done by specifying the position, size, relationship with the next item, etc. for each item.
You can design a fine-grained screen required for business applications.

Example of a new registration screen defining diagram layout
(1) Basic configuration
You can design the screen layout by "vertical alignment" or "side by side" layout.
(2) Nested layout and hidden layout
You can designate combinations of portrait and sideways, or nest another layout in the layout.
(3) Grouped layout
It is a way to express the layout as a group, not as a panel.
(4) Wizard and tab layout
If there are many items on one screen, you can organize it by wizard or tab layout.
(5) Tab display control
We will prepare a control flag and show how to show/hide the tab according to that value.
(6) Order of search conditions
I will explain how to change the order of search conditions.
(7) Layout of input field of range search condition
Either uniform assignment or left-justification can be specified for range designation items on the search screen.
(8) Column layout of search condition part
Each item on the list display can be displayed across multiple lines.
(9) Fold the search condition field
I explain the layout that folds and displays the search condition column.
(10) Order of list display
I will explain how to change the order of the list display.
(11) List display - Multistage layout
Each item on the list display can be displayed across multiple lines.
(12) Foreign key child model - multistage layout
Foreign key You can display each item of the child model across multiple lines.
(13) Repetitive Container - Adjust Column Width
You can adjust the column width of repeating containers.
(14) Repeat container - Scroll bar display (and height setting)
Repeat Container display area is fixed and vertical/horizontal scroll bars are displayed.
(15) Repeat Container - Tab
Multiple iteration containers can be combined into one tab.
(16) Repetitive container - multistage layout
Each item of the repeating container can be displayed over multiple lines.
(17) Repetitive Container - Tab and Multistage Layout
You can use a repeating container multistage layout with tabs.
(18) Repetitive container - multi-tiered layout with header only
Only the header part of the repeating container can be multi-layered layout.
(19) Repeat container - Vertical row
The standard layout of repeating containers is side by side, but it can also be arranged in vertical layout.
(20) Repeat container - Horizontal row of multiple repeat containers
Multiple repeating containers can be arranged side by side in two or three rows.
(21) Repetitive container - Complex tab setting
Here are various examples of layouts that arrange repeating containers in tabs.
(22) Foreign key combines the child model and repeating container into the tab of the parent model
The foreign key child model is usually displayed at the bottom of the parent model display. This can be included in the tab of the parent model.
(23) Insert description / footnote
I will explain how to display a legend or footnote on the screen.