• Description
• Icons in Menus
• Examples of icons in menus
• Set of icons supported
• Custom style for icons
• How to use it
• 1. Create a new menu structure
• 2. Create a sub folder structure
• 3. Create an item node
• 4. Export your menu changes
• Use Cases

Description

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

1. The first node contains the main menu structure.
2. This is the folder for an application. In this application, various elements such as buttons, desktops, etc. can be collected. Any number of applications can be managed in a menu structure. Alternatively, you can create a separate menu structure for each application.
3. This group collects and manages all toolbars.
4. For each different toolbar, a separate folder is created to collect the buttons for that specific toolbar.
5. This is the first toolbar button located in the toolbar from point 4. Any number of buttons can be collected in these elements. The respective function is also declared in these elements.
6. This group collects and manages all ribbons.
7. For each different ribbon, a separate folder is created to collect the buttons and blocks for that specific ribbon.
8. The block can be used to visually separate buttons from each other.
9. This is the first ribbon button located in the ribbon from point 6. Any number of buttons can be collected in these elements. The respective function is also declared in these elements.
10. This group collects and manages all buttons.
11. For each different button, a separate folder is created to declare the functionality of the button.
12. This element declares the functionality of the button and defines the menu function.
13. This group is used to represent the desktops as in Sidebar in Build.One
14. It is possible to define different groups with different desktops. Here, an extended desktop group is declared.
15. Here, the launch function for the screen is declared to display it in the desktop group.
16. It is possible to define different groups with different desktops. Here, a basic desktop group is declared.
17. Here, the launch function for the screen is declared to display it in the desktop group.

Icons in Menus

Each menu element can be assigned a specific icon that serves as a visual identifier, which will be consistently displayed across all instances where that menu appears in the interface. This icon provides visual recognition and enhances the user experience by making menu items easily identifiable throughout the application.

Examples of icons in menus

Here are examples of how icons appear in different object types that support menus.

• If the menu is used in a sidebar, the sidebar item icon will be the one defined

• If the menu is used in a toolbar, the button icon will be the one defined

• If the menu is used in a field menu, the icon will be the one defined

Set of icons supported

Users can choose from the complete set of Font Awesome icons, including variants such as solid, regular, and thin. For a full overview of available icons and their variants, check Font Awesome

Custom style for icons

Icons are automatically styled based on their object type, with properties like primary color and size managed by the rendering engine. You can add custom styles such as specific colors to the icon definition. Simply add a # after the icon definition followed by CSS styles. For example, to create an icon with larger font size and green color, use the following definition

fal fa-home-heart#font-size:large;color:green 

The icon will appear as shown in the following image when used in a sidebar.

How to use it

1. Create a new menu structure

1. Navigate to Design → Actions and Menus → Menus
2. Click on the "Create Menu" button in the toolbar
3. Define a menu name and a menu structure code
4. Check the box for "Begins Group"
5. Click on "Confirm"

7. To find your menu structure, select the checkbox "Show root menus" in Design → Actions and Menus → Menus.
8. Click on the link in Menuname to open the designer for it.

2. Create a sub folder structure

1. Choose your first node and click on "Add as sublevel" in the Ribbon bar.
2. Name the first folder "MenuName" and assign it a menu structure code.

The menu structure code is the internal identifier used to locate this node in the system.
3. Click on "Save" in the Ribbon bar.

The Ribbon bar offers different types of nodes that can be used to define your menu structure:
• Menu → Used to represent folder structures.
• Item → Used to declare functions.
• Ribbon → Used to create Ribbon bars.
• Block → Used to divide Ribbon bars.
• Dropdown → Used to create dropdowns.

3. Create an item node

1. Select a folder.
2. In the top dropdown, select the item type.
3. Click on "Add as sublevel" to add the item.
4. Insert a label - the name of the button or screen menu item.
5. Enter a menu structure code as an internal identifier.
6. Enter the related menu function. How to create one is explained in Menu: Menu Structure and Actions (Menu Function).
7. Choose two icons to be displayed for the button or screen.
8. Click on Save.

4. Export your menu changes

1. Navigate to Design → Actions and Menus → Menus
2. Click on the button “Export all”

Use Cases

Use Cases

Change Sidebar selection programatically

U

Untitled

Back to Documentation

Back to Home Page