Vega Menu Component

Estimated Reading Time:  6 minutes

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.

Additionally, you can use the adornments Adornments are icon images designed to help users visually understand a selection's meaning. For example, the "Gear" icon is a common adornment used to represent a settings page. setting to apply an icon to each menu option. For example, place a (profile) icon next to an option that links to an end-user's profile page.

About the Configuration Window

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

Display Panel

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

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.
Left Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the left side of the Option Label in Express View.
Right Adornments	Select one or multiple adornments from the Adornments table. Places the adornment to the right side of the Option Label in Express View.

Adornments Panel

Adornments

Setting	Description
Key	Enter a key value to reference the adornment. For example, if your adornment is an email icon, enter a key value of email.
Source Type	Choose how to retrieve the icon. You can retrieve icons from the following sources: URL: Enter an image URL. The following formats are accepted: .png, .jpg, .webp, .svg, and .avif. TIP  To insert images from Managed Assets, enter the following into the Source Type field: {{data.getEnv.REMOTE_ROOT}}assets/[filePathAndName.svg]. Replace [filePathAndName.svg] with the folder path and image file. For example, {{data.getEnv.REMOTE_ROOT}}assets/application1/profile_icon.svg. CSS: Enter a CSS class to insert as an adornment. Optionally, you can insert text as an adornment by using the CSS content property. NOTE  To display CSS icons in Express View, assign the preview style to the CSS file that contains the CSS icon. Font Awesome: Enter a Font Awesome specific icon value. For example, the Font Awesome (profile) icon is: fa fa-regular fa-user. NOTE  To display Font Awesome icons in Express View, assign the preview style to the CSS file that references the Font Awesome font library.
Source	Depending on the Source Type, specify the URL, CSS Class, or Font Awesome icon name.
Event Handlers	Enter a JSON format Vega operation to perform.

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.

NOTE  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:

• 1 Button component
• 1 Initializer component
• 1 Menu component

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

In the On Click field, enter initMenu.

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  Initializer component onto the canvas, placing it below the btnMenu  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.

5.

In the Outputs table, enter the following:

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.

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:

Resources

• Modify the Menu component using the toolbar settings.

• Discover more about Vega.

• Learn about the Button component.

• Discover the Initializer component.