JSMenu compatible component selector

A wizard for selecting a JSMenu compatible component

Overview

JSMenu compatible component selector

The JSMenu Compatible Component Selector is a dialog in Servoy Developer that allows developers to assign menus to compatible components such as Sidenav or Navbar. It ensures compatibility and provides tools for easily searching, filtering, and selecting the appropriate components.

Sections

Search Field

The input field where you can type text to filter the list of compatible components. It dynamically updates the list based on the input.

Component List

Displays components compatible with the JSMenu framework, such as sidenav [servoyextra] and navbar [bootstrapextracomponents]. Each entry shows the component name and its source.

Filter Options

Clicking the three dots icon next to the search field reveals an additional option:

• Filter on parent nodes : Provides a toggle to filter on parent nodes or leaf nodes, useful for narrowing down results when working with nested or hierarchical menus.

Action Buttons

• OK: Adds the selected component to the main form. Automatically will set the previously selected Servoy Menu name for the servoyMenu property of the added component.

• Cancel: Closes the selector without applying changes.

Using the JSMenu Compatible Component Selector

Create a Sidenav through a Servoy Menu

Here are the steps for using the JSMenu Compatible Component Selector:

1. Open the Selector:

   • Open the Form Editor of the form where you need to place the compatible component

   • Find the desired Servoy Menu name in the Servoy Menu section in the components' palette

   • Drag and drop the desired Servoy Menu name in the form

2. Search for a Component (Optional)

   • Use the search field to filter the list of compatible components.

   • Type part of the component name (e.g., sidenav) to narrow down the results.

3. Filter Nodes (Optional)

   • Use the filter toggle menu (three vertical dots) to switch between filtering on parent nodes or leaf nodes.

   • This can help when working with nested or hierarchical menus.

4. Select a Component

   • From the filtered list, select the desired component (e.g., sidenav [servoyextra] or navbar [bootstrapextracomponents]).

5. Confirm Your Selection

   • Click OK to add the selected component to the main form.

   • The selected Servoy Menu name will automatically be set for the servoyMenu property of the added component.

6. Cancel if necessary

   • Click Cancel to close the selector without making changes.