Combine a function with a FAB (Floating Action Button)

1 Context

🧠

Next, we will combine the function we just created with a menu structure for our application. Build.One applications are organized in so-called menu structures. This means that we have a kind of folder structure for our objects, in which we organize all our functions, actions, and objects.

2 Result

3 Step by step guide

3.1 Create the menu structure

Navigate to the section “Design” -> “Menus”
In the top section search for the checkbox “Show root menus” and select it
Select the “BuildOne Application” to open the menu section.
Select your created group “MyOrderApplication” and, in the ribbon section “New Entry”, make sure “Menu” is selected in the dropdown menu and click “Add as sublevel”.
Fill in a “MenuName” -> “CreateNewOrder_<yourName>”
Fill in a “Menu Structure Code” -> “CreateNewOrder_<yourName>”
Select “Save” to save your folder structure

This will be the menu for our Floating Action Button

Now select your folder CreateNewOrder_<yourName> and in the dropdown in the section “New Entry” select the “Item” and click on “Add as sublevel”

This is the actual button we will declare now.

In the search field “Action” search for your created function “CreateANewOrder” from task 150
Fill in a “Label” -> “Create a New Order” (It should already be preselected)
Fill in a “ID” -> “OrderButton_<yourName>”
Select “Save” to save your button.

3.2 Add the function to your grid

Navigate back to the screen designer of your “OrderOverview_<yourName>”
Select the “OrderGrid_<yourName>” and search in the “Attributes” for the attribute “Floating Action Button” and search for “CreateNewOrder_<yourName>” to select the menu that you created in the previous step
Click “Launch”, to launch your screen

Now you can see that a floating button will appear in the bottom right corner

By clicking the button, it will launch the screen for the add operation of a specific data set. It will launch the screen we have defined in the function.

4 Explanation

By using the internal identifier "Menu Structure Code", we can reuse the button we just created throughout the entire application. Simply include this code at the desired location to use the button with the assigned function. This is also the principle behind Build.One. Functions and objects are defined in a central location and then reused.

5 Helpcenter Article

Create a floating action button for a grid

The Floating Action Button can be used for different actions. It can be included in a grid to perform actions on it.

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

3 Step by step guide

3.1 Create the menu structure

Navigate to the section “Design” -> “Menus”

In the top section search for the checkbox “Show root menus” and select it

Select the “BuildOne Application” to open the menu section.

Select your created group “MyOrderApplication” and, in the ribbon section “New Entry”, make sure “Menu” is selected in the dropdown menu and click “Add as sublevel”.

Fill in a “MenuName” -> “CreateNewOrder_<yourName>”

Fill in a “Menu Structure Code” -> “CreateNewOrder_<yourName>”

Select “Save” to save your folder structure

This will be the menu for our Floating Action Button

Now select your folder CreateNewOrder_<yourName> and in the dropdown in the section “New Entry” select the “Item” and click on “Add as sublevel”

This is the actual button we will declare now.

In the search field “Action” search for your created function “CreateANewOrder” from task 150

Fill in a “Label” -> “Create a New Order” (It should already be preselected)

Fill in a “ID” -> “OrderButton_<yourName>”

Select “Save” to save your button.

3.2 Add the function to your grid

Navigate back to the screen designer of your “OrderOverview_<yourName>”

Select the “OrderGrid_<yourName>” and search in the “Attributes” for the attribute “Floating Action Button” and search for “CreateNewOrder_<yourName>” to select the menu that you created in the previous step

Click “Launch”, to launch your screen

Now you can see that a floating button will appear in the bottom right corner

By clicking the button, it will launch the screen for the add operation of a specific data set. It will launch the screen we have defined in the function.

4 Explanation