Auto-populating Dependent Fields’ Values in Forms

You now have the option to fetch the value of dependent fields in forms without writing explicit codes (data support class, listener files, and so on). The values in the dependent fields can now be automatically filtered based on the value changes in the independent fields by using the reloadItemData() API.

Let us take an example where depending on the Bank Name, the Branch Name must get filtered.

Perform the following steps:

Prerequisites: It is assumed that you have the data source ready in Studio. If you do not want to use the data source connection, you can write an SQL Map for the table in an XML file. Canvas supports the IBATIS framework for SQL Maps. Create a simple grid view using this data source. This view will be used as a means to fetch data for the form items.

1. Create a form, for example, BENE_DETAILS_ID.
2. In BENE_DETAILS_ID form, create two combo fields for Bank Name and Branch Name.
   
   
   
   
3. In the Settings window of the Bank Name and Branch Name fields, mention the VIEW ID as BENE_VIEW.
   
   
   
   
   
   
4. In the Settings window of the Bank Name and Branch Name fields, mention the column names BANK_NAME (in the Key Column and Value Column) and BRANCH_NAME (in the Key Column and Value Column), respectively. The column names must match with the names provided in the database.
   
   
   
   
   
   
5. In the listener JS file, use the fm.reloadItemData API to link both the fields and auto-populate the value in the Branch Name field. Sample code is as follows:
   
   

canvas.form.listeners.BeneficiaryAdd = Class(canvas.Observable,
{
	constructor: function(config) 
	{
		this.fm = config.fm;
	},
	
	registerHandlers: function() 
	{
		this.fm.registerHandler(CFEC.CHANGE, "Bank_Name_ID", 
		function(fm, event, fieldName, value) 
		{
			if (!canvas.isEmpty(value)) 
			{
				this.fm.reloadItemData([
				{
					itemId : 'Branch_Name_ID', 
					filters : 
					{ 
						BANK_NAME : [value] 
					} 
				}]); 
			}
		});
	}
});
CFLR.registerListener("BENE_DETAILS_ID",canvas.form.listeners.BeneficiaryAdd); 

// Here, Bank_Name_ID is the form item ID for the Bank Name field. 
// Branch_Name_ID is the form item ID for the Branch Name Field. 
// BENE_DETAILS_ID is the form ID.
// itemId and filters are the filter conditions. 
// In this code, the Branch Name field value is being filtered based on the Bank Name. 

Following are the screen shots of the configured Beneficiary Details app in the Canvas ModelHouse application showing the auto-population of Branch Name when Bank Name is chosen:

Beneficiary Details App

Selection of Bank Name

Auto-population of Branch Name