Menu elements are used to facilitate user navigation within the application and provide access to contents. These elements are usually found in the application's header or side panels, offering users the opportunity to navigate to different sections. By opening the Menu, users can navigate to different screens, filter contents, or interact with other screens.

For example, you can use the menu element to consolidate all of a company's applications under one umbrella.

In short, the Menu element classifies the screens within the application hierarchically and assists in navigation.

The menu element is supported only in web applications.

The Menu element is an important tool to enhance user experience and make in-app navigation more user-friendly. During the app development process, the design, content, and functionality of the Menu should be carefully considered.

To use the Menu element, select the Menu element in the Display category of the Elements panel and easily add it to the screen by drag and drop.

There is a table named KMenu in the Datasource view mode. Default screens for the Menu element will come with this table in the future days. Depending on the user's request, this table can be used.

In the Screens panel on the left side, you can create a Master Screen by clicking on the + icon next to Master Screen. Depending on the created Master Screen, it's possible to adjust the display structure of the Menu element. For example, let's choose the Master screen with a Vertical Stack, Header, and Footer structure.

If the Menu element is added to the Vertical Stack (Left Menu), the menu element is displayed vertically, aligned to the left. However, if the Menu element is added to the Header or Footer area, the menu element is displayed horizontally.

The Menu Properties panel opens on the right when you click on the Menu element and is where you can adjust and change the properties and contents of the Menu element. The panel includes features such as Select a Data Type, Options, Theme, Primary Color, Collapsed, Selected Key, Authorization, and Visibility.

3.1. Select Data Type

It's where the Menu element data is selected as Static or Dynamic.

Properties panels is different appear based on the choice made in the Select box.

When Static is selected, since the structure will be created manually, fields like +Add Sub Menu and +Add Menu Item appear.

Inside the Menu element, you can add sub-menus by clicking on +Add Sub Menu and menu items by clicking on +Add Menu Item.

You can name them by clicking on the Sub Menu or Menu Item in the Menu element and using the Label field in the Properties panel.

When Dynamic is selected in Select a Data Type, the Static selection automatically disappears. For data to come to the Menu element as Dynamic, a data table must be in the Datasource.

For example, let's create a data table named test Menu that has columns Icon, Id, Link, ParentId, and Title.

To call this table into the screen you are working on, you need to create SQL Actions in the Custom Actions panel on the left.

After naming the SQL Actions you created as getMenu, right-click the table you selected from the left panel and click Add Select Query from the list that appears.

Create the SQL Action that contains the query SELECT * FROM testMenu by clicking the CREATE button.

Then click +ADD ACTION and call the action to the screen you're working on by typing getMenu in the Search box that opens.

Then, with Dynamic selected, go to the Options area in the Properties panel. Select getMenu from the Selectbox.

3.2. Options: Fill in the Options area according to the table you are connected to.

In addition to the properties in the Menu element properties panel, there is an Icon field in the Sub Menu and Menu Item properties Panel.

You can easily add icons to Menu Items and Sub Menus, which you can add as Dynamic and Static.

To get data as Dynamic, you need to pull the data from the table. To add an icon as Static, click on the area where you want to add the icon in the Menu element. In the panel that opens, click on the icon area. Select the icon you want to add.

3.3.Mode

You can set how the Menu element is displayed on the screen with the Horizontal and Vertical options in Mode.

Horizontal Mode:

In horizontal mode, the contents of the menu element are arranged side by side.
It's usually used in horizontal areas such as the top title bar or the bottom title bar.
This layout can be preferred, especially when there are many options, as it provides horizontal outreach to view more items.

Vertical Mode:

In vertical mode, menu element contents are stacked on top of each other.
It's usually used in side panels or menu bars.
This layout is useful for arranging and accessing more elements in a limited area. A vertical layout may require the user to scroll down to view the options.

3.4.Theme

The Theme area in the Properties panel is where you choose the theme color for the Menu element. The Menu element has two themes, Light and Dark.

3.5. Primary Color

It's the area where you select the tab color that becomes active when you click on the Menu element.

3.6 Collapsed

In the Menu element, this feature indicates whether a dropdown Menu or section is initially hidden or in a collapsed state.

If you want to collapse the Menu, you need to activate the Switch from the Fixed Value area.

Depending on how you want the Menu element to be displayed when the application is started, you can assign a value with the Symbol Picker.

3.7 Selected Key

It is used to indicate which screen the user has selected in the menu. For example, when clicked on a smartphone under the Electronics category, the Selected Key value of the screen where the smartphone is located represents the ID or unique key of the selected screen.

You can select Key operations related to the screen with Symbol Picker.

3.8. Authorization

You can use Authorization options for the menu element. To perform authorization actions for the menu element, follow these steps:

Click on the Menu displayed on the screen to select it.
Open the Properties panel.
Click on the Authorization field.
You can use the following options according to the application visitor and/or users:

To ensure that all logged-in users can view the application, select All Roles.
If you want it to be visible without user login (the screen must also have this feature before the element), open the Anonymous Access key.
To specify roles for which it should be visible in your developed application, select the roles for which access will be enabled.

3.9. Visibility

You can manage the visibility of the element. It can always be visible, hidden, or can be made visible or hidden based on a condition.

To configure the Visibility settings of the menu element, follow these steps:

Click on the Menu on the screen to select it.
Open the Properties panel.
Click on the Visibility field and choose one of the following options according to your application's needs:

Select Always visible from the dropdown to make it visible at all times.
You can hide the element by selecting Hidden.
Choose Sometimes visible to make it visible based on conditions you'll add.

Based on your selection, the visibility of the Menu will be configured.

3.10 Actions

By clicking on +ADD ACTIONS inside the element or on the screen, you can easily add system actions that Kuika offers. There are actions related to the Menu element such as Get All Menu Items and Get Authorized Menu Items.

Last updated 5 months ago