> For the complete documentation index, see [llms.txt](https://docs.oneweb.tech/oneweb/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oneweb.tech/oneweb/design-and-develop-oneweb-apps/design-and-develop-ux-ui/ux-ui-components/smart-forms/create-your-first-smart-form/step-by-step-to-create-your-first-smart-form.md).
# 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:**
1. Create a New Entity: Check for the last 2 steps from the previous page.
2. 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.
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.
6\. 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. ](bookmark://_topic_633161StepbySteptocreateyourfir1)
{% hint style="info" %}
**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*.*
{% endhint %}
Below is how your entity should look like before you begin with Field Configuration.
{% hint style="info" %}
**Note**: Contents written in red text inside boxes is just for understanding purposes and would not appear inside your Entity
{% endhint %}
**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.
{% hint style="info" %}
**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.
{% endhint %}
**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
**2. Dynamic List Field Configuration (Channel):**
* Drag and Drop the "**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 as "**Y"**
* Click OK
**3. 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 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 **2*****0**,* DefaultCheck as *NO and click icon to add second row.*
* In the FIELD\_ID, enter *EMAIL*
* In the showFieldName, enter *Email*
* Click OK
{% hint style="info" %}
**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.
{% endhint %}
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.
{% hint style="info" %}
**Note**: It is always a good practice to save entity after each new configuration
{% endhint %}
**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.
{% hint style="info" %}
**Note**: It is always a good practice to save entity after every new configuration
{% endhint %}
**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):**
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.
**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
* 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
**8. 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 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.
* 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
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
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.
{% hint style="info" %}
**Note**: It is always a good practice to save entity after every new configuration item
{% endhint %}
**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
* configuration window. 
* 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.
* 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
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.
* 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)
{% hint style="success" %}
**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.
{% endhint %}
To generate Instant Preview of your configuration, click on create preview Icon on top left "Entity Menu" as shown below.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.oneweb.tech/oneweb/design-and-develop-oneweb-apps/design-and-develop-ux-ui/ux-ui-components/smart-forms/create-your-first-smart-form/step-by-step-to-create-your-first-smart-form.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.