Menu

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

The menu element is usually added to the Master Screen. With master screens, the top, left, right or bottom edges of other screens can be managed through the master page. This allows you to allocate the corresponding edge of the screen for the top menu, tabbar or left menu in your application only for these contents.

2. In the “UI Design” module, you can create a Master Screen by clicking the “+” icon next to Master Screens in the Screens panel on the left side.

3. Then drag and drop the Menu element (3) under the “Navigation” (2) category from the “Elements” (1) panel to one of the left, top or right side areas you want to use.
4. You can use the Direction parameter from the Properties panel with the menu element selected to set the orientation (horizontal/vertical) of the menu according to the area you added.

If the Menu element is inserted in the Left Menu, it will be displayed vertically, justified to the left edge. However, if added to Header or Footer, it will be 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.

The application you develop can support multiple languages. You can manage and translate languages from the Languages panel on the left side.

You can also translate the texts in the Menu element you added in other languages that you include in your app. From the moment you add the Menu element to your app, any changes such as adding, removing or renaming a menu item are instantly updated in the Translate window. You can add a new menu item and add its translation. By using the menu element with Master Screen, you can perform the translation process centrally on the template screen.

To add multilingual support to a menu element:

1. Open the application to which you added the menu element.

2. Go to the "Languages ” panel on the left panel.

3. Click the “+” icon next to the Languages title.
4. Select and name the language you want to add from the "New Language ” pop-up.
5. Then click on the "CREATE ” button.

Thus, you have added multi-language support to the Menu element.

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.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

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

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.

Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.

In addition to system actions, you can also use SQL actions that you create yourself.

To add actions to elements, you can use the “+ADD ACTION” button from the Properties panel on the right side.