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.
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. |
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). |
Anchor Location
|
Setting |
Description |
|---|---|
|
propertyID |
To attach the Menu component to another component, enter the component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.. For example, enter a Button component's Property ID in this field to attach the Menu component to the button. 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., 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 the button, the menu displays below it. |
Data Panel
Values
|
Setting |
Description |
|---|---|
|
Data Source Type |
Use the Values table to create individual options in the menu. End-users 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. 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. |
|
Label |
Enter the text that displays to the end-user. When an end-user clicks the text, the Action setting fires. |
|
Value |
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. |
|
Action |
The action triggers when an end-user clicks the Option Label text. Enter a Vega Operation to perform or a Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. to trigger. |
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. |
You'll configure the btnMenu Button component's Operations Builder settings after configuring the Menu component.
| 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: |
|
|
Label | Value | Action |
|---|---|---|---|
|
1 |
Option A |
menu1 |
|
|
2 |
Option B |
menu2 |
|
|
3 |
Option C |
menu3 |
|
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 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.
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 A Property ID is the unique field ID used by Unqork to track and link components in your module.. For example, enter a Button component's Property ID in this field to attach the Menu component to the button. 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., 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 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 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. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. to trigger. |
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. |
You'll configure the btnMenu Button component's Operations Builder settings after configuring the Menu component.
| 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: |
|
|
Key | Optional Label | Action | Left Adornments | Right Adornments |
|---|---|---|---|---|---|
|
1 |
menu1 |
Option A |
|
|
|
|
2 |
menu2 |
Option B |
|
|
|
|
3 |
menu3 |
Option C |
|
|
|
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. |
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:
Resources
