1. Outline

When developing an application, there may be cases where the number of menus and items required becomes too large to fit on the screen.

In such cases, a menu that opens and closes by tapping or clicking a button, so-called an accordion menu, can be used to secure the display area and display only the necessary items and data.

【Screen】Sample of accordion menu

Create a menu that opens and closes by tapping (clicking) a button

Unifinity can achieve this by using the following features together

Screen: "Subform" control
DB: Manage hierarchy required for accordion menus
Processing: Opening and closing the menu performed with each tap (click)

2. Creation Method

2.1. Screen Preparation

Two screens are provided below.

App screen
Screen to be used as an accordion menu

Within the application screen, 2. is used as a "sub form," so place the sub form where you want the accordion menu to appear.

2.2. Creating screens for accordion menus

From here, we will actually create the accordion menu.

The characters to be displayed are controlled by 【DB】 and 【Processing】, so here "one line item" is created.

This screen consists of the following elements

Parent Category
subcategory
Category ID for data * Since this control is required for 【Processing】, uncheck "Display" from "Object" in the property area and hide it. This is the green area in the screen. You can check it from "Controls" in the property area.
open/close button

Since the controls need to be stacked, they are colored differently to make them easier to distinguish.

　The green control is the "Category ID for data.

　In the sample, "Display" is checked, but this is unchecked.

Buttons used for opening and closing are registered in [Resource].

Set "0" and "1" for "Keyword" to relate to the process, respectively.

2.3. DB Creation

The DB is used to configure the accordion menu and to manage the open/close status.

Prepare a table like the one attached. Please refer to the sample project for a description of each item in the "Remarks" section.

2.4. Creating a process

Create a process to link the control prepared as a sub form and the DB created in 3.

The process is roughly divided into three parts.

Get the current row of the parent category
Manage the opening and closing of accordion menus
Screen Update

The following is a step-by-step explanation.

2.4.1. Get current row of parent category

Set the process name. The sample is named "record".

First, select "Dataset/Get Current Row" from the component.

Select "1. Screen to be used as Accordion Menu" for "Form" and "01. Parent Category" for "Control.

Next, select "Dictionary/Acquisition" from the components. The name of the process is "category_id". This name is also used for "key".

The "Target" is "Takeover of results" and the process is selected as described above (RECORD).

The "key" is "character" and should be a string of characters similar to the process name. In the sample, it is "category_id".

2.4.2 Managing the opening and closing of accordion menus

We will associate the process with the DB created in section "3. Use if to create processing depending on when the menu is opened or closed.

2.4.3. Screen Update

Tap (click) to refresh the screen and toggle the open/close status of the menu.

2.5. Place the created process on the screen

Return to the【【Screen】and embed the process you created in the control. The "+" button is used to open and close the menu, so set the process to the "Open/Close Button" control in "1.

With "03. Open/Close Button" selected, set the process you created ("Spread" in the sample) from "Execution Process" in the "Behavior Setting" tab in "Object".

You can check the actual operation by pressing the "Run (F5)" button in Unifinity Studio, so please try it out.
Once completed, match the colors of the controls in the subform to the application to create a natural layout.

3. Sample application

You can download it from the following link