Vega 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.

About the Configuration Window

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

Display Panel

A static image displaying the Menu component's Display settings.

Field Text

Setting

Description

Label Text

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

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Anchor Location

Setting

Description

propertyID

To attach the Menu component to another component, enter the component's Property ID. For example, enter a Button component's Property ID in this field to attach the Menu component to the button. In Express View, when an end-user clicks the button, the menu displays below it.

Default State Options

Setting

Description

Hide Field

Shows or hides the component from view. Setting the Hide Field toggle to (ON) hides the component in Express View. Setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder.

By default, the Hide Field toggle is set to (OFF).

Data Panel

A static image displaying the Menu component's Display settings.

Data

Setting

Description

Data Source Type

Use the Values table to create individual options in the menu. End-users open the menu to see each of the options in a list, the option's adornments, and click on the option to trigger its action.

Key

Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: menu1, menu2, menu3.

Option Label

Enter the text that displays to the end-user. When an end-user clicks the text, the Action setting fires.

Action

The action triggers when an end-user clicks the Option Label text. Enter a Vega Operation to perform, or a Property ID to trigger.

Adding a Menu Component

In this example, configure a Button component to trigger an Initializer component. Then configure the Initializer component to trigger a Menu component.

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

What You Need

For this example, you need a Vega module and the following components:

Configure the Button Component

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

1. In the Module Builder, drag and drop a Button component Icon 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 Icon Actions.
5. Under Action Type, click Event.
6. In the On Click field, enter initMenu.

You'll configure the initMenu Radio Button component icon Initializer component in the next step.

7. Click Save & Close.

Configure the Initializer Component

Next, you'll configure an Initializer component's Outputs table to fire a Vega operation and open the Menu component.

1. Drag and drop a Radio Button component icon Initializer component onto the canvas, placing it below the btnMenu Button component Icon Button 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 initMenu.
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 initMenu.
4. In the component's configuration menu, click Actions Icon Actions.
5. In the Outputs table, enter the following:

 

Property ID Type Value

1

menuNav

vegaOperation

{ "type":"TOGGLE", "options":{ "property":"open", "targetKey":"menuNav" } }

This output targets the menuNav Menu component and opens it using a Vega operation.

You'll configure the menuNav Menu in the next step.

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 Radio Button component icon 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 Icon Data.
6. In the Values table, enter the following:

 

Key Optional Label Action Left Adornments Right Adornments

1

menu1

Option A

 

 

 

2

menu2

Option B

 

 

 

3

menu3

Option C

 

 

 

A static image displaying the Menu component's Data Values table. The first three rows are filled out with Options.

You can configure options to perform a certain function using the Action setting. For example, each option could direct the end-user to another module, reveal hidden components, trigger a workflow, and so on.

7. Click Save & Close.
8. Save your module.

Preview your module in Express View Express View is how your end-user views you 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:

A static image displaying a Menu component in the DevTools Console view.

Resources