Menu Component

Overview

The Menu component is a Primary Fields component that attaches a drop-down list of customizable options to an element. For example, if your page has a Button component labeled Settings, and you want to display options when an end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. clicks it, use the Menu component to create the drop-down effect.

The Menu component is a Vega (2.0) The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. runtime component and is not supported in the Centauri (1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. runtime.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Adding a Menu Component

In this example, configure a Button component to trigger a Menu component.

These instructions assume that you have an open module saved with a title.

Configure the Button Component

The Button component acts as the visual anchor for the menu component. Your end-users click the button to display the menu underneath.

1.

In the Module Builder, drag and drop a Button component onto the canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnMenu.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Navigate.

4.

Navigate to the Actions settings

5.

Under Action Type, click Event.

6.

Click Save Component.

Configure the Menu Component

Configure a Menu component to anchor to the Button component. You can also configure options based on your needs.

1.

Drag and drop a Menu component onto the canvas, placing it below the initMenu  Initializer component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter menuNav.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter menuNav.

4.

Under Anchor Location, in the propertyID field, enter btnMenu. This attaches the menu to the Button component in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..

5.

Navigate to the Data settings.

6.

In the Values table, enter the following:

7.

Click Save Component.

Configure the Button Component's Operations Builder

1.

Open the Button component's configuration pane.

2.

Navigate to the Actions settings.

3.

Next to Events & Operations, click Edit.

4.

From the Add Event* drop-down, enter or select the On Click event.

5.

In the Operation Type* field, enter or select TOGGLE.

6.

In the Summary field, enter Open Menu on Button Click.

7.

In the Target Key* field, enter or select menuNav.

8.

In the Property* field, enter open.

9.

Click Save Operation to close the New Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.

10.

Click Save Component to close the Operations Builder modal A modal is a window that appears on top of the content you are currently viewing..

11.

Save your module.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Click the Navigate button to display the menu:

Structure of a Menu Component's Data

Using the example above, execute the Vega Console command UNQENG.tools.getComponentState('imageLogo') in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. to display the component's data structure:

Overview

The Menu component is a Primary Fields component that attaches a drop-down list of customizable options to an element. For example, if your page has a Button component labeled Settings, and you want to display options when an end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. clicks it, use the Menu component to create the drop-down effect.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Adding a Menu Component

In this example, configure a Button component to trigger a Menu component.

These instructions assume that you have an open module saved with a title.

Configure the Button Component

The Button component acts as the visual anchor for the menu. Your end-users click the button to display the menu underneath.

1.

In the Module Builder, drag and drop a Button component onto the canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnMenu.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Navigate.

4.

In the component's configuration menu, click Actions.

5.

Under Action Type, click Event.

6.

Click Save & Close.

Configure the Menu Component

Configure a Menu component to anchor to the Button component. You can also configure options based on your needs.

1.

Drag and drop a Menu component onto the canvas, placing it below the initMenu  Initializer component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter menuNav.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter menuNav.

4.

Under Anchor Location, in the propertyID field, enter btnMenu. This attaches the menu to the Button component in Express View.

5.

In the component's configuration menu, click select Data.

6.

In the Values table, enter the following:

7.

Click Save & Close.

Configure the Button Component's Operations Builder

1.

Hover over the Button component.

A 6-button toolbar displays above the component on hover-over.

2.

Click the (Operations Builder) button. The Operations Builder modal A modal is a window that appears on top of the content you are currently viewing. displays.

3.

In the Select an Event  | ▾ field, enter or select the On Click event.

4.

Click Add. The New Operation configuration menu displays.

5.

In the Operation Summary field, enter Open Menu.

6.

In the Operation Type field, enter or select Toggle.

7.

In the Target Key field, enter or select menuNav.

8.

In the Property* field, enter open.

9.

Click Save Operation to close the New Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row.

10.

Click Save & Close to close the Operations Builder modal.

11.

Save your module.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Click the Navigate button to display the menu:

Structure of a Menu Component's Data

Using the example above, execute the Vega Console command UNQENG.tools.getComponentState('imageLogo') in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. to display the component's data structure: