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 following business data:

  • Application Date is required to know the submission date of 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 Approve, Reject or Draft and are selected by an application user.
  • Email: Yes / No, Yes in case it is required to send an email to customer.


Based on above business data and sample requirements, lets follow steps to create a sample smart form similar to 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, application user have preference to do search from an existing record from database based on below search criteria such as: Status, Product, Customer Type, Channel and Date range as shown in (Screen 3).


First step is to begin with Entity Configuration:

  1. Create a New Entity: Check for Step 1 and Step 2 from previous page.
  2. Open an Entity Property window by clicking on edit icon.



  1. In the Entity Name, enter "Application"
  2. Click Okay.



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 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:


Next step is to create a Main Module under you 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 Main Tab of your Entity in the blue highlighted area.
  2. Click on Layout Property Icon.
  3. Choose 2 Columns in Configuration Layout Screen.
  4. Click on Accept.
  5. Click on add rows icon to add required rows in your layout.


  1. Click on edit   icon to open Module Configuration. On module Configuration window :
    • In Module name, enter "Application"
    • In the Table Name, choose "oneweb_application(T)"
    • Click OK.



Now you are all set with your "Main Tab" and "Main Module" Configuration. Let us begin with Field Configuration. (Note: Fields can be dragged and dropped inside Module only if the user has already added rows in 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 construct 10 Fields inside your Main Module Configuration to construct and generate required sample Smart Form, Let we begin configuration of each field one by one.



Note: It is always a good practice to first drag 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 used in your 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.)
  • Select same name for ShowFieldName. (Note: Names can also be replicated throughout the configuration by clicking on replicate icon "" to replicate the same value).
  • 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
  • Open Field Property Window by clicking an Edit Icon on Field.
  • 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


                             

  1. Dynamic List Field Configuration (Channel):
  • Drag and Drop "Dynamic List" field inside Module Configuration
  • Open Field 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='CHANNEL'
  • In the FIELD_ID, enter CHANNEL
  • In the showFieldName, enter Channel
  • Set searchCriteria as "Y"
  • Set showSearch is "Y"
  • Click OK    



  1. Dynamic List Field Configuration (Office Code):
  • 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='OFFICE_CODE'
  • In the FIELD_ID, enter OFFICE_CODE
  • In the showFieldName, enter Office Code
  • Set searchCriteria as "Y"
  • Set showSearch is "Y"
  • Click OK    



  1. 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



  1. 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.


  1. 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 Product
  • Set searchCriteria as "Y"
  • Set showSearch is "Y"
  • Click OK    



  1. 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_TYPE'
  • In the FIELD_ID, enter CUSTOMER_TYPE
  • In the showFieldName, enter Customer Type
  • Set searchCriteria as "Y"
  • Set showSearch is "Y"
  • Click OK



  1. 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



  1. 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 is "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.

  • Open Module Property Window, click Edit icon on Module.
  • 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:

  1. Drag Normal Tab inside bottom (gray shaded area) of your Entity.
  2. Enter Title name as "Customer".
  3. Set Template as 1 Column.
  4. 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):

  1. Drag 1-Many Module right below Lower/Child Tab of your Entity.
  2. 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.



  1. 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.



  1. 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



  1. 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



  1. 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 is "Y"
  • Click OK



  1. 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 is "Y"
  • Click OK



  1. Date Field Configuration ( Date Of Birth) :
  • Drag and Drop "Calendar" field inside Module Configuration
  • Open Field Property Window by clicking an Edit Icon on Field.
  • In the FIELD_ID, enter DATE_OF_BIRTH
  • In the showFieldName, enter Date Of Birth
  • Set showSearch as "Y"
  • Click OK



  1. Text Box Field Configuration (Identification):
  • 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 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:

  • Open Child Module Property Window, click Edit icon on Module.
  • 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 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:

  1. 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



  1. Add New Button:
  • Drag and drop Entity button right next to your previous button.
  • Click on edit icon to open button configuration window.
  • In the buttonName, enter New
  • In Page Action, enter ENTITY_SEARCH
  • In button Action , choose addEntity()
  • Click OK



  1. Add Save 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 Save
  • In Page Action, enter ENTITY_INSERT
  • In button Action , choose saveEntity()
  • Click OK



  1. 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:

  1. 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 configuration window.
  • In the buttonName, enter Add
  • In Page Action, enter SUB_SEARCH
  • In button Action , choose popupActionFlow('[MODULE_ID]')
  • Click OK



  1. Add Delete Button:
  • Drag and drop Module button right next to the other module button.
  • Click on edit icon to open button configuration window.
  • In the buttonName, enter Delete
  • In Page Action, enter SUB_SEARCH
  • In button Action , choose [MODULE_ID]Delete()
  • Click OK



  1. 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



  1. Add Cancel 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 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.