Menu

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 a Data Type,
2. Options,
3. Direction,
4. Theme,
5. Primary Color,
6. Collapsed,
7. Selected Key,
8. Collapsible,
9. Collapsed Button Color,
10. Authorization,
11. Visibility.
    

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.

• Static: The type in which you configure menu items (including main menu and submenu items). If you do not give a name to the element, a configuration field will open with an automatic name (for example: Menu1). Under the title comes the field for “+ Sub Menu” and “+ Menu Item”.

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.

• Dynamic: Static hides the options for adding items that are displayed as a result of the selection. This section is replaced by a list under “Options” where you can select the specific action of the data source from which the menu items will be dynamically retrieved.

For example, let's create a data table with Icon, Id, Link, ParentId, Title columns in “FirstMenu”:

• Create SQL Actions in the “Custom Actions” panel on the left panel to call the table on the screen you are working on.
• Name your SQL Actions as “getMenu”. Select the table from the left panel, right-click and click “Add Select Query” from the drop-down list and create the SQL Actions containing the SELECT * FROM FirstMenu query by clicking the “CREATE” button.
• Then click “+ADD ACTION” and type “GetMenu” in the Search box and call the action to the screen you are working on.
• Finally, select “getMenu”from the Options field in the Properties panel with Dynamic selected.
  

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.

To be able to edit the data in this data table you have created for the menu, you can use the CRUD Wizard to create screens for listing, adding and editing new items in a few clicks.

3. Direction: You can define how the menu element will be displayed on the screen horizontally or vertically.

• Horizontal Direction: In landscape orientation, menu items are arranged side by side. It is usually used in horizontal areas such as the top title bar or the bottom title bar. It is preferred when a large number of options need to be displayed because it increases visibility by placing more items horizontally.
• Vertical Orientation: In vertical orientation, menu items are aligned to the top edge and sorted downwards. Usually used on left or right side panels or menu bars. It is useful for organizing and accessing more items within a limited space. A vertical layout may require the user to scroll down the options.
  

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.

Collapsed, unlike Collapsible, allows the menu to open in its collapsed version by default on the page where it is located.

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

These methods allow you to create a personalized and secure environment in your app.

This is where the visibility of screens or elements is set. Visibility in Elements allows you to regulate visibility based on a specific state and/or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

This is the section where the visibility structure of your screen is set. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that screens in your app are always visible.‍
• Visible: Makes the screens in your app visible.‍
• Hidden: Allows hiding screens in your app.‍
• Sometimes Visible: Makes screens in your app conditionally visible.

Visibility Operations on Elements or Screens

You can follow the steps below to adjust Visibility settings in elements or on your screen:

1. Click on the element or screen on the screen to make it selected.
2. Open the Properties panel.
3. Click on the Visibility field and make one of the following selections according to the needs of your application.
   • You can make it always visible with Always visible in the Selectbox.
   • With Hidden you can hide the element.
   • ‍Sometimes visible allows you to make it visible according to the conditions you add.

The visibility of the element will be adjusted according to the selection you have made.

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.