Create grid frame

In the UI web designer, login and click 'New'.

Build.One Documentation > Akioma Web Designer > image027.png

SmartObject-Type: <empty>
Smart-Module: <the Module created earlier>
New Object: <Entity>FB (FrameBrowser)
Template: SimpleSwatFrame

Build.One Documentation > Akioma Web Designer > image028.png

Save

Build.One Documentation > Akioma Web Designer > image029.png

Add grid to a frame

Find the object and Open it.

Build.One Documentation > Akioma Web Designer > image030.png

Click on 'layout / formularqueryfb', and change the 'Type' attribute from '1C' to '2E' and back to '1C'.

Save, close and reopen again.

Select 'Add'

Build.One Documentation > Akioma Web Designer > image031.png

Search for the Grid

Build.One Documentation > Akioma Web Designer > image032.png

Drag & Drop the Grid onto the 'empty' in the Designer Layout

Build.One Documentation > Akioma Web Designer > image033.png

Search for the DataSourceObject

Drag & Drop the Grid onto the Designer Layout

On Drag & Drop, keep moving to the left until the last object is no longer highlighted

Build.One Documentation > Akioma Web Designer > image034.png

Build.One Documentation > Akioma Web Designer > image035.png

Save, Close and Reopen

Now, the links must be added. Click on the 'link' button, and create the following lines:

Container to the DSO (link type: PrimarySDO)
DSO to the Grid (link type: Data)

Save, close and reopen. Links should look like:

Build.One Documentation > Akioma Web Designer > image036.png

To change the border title of the grid, select the grid from the layout and change attribute 'BorderTitle':

Build.One Documentation > Akioma Web Designer > image037.png

Set the following attributes:

Attribute	Value	Explanation
BorderTitle	Formular	z.B.
SUBTYPE	grid2
contextMenu	GridContextMenu
floatingActionButton	osivgridfab
showGridFilter	column-only	To hide the OMNI-search widget

Leave the fill-in fields before saving the changes.

Create details frame

Click on 'New' in the designer.

Enter the fields:

SmartObject-Type: <empty>
Smart-Module: <the Module created earlier>
New Object: <Entity>FV (Frame Viewer) (NB: in the screenshots below, the wrong name -without V- is used by mistake)
Template: SimpleSwatFrame

Build.One Documentation > Akioma Web Designer > image038.png

Press "OK".

Add viewer to a frame

Search for the just created details frame and open it.

Build.One Documentation > Akioma Web Designer > image039.png

Click 'Add' and search for the viewer.

Click on 'layour/adresstypf' and change the 'Type' from '1C' to '2E' and back to '1C', then press Save.

Build.One Documentation > Akioma Web Designer > image040.png

Click on 'Add', search for the Viewer and drag it on top of 'empty'.

Build.One Documentation > Akioma Web Designer > image041.png

Click 'Save'.

Click 'Add' again and search for the DataSourceObject

Drag & Drop the Grid onto the Designer Layout

On Drag & Drop, keep moving to the left until the last object is no longer highlighted

Build.One Documentation > Akioma Web Designer > image042.png

Save.

Build.One Documentation > Akioma Web Designer > image043.png

In the viewer, set the attribute 'footerMenu' to value: 'SaveCancelFooterMenu'.

Build.One Documentation > Akioma Web Designer > image044.png

Also set attribute 'titleHeader' to value: 'parent-only'.

Save.

Now, the links must be added. Click on the 'link' button, and create the following lines:

Container to the DSO (link type: PrimarySDO)
DSO to the Viewer (link type: Data)
DSO to the Viewer (link type: Display)

After save, the links look similar as:

Build.One Documentation > Akioma Web Designer > image045.png

Open viewer from grid-row

Select the Grid layout component.

Set 'FolderWindowToLaunch' to the name of the details frame, for example:

Build.One Documentation > Akioma Web Designer > image046.png

If the attributes 'SUBTYPE' and/or 'BorderTitle' are not changed, this can also be done now:

SUBTYPE = grid2
Bordertitle = <EntityName> (e.g. Adresstyp)