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.

The reloadItemData() API can only be used when the View ID is specified for the form item. This view ID will contain the COLUMN_ID that must be specified for the form item (field). The view specified for the form items must be 'Grid' only. All types of grid views supported by Canvas can be used for auto-populating dependent fields. This API cannot be used when the raw keys/values are specified or when the data for the form item is being fetched through the data support class specially written for the form. If the data support class is not specified Canvas uses the default data support class. However, the default data support class does not hinder with the view ID specified.

The reloadItemData() API can be used to auto-populate dependent fields' values for the following form items:

Item Selector
Combo
Auto Suggest
Icon Combo

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.

Create a form, for example, BENE_DETAILS_ID.
In BENE_DETAILS_ID form, create two combo fields for Bank Name and Branch Name.
In the Settings window of the Bank Name and Branch Name fields, mention the VIEW ID as BENE_VIEW.
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.
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.

To view the form in your end application, you must create a view and map the form to it. Then map the form view to the app and the app to a workspace.

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

Browser not supported