Step by Step to create your first smart form

Last updated 3 years ago

Step by Step to create your first smart form

This section explains the step-by-step process to create your first smart form on ONEWEB. As mentioned before, it is imperative to define the scope and objective of your business entity before starting your smart form configurations. So let's say, here we have an objective and requirement to create a Smart Form for Loan Application with below data and is required to store Customer details such as: First name, Last name, Personal Type, Gender, Date of birth and Identification.

This sample smart form is named as "Application" and it consists of the following business data:

Application Date is required to know the submission date of the smart form.

Product has 3 types to choose from: Home Loan, Personal Loan and Credit Card.

Channel has 2 types: Walk in and Sale.

Customer Type could be either Corporate or Individual.

Office Code could be either Head Office or Branch.

Finance Amount and Term Loan are required to be entered by an application user.

Status can be Approved, Reject or Draft and is selected by an application user.

Email: Yes / No, Yes in case it is required to send an email to the customer.

Based on the above business data and sample requirements, let's follow steps to create a sample smart form similar to the below depictions where a bank employee could enter and store business data fields as shown below in (Screen1), also able to capture customer information as in (Screen 2). Later, the application user has a preference to search an existing record from the database based on the below search criteria such as: Status, Product, Customer Type, Channel and Date range as shown in (Screen 3).

The First step is to begin with Entity Configuration:

Create a New Entity: Check for the last 2 steps from the previous page.
Open an Entity Property window by clicking on the edit icon. (If create an Entity from AppSpace, can skip this step)

3. In the Entity Name, enter "Application" (If create an Entity from AppSpace, can skip this step)

4. Click Okay. (If create an Entity from AppSpace, you can skip this step)

Above "smart form" sample contains 2- layer Tab structure - named as "Application" as Main Tab and "Customer Information" as Child Tab as shown in Screen1 above.

Let's begin with Main Tab Configuration - "Application".

Main General Tab Configuration:

1. Drag 2-Layer Tab inside top (gray shaded area) of an Entity.

2. In the Title name, write Application

3. Set Template as 1 Column.

4. Click on Add.

Save your Entity. (Note: It is always a good practice to save entity after every new configuration settings)

Now once your Tab configuration is completed. Below is how your entity should look like:

The next step is to create a Main Module under your Main Tab and drag fields inside Main Module to start building your Smart form. Let us begin with Main Module Configuration.

Module Configuration:

1. Drag 1-1 Module right below the main Tab of your Entity in the blue highlighted area.

3. Choose 2 Columns in Configuration Layout Screen.

4. Click on Accept.

In Module name, enter "Application"
In the Table Name, choose "oneweb_application(T)"
Click OK.

Note: Fields can be dragged and dropped inside Module only if the user has already added rows in the module layout as mentioned above in step 5.

Below is how your entity should look like before you begin with Field Configuration.

Note: Contents written in red text inside boxes is just for understanding purposes and would not appear inside your Entity

Field Configuration:

As shown in Prototype Smart Form Screen1 below, you are required to create 10 Fields inside your Main Module Configuration to generate this sample Smart Form. Now let us begin configuration of each field one by one.

Note: It is always a good practice to first drag and drop hidden fields inside your configuration to store key - Primary key/and Foreign Key (If any). In above example Prototype screen1 you will have to create one hidden field inside main module configuration to store primary key as "APPLICATION_ID" for "oneweb_application(T)" table which is being used in Main Module Configuration above.

Hidden Field to store Primary Key:

Drag hidden field Inside an empty row 1, column 1 as shown below in Step1.
Inside "hidden field configuration" set FIELD_ID as "APPLICATION_ID" in Step 2. (Note: 'APPLICATION_ID" is Primary Key in "oneweb_application(T)" table.)
Click OK.

Let us drag other fields inside module configuration to construct a desired smart form as in screen1

1. Date Field Configuration:

Drag and Drop "Calendar" field inside Module Configuration
In the FIELD_ID, enter APPLICATION_DATE
In the showFieldName, enter Date
Set searchCriteria as "Y"
Set showSearch as "Y"
Set searchFromTo as "Y"
Click OK

2. Dynamic List Field Configuration (Channel):

Drag and Drop the "Dynamic List" field inside Module Configuration
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='CHANNEL'
In the FIELD_ID, enter CHANNEL
In the showFieldName, enter Channel
Set searchCriteria as "Y"
Set showSearch as "Y"
Click OK

3. Dynamic List Field Configuration (Office Code):

Drag and Drop "Dynamic List" field inside Module Configuration
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='OFFICE_CODE'
In the FIELD_ID, enter OFFICE_CODE
In the showFieldName, enter Office Code
Set searchCriteria as "Y"
Set showSearch as "Y"
Click OK

4. Text Box Field Configuration (Finance Amount):

Drag and Drop "Text Box" field inside Module Configuration
Open Text Box Configuration Window by clicking an edit Icon on Field.
In the FIELD_ID, enter FINANCE_AMOUNT
In the showFieldName, enter Finance Amount
Set showSearch as "Y"
Click OK

5. CheckBox Field Configuration (Email):

Drag and Drop "CheckBox" field inside Module Configuration
Open Checkbox Configuration Property Window by clicking an Edit Icon on Field.
For first condition, In Value Column write Y, ShowName as Yes, SEQ as 10, DefaultCheck as NO and click icon to add first row.
For second condition, In Value Column write N, ShowName as No, SEQ as 20, DefaultCheck as NO and click icon to add second row.
In the FIELD_ID, enter EMAIL
In the showFieldName, enter Email
Click OK

Note: Now you have already configured first 5 fields inside your smart form module configuration. Your configuration screen is expected to look same as below. In case of any discrepancies or mismatch found on your configuration screen as compared to below screen, you must again review and go through the instructions given above for each field set up.

Let us continue with other fields left as per our layout on Sample Screen1

6. Dynamic List Field Configuration (Product):

Drag and Drop "Dynamic List" field inside Module Configuration
Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='PRODUCT'
In the FIELD_ID, enter PRODUCT
In the showFieldName, enter Produce
Set searchCriteria as "Y"
Set showSearch as "Y"
Click OK

7. Dynamic List Field Configuration (Customer Type):

Drag and Drop "Dynamic List" field inside Module Configuration
Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='CUSTOMER_TY
In the FIELD_ID, enter CUSTOMER_TYPE
In the showFieldName, enter Customer Type
Set searchCriteria as "Y"
Set showSearch as "Y"
Click OK

8.Text Box Field Configuration (Term Loan):

Drag and Drop "Text Box" field inside Module Configuration
Open Text Box Configuration Window by clicking an Edit Icon on Field.
In the FIELD_ID, enter TERM_LOAN
In the showFieldName, enter Term Loan
Set showSearch as "Y"
Click OK

9. Dynamic List Field Configuration (Status):

Drag and Drop "Dynamic List" field inside Module Configuration
Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='STATUS'
In the FIELD_ID, enter STATUS
In the showFieldName, enter STATUS
Set showSearch as "Y"
Click OK

Once you have finished configuring all above desired fields under your main Module. Your screen should look like below:

Save your Entity.

Note: It is always a good practice to save entity after each new configuration

Set Primary Key of Main Module:

Once you have added all the required fields inside your main Module configuration, the next Step is to set the Primary key of your main Module "Application". Note: Primary key is already created above as Hidden Field in the beginning of Field Configuration.

Select "APPLICATION_ID" as Module Key.
Add KeyLen as "7".
Select Sequence as "ONEWEB_APPLICATION_SEQ"
Click icon to add row.
Click OK.

Save your Entity.

Note: It is always a good practice to save entity after every new configuration

Add Lower Tab (Child Tab) inside your Entity:

Drag Normal Tab inside bottom (gray shaded area) of your Entity.
Enter Title name as "Customer".
Set Template as 1 Column.
Click on Add.

Once you are done with (Child) Tab configuration. Next step is to create a Module under your Child Tab and drag fields inside this child Module to start building other required fields for your Smart form. Let we begin with child Tab Module Configuration.

Module Configuration (Child):

Drag 1-Many Module right below Lower/Child Tab of your Entity.
Click on edit icon to open Module Configuration window:

In Module name, enter "Customer Information"
In the Table Name, choose "oneweb_customer(T)"
Click OK.

Field Configuration for Child Module (Customer):

As shown in Prototype Smart Form Screen1, you are required to construct 8 Fields inside your child Module to store customer details. The required fields are: First Name, Last Name, Personal Type, Gender, Date of Birth, Identification and 2 hidden fields. Hidden fields are being used here to store both Primary Key, as well as Foreign Key to link this child module with the main parent module table.

For e.g.: "CUSTOMER_ID" is primary Key in 'oneweb_customer(T)" table used in this child Module Configuration, and "APPLICATION_ID" is foreign key in this table to link it with the main module table i.e. 'oneweb_application(T)". Let's begin field configuration for this child Module.

1. Hidden Field to store Primary Key (CUSTOMER_ID)

Drag and drop hidden field inside child module Configuration.
Click on Edit Icon to open Hidden Field Configuration window.
Inside "hidden field configuration
set FIELD_ID as "CUSTOMER_ID"
Select same name for ShowFieldName by clicking on replicate icon.
Click OK.

2. Hidden Field to store Foreign Key (APPLICATION_ID)

Drag and drop hidden field inside child module Configuration.
Click on Edit Icon to open Hidden Field Configuration window.
Inside "hidden field configuration
set FIELD_ID as "APPLICATION_ID"
Select same name for ShowFieldName by clicking on replicate icon.
Click OK.

3. Text Box Field Configuration (First Name):

Drag and Drop "Text Box" field inside Module Configuration
Open Text Box Configuration Window by clicking an Edit Icon on Field.
In the FIELD_ID, enter FIRST_NAME
In the showFieldName, enter First Name
Set showSearch as "Y"
Click OK

4. Text Box Field Configuration (Last Name):

Drag and Drop "Text Box" field inside Module Configuration
Open Text Box Configuration Window by clicking an Edit Icon on Field.
In the FIELD_ID, enter LAST_NAME
In the showFieldName, enter Last Name
Set showSearch as "Y"
Click OK

5. Dynamic List Field Configuration (Personal Type):

Drag and Drop "Dynamic List" field inside Module Configuration
Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='PERSONAL_TYPE'
In the FIELD_ID, enter PERSONAL _TYPE
In the showFieldName, enter PERSONAL_TYPE
Set showSearch as "Y"
Click OK

6. Dynamic List Field Configuration (GENDER):

Drag and Drop "Dynamic List" field inside Module Configuration
Open Dynamic List Box Configuration Property Window by clicking an Edit Icon on Field.
In the Table Name, enter ew_list_box_master
In the Column Show, enter DISPLAY_NAME
In the Column Value, enter DISPLAY_CODE
In the Condition Value, enter category_code='GENDER'
In the FIELD_ID, enter GENDER
In the showFieldName, enter Gender
Set showSearch as "Y"
Click OK

7. Date Field Configuration (Date Of Birth) :

Drag and Drop "Calendar" field inside Module Configuration
In the FIELD_ID, enter DATE_OF_BIRTH
In the showFieldName, enter Date of Birth
Set showSearch as "Y"
Click OK

8. Text Box Field Configuration (Identification):

Drag and Drop "Text Box" field inside Module Configuration
In the FIELD_ID, enter IDENTIFICATION
In the showFieldName, enter Identification
Set showSearch as "Y"
Click OK

Save your Entity. (Note: It is always a good Practice to save entity after every new configuration item)

Set Primary Key and Parent Key in Child Module:

Once you add all the required fields inside your child Module configuration, the next Step is to set the child Module (Customer Information) Primary Key (CUSTOMER_ID) and map its reference to the Main Module (Application).

Procedure:

Select "CUSTOMER_ID" as Module Key.
Add KeyLen as "7".
Select Sequence as "ONEWEB_CUSTOMER_SEQ"
Click icon to add first row inside module configuration.
Select "APPLICATION_ID" as Module Key.
Select "APPLICATION_ID" as Parent Key.
Click icon to add second row inside module configuration.
Click OK.

Now, once you have finished configuration for Lower/child Tab i.e. (Customer), Child Module Configuration i.e. (Customer Information) and all required fields and keys for Child Module, your configuration screen should look like below.

Generate Instant Preview to review your Smart Form:

You could also generate instant preview of your smart form to see how it would appear to the End User. To generate an instant preview of your configuration, click on create preview Icon on top left "Entity Menu" as shown below.

A new window will open to show User Screen (Facade Screen) of your Smart Form as shown below:

Button Configuration for your Sample Smart Form

Now you require 2 Types of Button Configuration inside your smart form to complete your Sample Smart Form Configuration.

Entity Button: Entity buttons facilitates actions for the entire smart form e.g. database calls or Cancel /Reject actions on your smart form.

Module Button: Facilitates user actions for 1-Many module. It will not impact entire entity and can be used to add, delete or update records of the module.

Configure Entity Button of your sample Smart Form:

Add Search Button:

Drag and drop Entity button right below your Main Tab (Application) layout.
Scroll mouse over the button and click on edit icon to open button configuration window.
In buttonName, enter Search
In Page Action enter ENTITY_SEARCH
In button Action choose searchResult()
Click OK

Add New Button:

Drag and drop Entity button right next to your previous button.
In the buttonName, enter New
In Page Action enter ENTITY_SEARCH
In button Action choose addEntity()
Click OK

Add Save Button:

Drag and drop Entity button right next to other entity buttons.
In the buttonName, enter Save
In Page Action enter ENTITY_INSERT
In button Action choose saveEntity()
Click OK

Add Cancel Button:

Drag and drop Entity button right next to other entity buttons.
Click on edit icon to open button configuration window.
In the buttonName, enter Cancel
In Page Action enter ENTITY_INSERT
In button Action choose cancelEntity()
Click OK

Save your Entity.

Note: It is always a good practice to save entity after every new configuration item

Configure Module Button of your sample Smart Form:

Add Add Button:

Drag and drop Module button right below your Child Tab (Customer Info) layout.
Scroll the mouse over the button and click on edit icon to open button
In the buttonName, enter Add
In Page Action enter SUB_SEARCH
In button Action choose popupActionFlow('[MODULE_ID]')
Click OK

Add Delete Button:

Drag and drop Module button right next to the other module button.
In the buttonName, enter Delete
In Page Action enter SUB_SEARCH
In button Action choose [MODULE_ID]Delete()
Click OK

Add Save Button:

Drag and drop Module button right next to other module buttons.
Click on edit icon to open button configuration window.
In the buttonName, enter Save
In Page Action enter INSERT
In button Action choose actionFormSubmit('insertMany,'Y')
Click OK

Add Cancel Button:

Drag and drop Module button right next to other module buttons.
In the buttonName, enter Cancel
In Page Action enter INSERT
In button Action choose $(#many_[MODULE_ID]_dialog('close');
Click OK

Save your Entity. (Note: It is always a good practice to save entity after every new configuration)

Congratulations, you have successfully generated smart form based on the sample given above. You can open instant Search/Create preview of your Smart Form to see how it appears to an End User/Application User and could add business data and customer details for testing Purposes.

To generate Instant Preview of your configuration, click on create preview Icon on top left "Entity Menu" as shown below.

Last updated 3 years ago