Menus

Overview

Servoy Menu assigned to a Sidenav component

The Menu feature in Servoy is a reusable design-time entity designed to simplify and centralize menu management within applications. By defining a menu once, developers can use it consistently across multiple components that rely on structured navigation. This approach streamlines application development, enhances maintainability, and ensures a uniform user experience.

Menus in Servoy are versatile and promote modular design, making it easy to share or restrict their use across different parts of an application. With its flexible design, the Menu feature integrates seamlessly into the application’s user interface, enabling developers to focus on functionality while maintaining consistent navigation across their solutions.

Benefits of Using the Menu Feature

• Consistency: Defining the menu structure once and applying it across multiple components ensures a uniform navigation experience for users.

• Efficiency: Reduces the need for repetitive manual configuration, saving development time and minimizing errors.

• Maintainability: Centralized menu management simplifies updates and modifications, as changes to the menu structure are automatically reflected across all linked components.

Get Started

The Servoy Menu feature simplifies navigation by enabling developers to create structured, reusable menus. This guide provides step-by-step instructions to help you efficiently implement and manage menus for a consistent user experience.

Create a Menu

Using Solution Explorer:

1. In the Solution Explorer, right-click the Menus node and select Create menu. This will open the New Menu Wizard.

2. Enter the name for the Menu, select the desired solution then click on the Finish button. This will add the new Menu to the menus' list.

   

   Create a Servoy Menu
3. Set up the Menu Properties

   

   Servoy Menu Properties
4. Create Menu Items

5. Set up Menu Items Properties

6. Click the Save All button (or ctrl+shift+s) to save all your editors
7. Assign the Menu to a component.

A complete list of Menu API methods can be found here.

Using "servoyMenu" property of a component:

Example: assign a Servoy Menu to a Navbar component

1. In the component Properties Editor, click the servoyMenu property to open the Servoy Menu Selection Wizard

2. Click the name of the desired Servoy Menu

3. Click OK (to dismiss the Servoy Menu Chooser). This will assign the selected Servoy Menu to the component

4. Click the Save All button (or ctrl+shift+s) to save all your editors

---

Components List

The following components have a servoyMenu property:

• Navbar

• Sidenav

---

Menu Item

Overview

The MenuItem is a versatile design-time entity used to define individual items within a menu structure. It supports hierarchical organization, allowing each item to be linked to either a parent menu or another menu item, enabling the creation of nested menus.

With its flexible design, MenuItem ensures seamless integration into menu structures, supporting rich customization and adaptability for various application needs. This makes it an essential component for building intuitive and consistent navigation systems.

Create a Menu Item

Using Solution Explorer:

1. In the Solution Explorer, expand the Menus node, select the desired menu, right-click on it and select Create menu item. This will open the New MenuItem Wizard.

2. Enter the name for the Menu item and click on the OK button. This will add the new Menu item inside the specified Menu.

   

   Create a Servoy Menu Item
3. Set up the Menu Items Properties

   

   Servoy Menu Item Properties
4. Click the Save All button (or ctrl+shift+s) to save all your editors

Submenu items To create submenu items, simply follow the same process as creating a regular menu item. The only difference is that, instead of linking the item to the menu itself, you set another menu item as its parent. This allows you to build nested menu structures effortlessly, enhancing the organization and depth of your navigation.

Hint You can change the order of the menu items by right-clicking the specific menu-item and selecting Move Up or Move Down.

A complete list of Menu Item API methods can be found here.

Design-Time Menu Properties

Here is a list of the Menu properties:

Comment

• Description: Allows developers to add notes or descriptive information about the purpose of the menu. These comments can serve as helpful reminders or context for future development and maintenance.

• Use Case: Use this property to document the intended use or special considerations for the menu, ensuring clarity for other developers or when revisiting the project later.

Encapsulation

• Description: Defines the visibility scope of the menu. The available options include:

  • Public: The menu is accessible across all modules, both in scripting and in the designer.

  • Module Scope: The menu is restricted to the same module, both in scripting and in the designer.

• Use Case: Choose the appropriate encapsulation mode based on whether the menu needs to be shared across multiple modules or kept specific to a single module for better modularity and access control.

Name

• Description: Serves as the unique identifier for the menu. This name is used to reference the menu in scripting or other configurations.

• Use Case: Assign a meaningful and intuitive name that reflects the menu's purpose or function to ensure clarity and ease of identification during development.

StyleClass

• Description: Enables the association of CSS classes for styling the menu. This property allows for customization of the menu's appearance to match the application's design.

• Use Case: Apply custom styles by specifying a CSS class that defines the menu's visual properties, such as color, fonts, or layout, ensuring it aligns with the application's overall theme.

Design-Time Menu Item Properties

Menu items in Servoy are highly configurable and can include properties tailored for specific components like Navbar or Sidenav, or for both. These properties allow developers to customize menu items' behavior, appearance, and functionality based on the target component. To ensure seamless integration, the servoyMenu property should be used in the appropriate component (e.g., Navbar or Sidenav), aligning the menu item’s configuration with the component’s requirements.

Here is a list of the Menu Item properties:

Global Properties

These Menu properties apply universally to all menu items, regardless of their placement or context.

Enabled

• Description: Determines whether the menu item is interactive or disabled.

• Use Case: Use this property to control the availability of menu items based on application state or user permissions.

IconStyleClass

• Description: Specifies a CSS class to style the icon associated with the menu item.

• Use Case: Use this to add visual context to menu items by styling their icons to match the application's theme.

Name

• Description: Uniquely identifies the menu item.

• Use Case: Assign a meaningful name to easily reference the menu item in scripting or configurations.

Permissions

• Description: Configures visibility and interactivity of the menu item based on user roles and permissions.

• Use Case: Use this to restrict access to certain menu items for unauthorized users, enhancing security.

StyleClass

• Description: Specifies a CSS class for styling the menu item’s appearance.

• Use Case: Apply this to customize the overall look and feel of the menu item.

Text

• Description: Displays the content of the menu item. Supports HTML and localized text for dynamic customization.

• Use Case: Use this to present descriptive text or HTML-formatted content for better clarity.

ToolTipText

• Description: Displays rich, formatted text when hovering over the menu item.

• Use Case: Add helpful descriptions or instructions for menu items using HTML-formatted tooltips.

---

Navbar Properties

These properties are specific to menu items used in the Navbar component.

Attributes

• Description: Defines additional custom HTML attributes for the menu item.

• Use Case: Use this property to add advanced configurations, such as data-* attributes or accessibility tags.

DataProviderValue

• Description: Links a data provider to a text field, applicable only for menu items with the display types INPUT or INPUT_GROUP.

• Use Case: Use this to dynamically bind input fields to a data source, enabling real-time updates and interactions.

DisplayType

• Description: Controls the appearance of the menu item. Options include:

  • MENU_ITEM: Default menu item appearance.

  • TEXT: Displays plain text.

  • BUTTON: Renders the item as a button.

  • INPUT: Adds an input field.

  • INPUT_GROUP: Combines an input field with an optional button.

• Use Case: Adjust this property to define how a menu item should look and behave.

• Default Value: MENU_ITEM

InputButtonStyleClass

• Description: Specifies a CSS style class for the button shown with INPUT or INPUT_GROUP types. Typically used with Bootstrap button classes, such as btn-primary, btn-success, etc.

• Use Case: Apply this to style the button according to the application’s theme or functionality.

InputButtonText

• Description: Sets the text for the optional button shown with INPUT or INPUT_GROUP.

• Use Case: Use this to label the button with a relevant action or instruction.

IsActive

• Description: Indicates whether a MENU_ITEM item is shown as active.

• Use Case: Set this to true to highlight the current or selected menu item, improving navigation context for users.

• Default Value: False

Position

• Description: Determines whether the menu item appears on the left or right side of the Navbar.

• Use Case: Use this to organize menu items based on their placement within the navigation bar.

• Default Value: LEFT

TabIndex

• Description: Sets the tab order for the menu item in the navigation sequence.

• Use Case: Use this to improve keyboard navigation and accessibility for users.

UserData

• Description: Stores custom data associated with the menu item for reference purposes.

• Use Case: Use this to pass metadata or additional context for the menu item.

ValueList

• Description: Displays a typeahead list for INPUT or INPUT_GROUP menu items when set.

• Use Case: Use this to enhance user input fields with dynamic suggestions or predefined values.

---

Sidenav Properties

These properties are specific to menu items used in the Sidenav component.

BadgeStyleClass

• Description: Specifies a CSS class for styling badges displayed alongside the menu item.

• Use Case: Use this to customize the appearance of notification badges.

BadgeText

• Description: Displays text within the badge associated with the menu item.

• Use Case: Use this to show counts or statuses, such as the number of notifications.

Data

• Description: Stores additional data specific to the menu item.

• Use Case: Use this to hold custom values or context for the menu item.

FormName

• Description: Links the menu item to a specific form.

• Use Case: Use this to define the form that should be opened when the menu item is clicked.

IsDivider

• Description: Indicates whether the menu item acts as a visual divider.

• Use Case: Use this to separate groups of menu items within the Sidenav for better organization.

RelationName

• Description: Defines a relation for dynamically populating the menu item.

• Use Case: Use this to create menu items based on related data.