1 Context

The Menus and Actions explained

The Action Designer explained

The Menu Designer explained

2 Result

3 Step by step guide

3.1 Create an action

1. Navigate to the section “Logicalize” -> “Actions” and select “+ Create Action”
2. Fill in the following information and name it GeneralSaveRibbon
1. Action Name -> “GeneralSaveRibbon”


This is the internal identifier for this action

2. Module -> “MyAppModule” 
3. Ui Element Used -> “Action”
4. Action Default Label -> “Save”
5. Action Default Icon -> “fad fa-save” (By clicking in the magnify glass you can look for other icons)
6. Action Default Icon (Big) -> “fad fa-save” (By clicking in the magnify glass you can look for other icons)
3. Select “Confirm”
4. In the Action Designer fill in the following parameters
1. Type of Action -> “PUBLISH” (second card in the panel)


We use PUBLISH if this action writes into DSOs

2. Event to be published -> “recordSave”


Through this changed records will be saved. We could also add here a function or other parameter

3. Target Link -> TABLEIO


The connection type for our action

5. Select “Save”

3. 2 Create the menu

1. Now navigate to “Design” -> “Menus”
2. Filter for "Show root menus" by ticking the checkbox and selecting "BuildOneApplication".
3. Click on the menu structure node “BuildOne Application” to select it
4. Make sure in the section “New Entry” (in the ribbon at the top) the category “Menu” is selected and click on “Add as sublevel”
5. Fill in the following information:
1. MenuName → MyOrderApplication
2. Menu Structure Code → MyOrderApplication


This will be the group for the menus in our app

6. Click “Save”
7. Select your new menu “MyOrderApplication”
8. Now select the item type “Menu”, in the “New entry” block of the ribbon in the dropdown, and click on “Add as sublevel” and call it:
1. MenuName -> MyRibbon
2. Menu Structure Code -> MyRibbon and click “Save”


This will be the menu for our ribbon

9. Select now your newly created “MyRibbon” group and add a “Block” by also selecting it in the dropdown, then clicking the button “Add as sublevel” and name it “CRUD-Operations” and click “Save”


This will be the group for our ribbon

10. Now select your newly created “Block” group and add an “Item” by also selecting it in the dropdown and clicking the button “Add as sublevel”
11. Fill in the following information and Save it
1. Action → GeneralSaveRibbon
2. Label → Save (It should be autocompleted)
3. Turn on the “Big Icon” toggle


This controls the size of the button in the ribbon

4. Click “Save”


This will be the button in our ribbon

12. Now go back to the Screen Designer of your OrderOverview screen.

3.3 Integrate the ribbon in the screen

1. Search for the “SimpleSwatRibbon” in the panel “Library of Objects” and drag and drop it on the title of the screen
2. Click on the “SimpleSwatRibbon” and search in the panel “Attributes” for the attribute “Menu” and search for the following value “MyRibbon” (Menu structure code of your ribbon group)
3. Navigate to the Flow View and link the “SimpleSwatRibbon” to the object “OrderForm_<yourName>” and choose the “Link type” -> “TableIO”

Now launch your screen and test the new save function, by changing a value in the the order form, e.g. in the “Term” column. Once you changed a value, you see unsaved changes. Now, click on your new save function. Violá, your changes are saved!

There are various actions that are already defined in the standard. We can look at these in the SWAT framework and use them as needed

4 Explanation

We added the ability to edit records in a predefined screen. With this ribbon bar, you can make these changes directly in the screen.

5 Helpcenter Article

Ribbon

The Ribbons are created in Build.One using the SwatRibbon object. A SwatRibbon is a graphical control element in the form of a toolbar that can be added to a ‣s.

helpcenter.build.one

Menu structure

A menu structure is used to organise applications in Build.one and make the functions reusable in multiple places. This is an example of the menu structures of an Application

helpcenter.build.one