Combo

Combo is a typical combo box field. Combo Field is drop-down selection, which enables the user to select a value from the fixed list of values.

Adding list values in Combo:

Combo box allows adding two types of values through data-support class of the Form.

Pre-Defined data values (See Adding Pre-Defined Data Values)
Dynamic data values (See Adding Dynamic Data Values)

Alternatively, you can provide a list of values to a combo box through Canvas Studio itself. Refer Managing List of Values (LOV) for Form Fields for more information.

There might be situation where only single value is populated in the drop-down, in which case it makes sense to have the single value selected automatically instead of prompting users to select it. To achieve this, refer Automatic selection of value when drop-down contains single value.

Form Items > Data Selection > Combo

The following table provides information about the properties that are applicable to this form item:

#	Property	Description	Sample Values
1	Form ID	Unique ID of the Form on which you want to place the Form Item.	INVOICE_FORM
2	Item ID	Unique ID to the Form item. This value is automatically configured once the form is selected from the pop-up window.	INVOICE_TYPE
3	Item Type	To identify the item type in a form.	COMBO
4	Channel	Assigns the form item compatibility for various devices.	Desktop / Tablet / Mobile
5	Bundle Key	Name of the key associated with the property file which provides the localized label text for the current form item. Form item bundle key supersede the form level bundle key. If this value is blank, form level bundle key will be used to find label keys.	Common
6	Plain Label	Text entered in Plain Label field appears as the label of the form item without the resource bundle key translation. 18.1: If you are using the property files, leave the Plain Label field as blank. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. Display Name Key is the property-driven label key for the form item. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. 19.1: In Canvas 19.1, the Display Name Key field is a configuration-driven label key for the form item. See About Display Name Key and Plain Label from 19.1 and Managing Display Names for Forms for more information.
7	Display Name Key		INVOICE TYPE
8	Edit	Selected: Renders the Form in edit enabled mode. De-Selected: Renders the Form in edit disabled mode.	Selected
9	Visibility	Selected: Shows the form item on the Form. De-Selected: Hides the form item from the form, but the data will still be in active.	Selected
10	Help	Selected: Renders the form item with a help icon. De-Selected: Renders the form item without a help icon. Refer the Configuring Help Messages and Tooltips for Form Items section for more information on configuring help text.	Selected
11	Anchor	Defines the size of the form item in terms of percentage (without % symbol).	50
12	Print	Selected: Allows printing the form item while printing the form. De-Selected: Does not print the particular form item while printing the form.	Selected
13	Column Span	Occupies the specified number of item spaces horizontally for the current item.	1
14	Label Alignment	Indicates the alignment of the labels of the form items. Select Options: Left () or Top ()	Top
15	Hide Label	Selected: Hides the label of the form item. De-Selected: Shows the label of the form item.	De-selected
16	Mandatory	Selected: Shows the red asterisk ({}{}) on the label of the form item, and converts the particular field as mandatory. De-Selected:* Considers the particular field as non-mandatory.	Selected
17	Conditional Mandatory	Selected: Shows the blue double asterisks ({}{}) on the label of the form item, and converts the particular field as conditional mandatory. Note: If selected, write the conditional logic in the CFEC.PRE_VALIDATE event. See Form Item Handlers for more information. De-Selected: considers the particular field as normal. If 'Mandatory' is already selected, do not select this property.	De-Selected
18	Add Icon	By making use of Add Icon option, you can add an icon to the form item. Perform the following steps for adding an icon to a form item: Clickicon to add an icon to the field. By default, the Left option gets selected, which paves the way for the icon to get placed on the left side of the form item's label, whereas if the option Right is chosen, then the icon gets placed on the right side of the form item's label. Clickicon to choose an icon for the form item. Icons and Custom are the two available tabs. From the list of icons in Font Awesome, you can choose an icon of your choice. Click Search text field and type the name of the icon, which you wish to choose. Default, Active, Disabled and Error are the four available options, categorized under the field, Choose icons for different state. You can assign separate icons for the four different states of Default, Active, Disabled and Error. Default indicates the default icon of the form item, whereas Active and Disabled depict the active and disabled states of the form item. When the selected form item is active, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the form item is in a disabled state. When an error occurs, the icon, which was selected for Error, gets displayed. To add a customized icon, click Custom tab. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly, without any fuss. The customized image appears under the category of Custom Images. If you upload a customized icon for the form item, ensure that you restart the app server, after saving the form. Make sure to log out from Canvas Studio and close the Studio application, before restarting the app server. If you do not restart the app server, the uploaded custom icon will not appear as the assigned icon for the selected form item.	De-Selected
19	Event Wiring	The Event Wiring option enables you to assign various events for different set of actions. For detailed information on Event Wiring, refer Form Items Event Wiring.
20	Settings menu	Raw Keys - Array of comma separated data that will be used as keys to handle the combo field selection. If you are getting values from the data-support class, leave this field as blank. Raw Values - Array of comma separated data that will be used as values to display as the combo field drop downs. This can be a plain text or the property driven label key. If you are getting values from the data-support class, leave this field as blank. This is an alternative method to retrieve data for the Combo from database by configuring the View ID, Key Column, and Value Column. This method can be used in place of data-support class. In order to use this method, a view (app or widget) must exist that contains the column from which you want to fetch data for the Combo form item. The Key Column and Value Column must be the Column ID from the existing view. To use this method, perform the following steps: View ID: Select the View from the look up (Search icon) from which key and value to be selected. Key Column: Enter the column ID from the selected view that stores the value selected in back-end. Value Column: Enter the column ID from the selected view that displays the value in the Combo drop-down. When both Raw Key-Raw Values (static data) and View ID-Key Column-Value Column (data from database) are specified, Canvas gives preference to Raw Key-Raw Values (static data). LOV Category: Specify the LOV (List of Values) Category. LOV Parent ID: Specify the Parent ID of the selected LOV (List of Values) Category. Cache Data Indicator: Provides the cache data if it is stored in cache. Include Select Indicator: Indicates whether the word 'Select' should be displayed in combo boxes or not. If you need to change the default select label, refer Changing the Default Select Label in the Drop-Down Fields. Include All Indicator: Indicates whether the word 'All' should be displayed in combo boxes or not.	Y, N, I Yes, No, Inbox
21	Switch	Enables you to switch from one form item to another form item along with the applicable properties and their values. To switch from one form item to another form item, execute the steps that follow: Select the form item in the form designer area. Click the Switch icon () on the primary ribbon. Select another form item to switch the existing form item.	NA
22	Clone	Enables you to create a duplicate of the selected form item along with its applicable properties except for the Item ID.	2

Adding Pre-defined data values in Combo box:

After configuring the combo box, you can add the set of static or pre-configured data as its list values using the data support class. Write a Java class implementing the IadditionalDataSupport, which gets the source data and returns it to Canvas to fill them in the corresponding form item.
Assuming the item Id of the combo box is INVOICE_TYPE,

package com.intellectdesign.suppchain; 
import java.util.ArrayList;
import java.util.HashMap;

import com.intellectdesign.canvas.formdefinition.addinfo.AdditionalDataCodeValue;
import com.intellectdesign.canvas.formdefinition.addinfo.DefaultAdditionalDataSupport; 
import com.intellectdesign.canvas.formdefinition.FormDefinitionException; 
import com.intellectdesign.canvas.formdefinition.FormItemDefinition;
import com.intellectdesign.canvas.value.IUserValue;  

public class InvoiceDetailsDataSupport extends DefaultAdditionalDataSupport
{
	public InvoiceDetailsDataSupport()
	{
	} 

	public ArrayList getAdditionalDataFor(FormItemDefinition itemDefn, 
						IUserValue userValue, HashMap inputParams) throws FormDefinitionException
	{
		ArrayList dataList = null; 
	
		//Pass the Item ID of the combo as parameter 
		if(itemDefn.getItemId().equals("INVOICE_TYPE"))
		{
			dataList = new ArrayList();
			//Add the list of static values in the as Key, Value Pair
			dataList.add(new AdditionalDataCodeValue("CI", "Credit Invoice"));
			dataList.add(new AdditionalDataCodeValue("DI", "Debit Invoice"));
		}
		return dataList;
	} 
}

Adding dynamic data in Combo Box:
You can get the dynamic values from the database for the combo box using iBatis SQLMap configuration file. See section, Writing the SQLMap File and Instruction Class for more information about SQLMap file.

Step 1: Create a SQLMap file with a unique ID.
Step 2: After adding, get the data for the combo box using the Data Access Map Key.

Assuming the SQLMap file name is InvoiceSQLMap.xml,

<?xml version="1.0" encoding="UTF-8" ?> 
	<!DOCTYPE sqlMap PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN" 
	"http://ibatis.apache.org/dtd/sql-map-2.dtd"> 
	<sqlMap>
		<resultMap id="INVOICE_TYPE_MAP" class="java.util.HashMap"> 
			<result 
					property="INV_TYPE_ID" 
					nullValue="" 
					column="INV_TYPE_ID"
					javaType="java.lang.String" 
					jdbcType="VARCHAR2"
			/> 
			
			<result 
					property="INV_TYPE" 
					nullValue="" 
					column="INV_TYPE" 
					javaType="java.lang.String" 
					jdbcType="VARCHAR2"
			/> 
			
			<result 
					property="TOTAL_COUNT" 
					nullValue=""column="TOTAL_COUNT"
					javaType="java.lang.String" 
					jdbcType="VARCHAR2"
			/>
		</resultMap> 

<sql id ="INVOICE_TYPE">
	SELECT
	INV_TYPE_ID, 
	INV_TYPE 
		<include refid = "NEW_DEFAULT_ORDERBY_CLAUSE"/>
	FROM
	INV_TYPE_MASTER 
</sql> 

<select id="INVOICE_TYPE_MAP_SELECT_INV_TYPE" resultMap = "INVOICE_TYPE_MAP">
	<include refid="INVOICE_TYPE"/>
</select>
</sqlMap>

Assuming the same item Id INVOICE_TYPE, the data-support class would be as follows:

package com.intellectdesign.suppchain; 
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import jave.util.Map;

import com.intellectdesign.canvas.formdefinition.addinfo.AdditionalDataCodeValue;
import com.intellectdesign.canvas.formdefinition.addinfo.DefaultAdditionalDataSupport;
import com.intellectdesign.canvas.formdefinition.FormDefinitionException; 
import com.intellectdesign.canvas.formdefinition.FormItemDefinition;
import com.intellectdesign.canvas.value.IUserValue;  
import com.intellectdesign.canvas.database.*; 

public class InvoiceDetailsDataSupport extends DefaultAdditionalDataSupport
{
	public InvoiceDetailsDataSupport()
	{} 

	public ArrayList getAdditionalDataFor(FormItemDefinition itemDefn, 
						IUserValue userValue, HashMap inputParams) throws FormDefinitionException
	{
		ArrayList<AdditionalDataCodeValue> resultList = null;
		DatabaseRequest dbRequest = null;
		DatabaseResult dbResult = null;
		List tmpList = null;
		String key = null;
		String value = null; 
		try
		{
			dbRequest = new DatabaseRequest(); 
			dbResult = new DatabaseResult();
			tmpList = new ArrayList();
			resultList = new ArrayList<AdditionalDataCodeValue>();
			dbRequest.setDataSource(DatabaseConstants.DEFAULT_DATASOURCE); 
				
			if(itemDefn.getItemId().equals("INVOICE_TYPE"))
			{
				dbRequest.setOperation(DatabaseConstants.SELECT); 
				// Pass the SQL Map ID which is added in the Select tag
				dbRequest.setDataAccessMapKey("INVOICE_TYPE_MAP");
				// Pass the Extended SQL ID 
				dbRequest.setOperationExtension("INV_TYPE");
				dbResult = dbRequest.execute();
				key = "INV_TYPE_ID";
				value = "INV_TYPE"; 
				tmpList = dbResult.getReturnedList();
			}
			for(int i=0;i<tmpList.size();i++)
			{
				Map tmpMap = (HashMap)tmpList.get(i);
				resultList.add(new AdditionalDataCodeValue((String)tmpMap.get(key), 
								(String)tmpMap.get(value)));
			}
		}
		catch(DatabaseException dbExcep)
		{
			throw new FormDefinitionException(dbExcep);
		}
		return resultList;
	} 
}

Automatic selection of value when drop-down contains single value

You can enable automatic selection of value in the drop-down when there is only single value in the drop-down instead of prompting users to select the single value. You can achieve this by using the 'defaultSelectIfSingleValue' property, which is applicable at the form-item level. The default value is 'False'. The 'defaultSelectIfSingleValue' property must be set to 'True' for automatic selection of single value in the drop-down and must be given in the respective form listener JS file.

The 'defaultSelectIfSingleValue' property can be used for the following form-items: Combo Box, Icon Combo Box, and Auto Suggest.

Consider a scenario where the Invoice Type combo box will have only Debit Invoice as the value in the drop-down. A sample usage of '' for the specified scenario is provided for reference as follows:

// Sample listener JS 
canvas.form.listeners.INVOICE_FORM = Class(canvas.Observable, 
{
   constructor: function(config) 
   {
     this.fm = config.fm;
   },
   registerHandlers: function() 
   {	  
	 this.fm.registerHandler(CFEC.PRE_INITIALIZE, 
          function(fm, event, fieldName, value) 
          {
             return 
             {
                'INVOICE_TYPE': // Combo Box item ID
                {
                   'defaultSelectlIfSingleValue': true
                },
	         };
          });
   }
});

CFLR.registerListener("INVOICE_FORM", canvas.form.listeners.SAMPLE_FORM);
// INVOICE_FORM is the Form ID