Create a first small app with sidebar

1 Context:

🧠

In this step, we will integrate the first screen into our app's view. To do this, we will utilise menu functions and the menu structure once again. First, we will create functions and then add them to the menu structure. Then, we will look at how the application looks like from the user's perspective. To achieve this, we will create a dedicated user and start the application with their account.

2 Result:

3 Step by step guide:

3.1 Create a menu function

Navigate to the section “Logicalize” -> “Actions” and click on “+ Create Action”

“Action Name” -> “LaunchOrderOverview”
“Module” -> “MyAppModule”
“UI Element Used “ -> “Action”
“Action Default Label” -> “LaunchOrderOverview”
Action Default Icon -> “fad fa-cart-arrow-down”

Once created, in the Action designer:

“Type of Action” -> “Launch”
“Screen to be launch” -> “OrderOverview_yourName” ⚠️ (Name of your screen)

💡

Here you define which screen will be launched

Select “Save” and close the window

3.2 Create a menu structure

Navigate to “Design” -> “Menus” click on “Show root menus” and select the “BuildOne Application”
Select your app folder in the folder structure, then click on “Add as sublevel”, call it “MySidebar” and fill in the Menu Structure Code “MySidebar”
Select your newly created group “MySidebar” in the section “New Entry” in the dropdown “Item” and click on “Add as sublevel”
Call it “Order Overview” and select your “Action” -> “LaunchOrderOverview”
Select “Save” and copy the “Menu Structure Code” of your folder “MySidebar”.
Close the menu screen

3.4 Configure your app object and launch your app

To change the sidebar we need to modify the App object, to do so, navigate to “Design” → “All Objects”
Search for the “MyApp” and open the Object Designer for it
Change the attribute value of “mainMenuCode” to the menu structure code of your screen group “MySidebar”
Go to “Design” → “Applications” , select your application and click on “Launch App”

4 Explanation:

☝

It is possible to create and manage multiple apps in B1. What we just did was to integrate our screen into its own app and then start the app.

5 Helpcenter Article

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