Menu elements are used to make it easier for users to navigate through the application and access content. These elements are usually located in the Header or side panels of the application and allow users to navigate to different sections. By opening the Menu, users can switch to different screens, filter content or interact with other screens.
For example, you can use the menu element to bring all the applications of a company under one roof.
In short, the Menu element is the element that helps to hierarchically classify and navigate the screens within the application.
You can create a Master screen by clicking the + icon next to the Master Screen at the bottom of the Screens panel in the left panel. It is possible to adjust the display structure of the Menu element according to the created Master Screen structure. For example, let's select the Master Screen with Vertical Stack, Header and Footer structure on the left side.
If the Menu element is inserted in the Vertical Stack (Left Menu), the menu element is displayed vertically, justified to the left edge. However, if the Menu element is added to the Header or Footer region, the menu element is displayed horizontally.
Menu Properties panel, to view the properties of the menu element you added with Master Screen, select the element and open the Properties panel. This is the panel where you can set and change the properties and contents of the Menu element.
This panel contains the following properties:
1. Select Data Type: You can configure the data in the menu element as Static or Dynamic. The Properties panel options differ depending on the data type selection.
Sub Menu: Adds an element with sub menu items.
Menu Item: Adds a single level menu item.
You can add menu items to the Menu element with “+ Menu Item” and items with submenu with “+ Sub Menu”. Under each added SubMenu item there are Menu Item and Sub Menu buttons. With these buttons you can also add items under the selected menu item. In the open configuration area, you can edit the name of each menu item by selecting the items that have been added to the Menu element, and you can add buttons for each menu item.
For example, let's create a data table with Icon, Id, Link, ParentId, Title columns in “FirstMenu”:
2. Options: When menu item contents are fed dynamically, the Options field is opened. This field is displayed when Dynamic is selected in “Select a data type”. This section allows you to select the specific action for the data source from which the menu will be fed.
You can examine the sample data table that feeds the menu items on the image below.
3. Direction: You can define how the menu element will be displayed on the screen horizontally or vertically.
4. Theme: The Theme area is where the theme color of the Menu element is selected in the Properties panel.
There are two themes for the Menu element, Light (Light/White) and Dark (Dark/Black).
5. Primary Color: This is the field where the color of the valid, validated or selected item in the menu items is defined, regardless of the theme color. You can choose one of the predefined colors or define a custom color from the color picker window that opens by clicking on the Color field. For example, when the color red is defined, the Menu element will look like this.
The light and dark tones used in the background color used in the coloring of the menu items are automatically generated from the color you choose.
6. Collapsed: In cases where no icon is defined in the menu element, it allows the menu to be displayed based on the first letter of the related item and the menu to be placed in a narrow area. With this feature, the menu opens in a collapsed version and the screen space is used efficiently. When menu items with sub-menus are selected, the sub-items are listed separately.
When you activate the switch in the Collapsed field, the menu is also displayed collapsed in the design environment. Using Symbol Picker options, you can make this process collapse or expand dynamically. For example, if there is an additional area on the screen that will be displayed under certain conditions, you can collapse the menu item when this additional column is opened, making the visible content easier for end users to view.
7. Selected Key: Used to indicate which screen the user has selected in the menu. For example, when clicking on Smartphone under the Electronics category, the Selected Key value of the screen with the smartphone represents the ID or a unique key of the selected screen. With Symbol Picker you can select Key operations related to the screen.
8. Collapsible: You can add a button to the Menu element that allows end users of the application you are developing to expand and collapse the menu.
When you turn on the Collapsible switch, an icon button is added to the bottom edge of the menu items. This button can be used by end users to collapse and expand the menu.
9. Collapsed Button Color: Allows you to set the color of the collapse/expand icon button added with the Collapsible property. Collapsed button of Menu element is colored blue by default.
You can set the background color of the icon button with the color picker window that opens.
You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.
For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.
It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.
Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, GeoLocation, Local Storage, Multi Language, Navigation, Notification, Payment Stripe, UI Control, Trigger, Process Automation, Process Administration and String Operations.
In addition to system actions, you can also use SQL actions that you create yourself.
You can use the +Add Action button in the Properties panel to add actions to the elements.