UI

"UI" is a definition about the application screen. The UI editor allows you to layout components and define actions in response to component events (such as button clicks).

Create

There are two types of UI: UI and Authentication UI.
The former is a user-created UI and is used for normal screens. Authentication UI, on the other hand, is a UI related to authentication that is prepared in advance by the service. The authentication UI can be partially modified in terms of layout.

UI

To create a new UI, click the "UI" icon from the side menu to display the UI list. A new UI can be created by the following operations.

1. Select "Add UI" from the "ADD UI" button in the same panel.
2. Enter information in the "ID" and "Label" fields in the dialog and click the "Add UI" button.

Authentication UI

The authentication UI is pre-created when the application is created.
Select "Authentication UI" from the"Selection List" at the top of the UI list panel.

The authentication UI provided built-in is as follows:

Label	Description
Sign In ID	Sign In screen
Sign in Password	Password input screen
Sign in New Password	Password change screen (during initial sign-in)
Sign In MFA	MFA (multi-factor authentication) screen
Sign Up Form	Sign Up screen
Sign Up Verify Email	Sign-up confirmation code entry screen
MFA Setting Step1	MFA (multi-factor authentication) enable/disable selection screen
MFA Setting Step2	MFA (multi-factor authentication) setup screen
Reset Password Step1	Password reset screen
Reset Password Step2	Password reset screen
Change Password	Password change screen
Sign out	Sign-out screen
Terms and Conditions	Terms of Use screen

Note

• For the authentication UI, design changes that do not affect the operation, such as label changes, image changes, layout changes, size changes, image additions, typography are allowed.

• Canvas actions can be set in the authentication UI. However, please note that executing the nextUI function in the canvas action will cause an infinite loop.

• Please note that changes that affect the behavior, such as changing IDs, adding actions, changing click events, may not result in the expected behavior.

• SEO can be set in the authentication UI.

• To perform external authentication via IdP, place a push button for external authentication on the sign-in screen and set the following.

  • Select click event "IdP"
  • Enter the identity provider name registered in the user manager’s IdP in the IdP field

• Custom attribute items can be added to the sign-up screen. By setting the following fixed ID, the value entered in the custom attribute item during sign-up will be registered as user information.
  Please note that if the ID is incorrect or is not a usable component, it will not be registered as a custom attribute value.

ID	Component	Description
custom_01	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_01".
custom_02	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_02".
custom_03	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_03".
custom_04	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_04".
custom_05	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_05".
custom_06	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_06".
custom_07	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_07".
custom_08	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_08".
custom_09	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_09".
custom_10	See "Available Components" below	Register the value in the item with the custom attribute ID "custom_10".

Available Component List

Component
Text Field
Text Area
Number Field
Big Number
Search Field
Password
Select（Multiple selection OFF）
Combo Box
Radio Group
Rating
Slider
Date Picker
Time Picker
Date Time Picker

Edit

UI can change ID and label.
Select "Menu" - "Edit" of the UI you wish to edit from the UI list.

Delete

To delete a UI, select UI "Menu" - "Delete".

UI Copy

The UI can be copied and inserted into the specified application. Select "Menu" - "Copy UI" of the UI you want to copy from the UI list.

Search

The UI can be filtered from the search field at the top of the panel.

Export

UI definitions can be downloaded locally as files. This can be done by selecting "Menu" – "Export" in the UI.

Import

UI definitions exported locally can be uploaded to the service. Select "Import" from the "Create UI"button in the upper right corner of the UI list. Select the UI definition file from the "Import"dialog and perform the upload. UI definitions can only be imported between UIs of the same application type.

Export source application type	Import Destination Application Type	Support
Desktop	Desktop	o
Mobile	Mobile	o
Desktop	Mobile	x
Mobile	Desktop	x

Note

When importing exported UI definitions, the database name and file path must be changed depending on the import destination environment.
Modify the properties and action definitions in each component according to the environment of the import destination.

Commit

The user can commit an app definition to repository with the application definition against commit.

Screen transition diagram

Screen transition diagrams can be output for transition relationships between UIs included in the application definition. UI blocks can be moved/resized, and link connection points can be moved.
The components of a screen transition diagram are as follows

Components	Diagram	Description
UI Block	Rectangular block	Displays UI label
Link	Line	Displays an arrow from source to destination.

Output

Screen transition diagrams can be output in one of the following ways

• Select "UI menu (right of ADD button)" - "Screen Transition" from the upper right corner of the UI list.
• Select "UI Menu" - "Screen Transition"

Note

• When a screen transition diagram is output by selecting"Menu" -"Screen Transition" in the UI, the UI block that triggered the display is displayed as currently selected when the screen transition diagram is displayed.

• If authentication is set in the application settings, the authentication UI is also displayed as a UI block. Authentication UI blocks are displayed in green.

• When the screen transition diagram is initially displayed, all UI blocks are the same size. Therefore, if the UI labels are long, they will be displayed in three-point leader notation. Adjust the size of the UI blocks and adjust the display of UI labels.

Save

Information on UI block placement/size changes and link connection point changes can be saved by clicking the "SAVE" button on the toolbar of the screen transition diagram.

Note

The shortcut "Ctrl + S" can be used to save the file.

Transition to UI definition

Clicking the context menu "Open UI" of a UI block in the screen transition diagram will take the user to the target UI definition.

Display Selection

Initially, all UIs included in the application definition are selected, but can be deselected at any time.

1. Click on the toolbar "Select Display" on the screen transition diagram.
2. A dialog box for selecting display items will appear.
3. After selecting the display, click the "Apply"button.
4. To save the display selection, click the toolbar"Save" button.

Export

By clicking "PNG Output" on the toolbar of the screen transition diagram, the screen transition diagram can be exported in PNG format.

Deployment Reset

Clicking on the "Deployment Reset" toolbar on the screen transition diagram resets the changed information (UI block placement position/size changes, link connection point changes) of the screen transition diagram and returns it to the state of the screen transition diagram at the time of initial display.