Form Application Creation

Create a form application that allows you to save and browse data from the UI.
After completing the steps of the wizard, create the UI definitions and data storage tables that will configure the application.

Tips

Tips

Form application creation is a function available only for desktop applications.

Preparation

First, create the form UI. Any component can be placed. However, only input category components can register data excluding file components.

Start wizard

1. Select the canvas and right-click to open the context menu.
2. Select [CRUD] - [Start wizard] from the context menu.
3. A wizard dialog will appear and you should follow the instructions.

Steps Explanation

The wizard consists of 4 steps. Each step is described below.

Step 1. Component Selection

Among the components that make up the form, select the component that saves data in the table. The component selected here determines the table configuration and the action details of the component.

Tips

Tips

You can change the column order of table columns. If you change the order, drag and drop rows to change the order.

Step 2. Data List Column Selection

Select the columns to be displayed in the data list from the components that make up the form.

Tips

Tips

You can change the column order of table columns. If you change the order, drag and drop rows to change the sort order.

Step 3. Database Selection

Enter the destination database selection and table name where the form entries will be saved as records. Creates a table with the specified table name for the selected database. Also, select the response for existing tables, non-target columns, and primary keys.

Item	Options	Remarks
Database	Database of the currently selected execution environment
Table Name	Selection of tables contained in the selected database	To create a new table, enter a new table name in the Table Name field and click on the option labeled “Add Table Name”.
Existing Table	- Delete and create - Update	If you select [Delete and create], the existing table will be deleted and a new table will be created, so we recommend that you back up the table. If you select “Update”, added/updated columns will be updated for the existing table.
Excluded columns	- Leave it as it is - Delete	If you select “Leave it as it is”, table columns that are not included in the component selection in Step 1 will remain. If you select “Delete”, table columns not included in the component selection in Step 1 will be deleted.
Primary key column	- Auto Create (ID) - Selection	When “Auto Create (ID)” is selected, the following columns are created as primary keys. Constraints Column Name Data type Supplement PK/AI ID INT 8-digit zero padding with LPAD function If you select “Select”, select the component to be the primary key in the “Primary key component” item.
Primary Key Components	List of component IDs that have been selected in Step 1 and for which a primary key can be set	Create a table with the columns of the selected components as primary keys. Components for which primary keys can be set are as follows. - Text input - Numeric input - High-precision numerical value - Select box - Combo box

Tips

Tips

• If “Delete and Create” is selected for an existing table, it is recommended to backup the table in order to delete the existing table and create a new table.
• If “Auto Create (ID)” is selected for the primary key column and there is a column whose component ID is “ID,” an error will occur. Either change the component ID or do not set the primary key column to auto-create.

Step 4. Select Options

Specifies whether or not the database name is directly specified in the SQL statement to be created; Also select the response to the action definition.

Item	Options	Remarks
Assign DB name to the SQL function to be generated	- ON - OFF	- If ON, the generated SQL specifies the database name for the object. - If OFF, the generated SQL does not specify a database name for the object, assuming that an existing database is used.
Action	- Overwrite existing code - Comment out and add existing code	- If “Overwrite existing code” is selected, all action descriptions will be overwritten. - If you select “Comment out and add existing code,” the existing block of code will be commented out as shown below, and the new code will be added on top of the commented out block of existing code. [Image of Action Code] new code1 new code2 new code3 // old code1 // old code2 // old code3

Tips

Tips

• If you have turned off the “Assign DB name to SQL functions to be generated”, be sure to configure the default database in the application settings screen.

Output

UI Editor

After going through and completing all the steps, the following components and UI will be the output.

UI	Component or UI	ID	Label	Display or Operation
User Created Form UI	Typography	display_id		Display the Primary Key Data
	Button	save_generated	SAVE	Register the form contents in a table.
	Button	update_generated	UPDATE	Update form contents to table.
	Button	delete_generated	DELETE	Delete form content.
	Button	back_generated	BACK	Display UI to browse data list.
List_{Form UI ID}	UI	List_{Form UI ID}	List_{Form UI ID}	Display a list of data.
	Button	new_record	NEW RECORD	Transition to the UI for registering new data.
	Data Grid	data_list		The data list is displayed in a data grid.
	Data Grid Column	SELECT_ITEM		When you press the button, you will be taken to the editing UI.
	Data Grid Column	ID	ID	In step 3, [Primary Key Column: Auto Create (ID)] is selected, it will be created.
	Data Grid Column	{Form UI Component ID}	{Form UI Component Label}	The columns to be displayed selected in step 2 will be created.

Tips

Tips

The data grid (datalist) columns of the list view UI (List{Form UI ID}) generated by the form application creation the column type is automatically selected by the original component. After creating the form application, please manually change the column type if necessary.

Component	Data Grid Column Type
Text Field	Text Input
Text Area	Text Input
Number Field	Text Input
Big Number	Text Input
Search Field	Text Input
Password	Text Input
Select	Multi-Select
Combo Box	Combo box
Radio Button	Checkbox
Radio Group	Text Input
Checkbox	Checkbox
Checkbox Group	Text Input
Switch	Checkbox
Rating	Checkbox
Slider	Text Input
Spreadsheet	Text Input
Date Picker	Date Picker
Time Picker	Text Input
Date Time Picker	Text Input
Data Grid	Text Input

Table

After going through and completing all the steps, create the tables according to the selected components. The column name is the ID of the component as it is. The data types and sizes of the columns are as shown in the table below, depending on the component.

Component	Data Type	M	D
Text Field	VARCHAR	100
Text Area	VARCHAR	1000
Number Field	DECIMAL	10	3
Big Number	BIGINT
Search Field	VARCHAR	100
Password	VARCHAR	100
Select	VARCHAR	100
Combo Box	VARCHAR	100
Radio Button	TINYINT
Radio Button Group	VARCHAR	100
Checkbox	TINYINT
Checkbox Group	VARCHAR	100
Switch	TINYINT
Rating	INT
Slider	INT
Spreadsheet	LONGTEXT
Date Picker	VARCHAR	100
Time Picker	VARCHAR	100
Date Time Picker	VARCHAR	100
Data Grid	TEXT

Create form application with previous contents

After creating a form application, you can re-create it with the wizard settings from the previous creation.

1. Select the canvas and right-click to open the context menu.
2. Select [CRUD] - [Execute Previous]from the context menu

Tips

Tips

• “Execute Previous” menu is enabled when there is a history of the last time the file was created.
• The wizard dialog will not be displayed when using the “Execute Previous” menu.
• If any components have been added since the last time they were created, the following behavior will occur.
  • The data grid in the listing UI is updated by adding a column to the tail column.
  • Tables are updated by adding a column to the last column.
• If any components have been deleted since the last time they were created, they will be removed from the action definition, the datagrid of the Listing UI, and the table.
• ” Execute Previous ” can also be executed via shortcut keys.

Clear previous settings

You can clear the settings of the wizard when you create a form application.

1. Select the canvas and right-click to open the context menu
2. From the context menu, select[CRUD] - [Clear History].