Form

What is it? 

After creating a page, you can easily drag and drop a Form onto the page and link it to a specific workflow, according to your application design requirements. By only using a form, your page is now ready to go through different approval processes with different form statuses.

How and When to use it?

To add a new form to your page, simply drag and drop the “Form” widget from the left-hand side of the page screen to the design area of your page.

The Form will appear in the container, and you can easily change its name directly in the Quick Settings Panel.

How to configure it?

Click on the widget once to open its Quick Settings Panel.

Switch of Layout

Switching between Normal forms and Section Forms

Assuming that you have gone through the above tutorials, you can then follow the steps below to create a section table.

Reminder: If you are not required to collect multiple categories of information, you do not need a section form for your page.

After creating a form, click on the widget to open the Quick Settings Panel. In the layout settings, select Section to change the form from a normal form to a section form.

To revert to a normal form, just choose Normal in the layout settings within the Quick Settings panel.

You will notice a section header-formatted container encased within a larger formatted container.

Limitations:

• If you intend to switch the form from Normal to Section, ensure that the form is emptied of any widgets. Before changing to Section forms, remove or drag the widgets out of the normal form.

If you attempt to switch to a section form without first removing the widgets from the normal form, an error message will be displayed and the form cannot be changed to section layout.

Configurations in section layout style

In this section, we will provide you with guidance on the following:

• Reordering sections in section navigation

• Changing the section names in the section navigation

• Modifying the width (Web View) and font style of section navigation

• Renaming section names in the section header

• Customizing the style of the section header, including:

  • • Font size

    • Font Style

    • Background style

    • Collapse/expand icon style

    • Collapse/expand icon colour </aside>

Section Navigation

The Section Navigation is positioned on the left-hand side of the form to display all section names along with corresponding colour indicators. Users can click on a section name within the section navigation to directly navigate to that specific section.

You can discover the potential configurations in the section navigation provided below

Add a new section

To add a new section, click on the + New button. All newly created sections will be named "Section" by default.

You can only rename the section when the section navigation is in editing mode. For more details, please refer to the lower section under "Change to Editing Mode”.

Reorder Sections

You can rearrange the sections by clicking on the reorder button located to the left of the section name, and then dragging and dropping.

Change to Editing mode

After switching to editing mode, you can rename sections and modify the default settings for the Expand/Collapse effect. We will provide you with step-by-step guidance.To change to editing mode, click on the Edit button.

To change to editing mode, click on the Edit button.

Reminders:

1. You cannot modify the section contents in editing mode.

2. If you click the save button of the page builder, any modifications made to the navigation will not be saved.

Click the tick button before clicking Save in the page builder.

Rename Section

In editing mode, the section will transform into an input box that allows users to click and rename directly.

The section name in the section navigation is separate from the name in the section header. To alter the name in the section header, exit editing mode and click on the section header to make the modification in the Quick Settings Panel.

Change the Default Setting of Expand / Collapse effect

The section content for each section will expand/collapse every time the form is opened:

• Expand: Upon opening the form, the section header is displayed, and the section content expands to show the widgets within.

• Collapse: Upon opening the form, only the section header is visible, while the section content remains hidden. 

Here is an example illustrating the expansion and collapse of section content:

Consider adding an input box within each section and configuring "test123" and "test456" to expand, while leaving "Section" set to collapse. Then, click on Preview to see the results.

The examples above indicate that only sections marked with "expand" will display their content when the form is opened.

When a new section is created, it is initially set to be expanded by default. To modify this default setting, click on the toggle to the right of each section name.

Section Layout Property Settings

The Section Layout Property Setting can be used to:

• Change the default settings of the validation indicator status of all sections

• Change the default section navigation style

• Change the default section header style

The Section Layout Property Setting is used to change the validation indicator status of all sections.

To open the section layout property settings, click on the Settings button.

To configure overridden style settings for each section, you can click on the settings button located to the right of each section name.

This will open a popup with section style settings. Turn on the toggle to override the default settings.

Change the default settings of Validation Indicator Status

You can optionally turn on/off the display of each validation indicator. If you turn off the toggle, the colored validation indicator will be hidden.

For example:

If I turn off the toggle that allows the display of violation of compulsory validation.

The red validation indicator will be hidden despite the widget violating compulsory validation. Only the green validation indicator will be shown.

Change the default section navigation style

You can adjust the width for web browsers and mobile devices, as well as the font size and style.

Change the default section header style

You can change the font style of the header and the style of collapse/expand icon style (either ν/∧ sign or +/- sign)

Configurations in section content

Each section content is contained within a formatted container. You can click anywhere in the section content to open the quick settings panel. The quick settings panel for each section's content is similar to the formatted container.

To add a widget to the form, drag and drop the widgets into the section's content area (except the section header). The width of widgets inside will be defaulted to Full width.

Limitations:

• Some types of widgets cannot be dropped into the section content. An error message will be displayed when users attempt to drop these restricted widgets into the section layout form:

  • • Calendar

    • Batch Action Table

    • Container

    • Tab Container

• To move widgets between sections, you need to first move them out, and then move them back in again.

• If users attempt to delete the last section, an error message will appear.

Normal Form VS Section Form

The above are the UI differences between a normal form and a section form. They have different ways of organizing and structuring the form’s layout and content.

The differences are as follows:

The above differences imply the following:

• Normal forms are suitable for situations where the form contains a limited number of fields and doesn't require intricate grouping or organization.

• Section forms are useful for longer forms where clarity and user-friendliness are crucial. They help users navigate through the form more smoothly by breaking it down into manageable parts.

• The choice between using a normal form or a section form relies on the complexity of the information you're collecting, the number of fields, and the overall user experience you want to create. 

Once you have a clear understanding of the differences between a normal form and a section form, we'll discuss how to switch from using normal forms to section forms. We'll also cover the settings for section forms and highlight their limitations.

Auto-Update Triggering

By using the "Auto-Update Triggering" function, you can control how other Forms' state changes when there are changes in this Form's "state" or "Field Values." After clicking the button, you will be redirected to the "Auto-Update Triggering" setting page.

To add a new triggering rule, you should click on the “+New Rule” and then you will have a new rule definition. You can add more rules by clicking on the “dimmed” rule area.

The default status of the rule is “Active”, you will see on the left-hand side of the rule there is an “On/Off” button.

For testing purposes, you can set the rule inactive without deleting the rule because the rule is too complicated and time-consuming to prepare again.

First Rule Explanation

The first rule specifies that the rule is used when the Form reaches a specific status (New State or Another State), all other status will not trigger this rule.

When the form reaches either state, define which target form needs to have the field values auto-update. In this example, we set the target form “Form Supplier Master” of the page “Form - Supplier Master”. Click the “Add Condition” button to define the rule on how to filter the Supplier Master page for the field value update. We get only the page with Record ID equal to “S00001”.

From the lower part of the rule, you can define when the target form field value should be updated. Our first rule example specifies that when the current form's (Trigger Widget) "workflow" reaches a specific state, the system should update the value of the target widget "sel.IsSelectedSupplier." Additionally, you can choose more than one widget from the target form in the same trigger, allowing you to update multiple widgets simultaneously based on specific conditions.

Second Rule Explanation

The second rule specifies that the rule is used when a field value of the Form changes, all other field values change will not trigger this rule.

You should now define which target form needs to have the field values auto update. In this example, we set the target form “Form” of the page “Form - Procurement Form”. Click the “Add Condition” button to define the rule on how to filter the Procurement Form page for the field value update. We get only the page with Record ID equals to “PO00001”.

From the lower part of the rule, you define when to have the target form field value updated. In our second rule example, it defines that when the field “Order Delivery Date” of the current form (Trigger Widget) changes, the system should update the target widget “Final Approval Date” value. You can choose more than one widget from the target form in the same trigger.

After preparing the rules, click the “Submit” button (upper right hand corner) to save the changes. You can click the “Cancel” button to give up setting the rules.

Button Settings

In case your Form does not connect with a workflow, you can control the style and sequence of the buttons on the Form. If the Form is linked to a workflow, you can do this only at the workflow side.

Click on the “Button Settings” button, you will be bringed to the “Form Button Sequence and Style Settings” page.

To change the style of a button, click on the button, click “Override Button Styles” and then choose the style of the button.

To change the display sequence of the buttons, you can drag and arrange them directly. Click the “Submit” button (top right hand corner) to confirm the changes. After saving the page changes, you can run/preview the page to check the result.

Widget Property Settings

You can either click the “Widget Property Settings” button or directly double click the Form itself, you will be brought to the “Widget Property Settings” window. From this screen, you can see the “General”, “Visibility” and “Function” settings.

General Setting

In this setting, you can change the name of the Form widget, the Description (optional, used to explain the purpose of this form in the page).

From the lower part of the screen, you can set the Position, Size and the Layout of the Form widget. In case you place the Form in a Container, you can change the size mode between “Absolute” and “Relative Size”. You can also set the position (X and Y coordinate) of the Form in the container. These settings are not available if the Form is placed under a “Formatted Container”.

The Form may have buttons shown (either from workflow or from default buttons), with the “Button Alignment” setting, you can control how these buttons are shown on the Form.

With the “Display in” setting, you can control whether it is the Form display only in “Web and Mobile” platforms or only in “Mobile” devices platform only.

Visibility

With the visibility setting, you can control when the Form becomes visible or invisible on the screen to the users. After clicking the “Visibility” tab, you have the condition setting display. You can set the default (unconditional) visibility of the Form, is it visible/invisible or read-only to the users.

By clicking on the dimmed area “+ New Conditional Visibility”, you can add different conditions for the Form to become visible, invisible or read only. In this example, we have two conditions, one set the Form to visible (read only) and one set the form to invisible. The visibility set according to the first condition met. All other subsequence conditions will then be ignored.

Clicking the “Submit” button (lower right hand corner) when all conditions for different visibility requirements are prepared.

Function

With the “Function” setting, you can control how each “Run Time User Role” can access different Form functions. You do not need to change this setting if not with strong reason. Click the “Submit” button to save after any changes.

Widget Permission Settings

With the “Widget Permission Settings”, you can control how different “Run Time User Role” can access the Form.

Copy Widget Settings

After you finish preparing the settings of the form, you can copy its settings to any other widgets in case they share the same needs. You can do this by clicking the “Copy Widget Settings” button and choose the target properties and the target widgets for copy. Please save all changes of the Page before doing the copy.

Choose the properties for copy

In this example, we choose to copy the “Height” and “Display In” properties from the “General” tab.

We can also copy the visibility rules/conditions.

Choose which Run Time User Role access right to copy.

Choose which Run Time User Role Function to be copied.

After choosing all the properties to be copied, you can choose which “Target Widgets” to have the copy. You can key in the key words to filter the target widget if needed, click on the target widgets and it will be highlighted in blue. After selecting all widgets, you can start the copy by clicking the “Apply” button.

Click the “OK” button to confirm the copy.

Remove

You can delete the Form widget by clicking the “Remove” button. You can not get the form back in case you remove it and save the Page changes. You need to confirm the removal by clicking the “Delete” button.

Connect Workflow

With a Form widget, you are now ready to connect it to a workflow which is used to control the state in the approval process. To do so, you should save the Page first and then click on the Form, when you will see the “Connect Workflow” button. By clicking the “Connect Workflow” button, you will be asked again to save the Page first, click “Save and Continue” and the Workflow connection screen will be displayed.

Form Validation Settings

After clicking the “Form Validation Settings” button, a setting window will pop up and you will find three rule types and they are “General Rule”, “Uniqueness Rule” and “Conditional Rule”.

General Rule

Click on the dimmed “+ New General rule” area, you can create a new general rule of the form.

Set the checking rule, in this example, we check the field “Order Deliver Date” must equal “13/04/2025”. You can prepare your own rule based on the application requirement.

With the "Checking Method" style, you have the option to choose from several options, including "Compulsory Checking," "Optional Checking," "Show Remark," and "Skip This Rule.”

By the “Checking Method” action, you can set the checking time of the validation rule. You choose either “Auto Checking”, “Check after submission” or “Check after modification”.

From the lower part of the rule setting window, you also have the option to choose mandatory fields that should not be left empty, regardless of any conditions.

Click “Widget” to select widget(s) from the form’s widget list.

Click “Widget” again to close the list.

Style of Rule Checking

Type of Checking Action

This part of the style setting is only capable of “General Rule” & “Conditional Rule” of Form’s Validation.

You can input the message which should be shown to the user when the rule is violated.

Uniqueness Rule

You can prepare the uniqueness rule to make sure a field value is unique (for example, “ID Number” of the staff master forms). By clicking on “+ New Uniqueness Rule”, you can create a new uniqueness rule of the form.

Choose the field for which you want to enforce uniqueness, and then input the message to be shown to the user in case the rule is violated. In this example, we are checking that the Order Delivery Date value must be unique (although it may not be practical in a real case). If the rule is violated, the user will be informed that the value already exists.

Conditional Rule

With “Conditional Rule”, you can prepare a more complicated rule for the system to check.

By clicking the Condition button, you can set more conditions for your rule.

Simply click on the “+ New Condition” button to add conditions until fulfilling the requirements and then click the “Continue” button to confirm. The conditions will be “added together” as one single condition. In this example, the condition of the rule mentions that the “Order Delivery Date “ must equal “23/04/2023” and Current User must be in the “system Administrator” group.

After setting the condition, you can define the requirements of the rule by clicking the “+ New Rule” button. In this example, we set that the Form must be in the state “Another State” when the conditions are fulfilled.

You can also define the mandate fields at the low part of the setting window (conditional). Then you can click the “Finish” button to confirm the conditions and the rules.

Input the message shown to the user in case the rule is violated.

Click the “Submit” button to confirm the settings of the conditional rule.

Form Button Sequence and Style Settings

After clicking the "Form Button Sequence and Style Settings" button, a setting window will pop up, where you will find buttons that will appear at the bottom of the form.

By turning on the toggle button to override the button settings of the App level, you can click on one of the buttons to access the button style settings.

After turning on the toggle button, you can choose a button style for a button of your choice. This enables you to personalize the appearance of specific buttons.

Click "Reset" to undo any modifications you made, while click "Submit" to save the changes you have made.

Widget Property Settings

This window has three tabs, General, Visibility and Function.

General

The tab General has two subheaders, “Basic”, and “Position, Size and Layout”.

Basic

The fields in “Basic” are Name and Description. You can change the name and description of the widget here.

Position, Size and Layout

The fields in “Position, Size and Layout” are Sizing Mode, Position, Button Alignment, Default Record Limit, and “Display in”.

In Absolute Size, the dimensions of the table are the same in the Page Builder and Production. In Position, the x and y coordinates of the widget on the page, and the widget width and height can all be adjusted precisely in units of pixel (px).

In Button Alignment, you can choose to inherit the previous alignment or choose your own alignment (left, center, right).

The options of “Display in” are “Web & Mobile” (the default setting) and “Mobile Only”.

In Relative Size, the right and bottom sides of the table expand to completely fill the screen/window in Production.

In Default Record Limit, you can choose the number of records shown per page on startup.

Visibility

In the single-column table, you can turn on/off the ‘Invisible’ and ‘Looks Read-Only’ options for your widget. The first entry is the default setting that applies to everything. You can also create new entries by tapping ‘New Conditional Visibility’ and setting a condition with two operands and an operator in between, so the rule will only apply when the condition is met.

Function

There is one row for each Runtime User Role. The first column is the name of the user role. The second to fourth columns are various functions of the widget. You can turn on/off each user role’s access to these functions.

Widget Permission Settings

You will find the user role tab.

In the table, you will see the name of each Runtime User Role listed on the left. On the right side of each entry, there's a handy dropdown menu that lets you choose the level of access that each Role has to the widget in Production.

If you choose the 'Inherit' option, the Role Privileges that you have set in the Runtime User Roles List will be applied.

Copy Widget Settings

In the popup window, you can selectively copy the values of each field in Widget Property Settings to the same fields of one or multiple widgets, even widgets inside of Forms and inside of other widgets.

The left side shows all of the fields of the Source Widget. The top of the left side shows all of the tabs of Widget Property Settings.

The right side is a list of the names of all widgets other than the source widget on the same Page.

You can click close on the top right to exit or click apply on the bottom right to apply changes.

Remove

If you click the delete button, a popup message will appear asking for confirmation before the widget is deleted. You can either click delete or cancel to leave without changing anything.