Slider Field

Slider Field form item allows you to select a numeric value from a defined set of possible values.

• Form Items > Data Selection > Slider Field:

• You can increase the number of thumbs for the slider field. Increasing the slider thumbs enables you to select a range of values.
  
  

APIs:

1. To create slider thumbs dynamically
   

   Sample code to create more than one slider thumb in the slider component is as follows:

   fm.createSliderThumbs("ITEM_ID","3");
   /* Here, 
   *  'fm' refers to the form manager's object.
   *  'createSliderThumbs' is the API for dynamically adding the thumbs for slider.
   *  'ITEM_ID' is the unique ID given to the slider.
   *  '3' refers to the number of thumbs for the slider.
   */

2. To set the minimum range dynamically
   

   Sample code to set the minimum range for the slider component is as follows:

   fm.minValue("ITEM_ID","500");
   /* Here, 
   *  'fm' refers to the form manager's object.
   *  'minValue' is the API for dynamically set the minimum range.
   *  'ITEM_ID' is the unique ID given to the slider.
   *  '500' refers to the number of thumbs for the slider.
   */

3. To set the maximum range dynamically
   

   Sample code to set the maximum range for the slider component is as follows:

   fm.maxValue("ITEM_ID","10000");
   /* Here, 
   *  'fm' refers to the form manager's object.
   *  'maxValue' is the API for dynamically set the maximum range.
   *  'ITEM_ID' is the unique ID given to the slider.
   *  '10000' refers to the number of thumbs for the slider.
   */

4. To set the minimum and maximum ranges on form initialization
   

   Sample code to set the maximum range for the slider component on form initialization is as follows:

   this.fm.registerHandler("cbxpreinitialize", 
   	function(fm, event, fieldName, value) 
   	{
   		return
   		{   
   			'ITEM_ID': 
   			{
   				'minValue': 500,
   				'maxValue' : 10000
   			}
   		}
   	}
   /* Here, 
   *  'fm' refers to the form manager's object.
   *  'cbxpreinitialize' is the event for form pre-initialization.
   *  'ITEM_ID' is the unique ID given to the slider.
   *  'minValue' is the API for dynamically setting the minimum range.
   *  '500' refers to the number of thumbs for the slider.
   *  'maxValue' is the API for dynamically setting the maximum range.
   *  '10000' refers to the number of thumbs for the slider.
   */

Adding the Currency symbol for Slider form item

To add the currency symbol for the Slider form item, perform the following steps: 

1. Specify the appropriate currency format with the relevant Unicode value in the amountformats.xml file present in your application WAR folder, e.g. (D:\Canvas\apache-tomcat-8.5.9\webapps\expertctstudio\WEB-INF\lib\expertctstudioResource.jar\cuser-amountformats.xml), as shown in the following code snippet:

   <format Id = "###,###,###,###,###.###" description = "Indian Currency Format"
           groupSeparator = "," decimalSeparator = "." groupSize = "3" negativeSignPosition = "PREFIX"
           leadingGroupSize = "3" isEnabled = "true" currencySymbol="'\u20b9'"/> <!-- u20b9 is the Unicode of the Indian Rupee Currency -->

2. Specify the appropriate JSON structure of the currency symbol in the APPLICATION_CONFIG column present in the FORM_ITEM_DEFINITION table in the Canvas schema, as shown in the following code snippet: 
   

   {"appendModeinInput":"prefix","appendModeinVal":"prefix","appendModeinScale":"prefix","currencySymbol":"true"}

   Before you proceed to make changes in the FORM_ITEM_DEFINITION table in your Canvas schema, ensure that you have enabled the Prefix or Suffix option for the Append Mode in value, Append Mode in scale and Append Mode in input fields in Settings for the Slider form item in the configured form on Canvas Studio.

   
   The sample DB entries to be provided in the FORM_ITEM_DEFINITION table for adding a currency symbol to the Slider form item are listed as follows:
   

   In the following example, the provided DB entries are associated with the MySQL database. However, the following listed DB entries are applicable for other databases like Oracle, Postrgre and MSSQL.

   
   

   Column Names	Column Values
   APPLICATION_ID	MODELHOUSE
   FORM_ID	SLIDER_FORM
   ITEM_ID	SLIDER_FIELD
   PARENT_ID	SLIDER_FORM
   POSITION	1
   ITEM_TYPE	39
   DISPLAY_NM_KEY	(NULL)
   PLAIN_LBL	Slider Field
   LAYOUT	(NULL)
   ANCHOR	100
   BUNDLE_KEY	common
   MIN_LENGTH	0
   MAX_LENGTH	1000
   MAX_NUM_LINES	(NULL)
   MAX_CHAR_PER_LINES	(NULL)
   TOTAL_COLS	(NULL)
   ROW_SPAN	(NULL)
   COL_SPAN	(NULL)
   VALIDATION_TYPE	(NULL)
   RAW_KEYS	(NULL)
   RAW_VALUES	(NULL)
   INCLUDE_SELECT_IND	(NULL)
   CONTAINER_IND	(NULL)
   VISIBLE_IND	Y
   EDITABLE_IND	Y
   READ_ONLY_IND	N
   REQUIRED_IND	N
   LOOKUP_IND	(NULL)
   COLLAPSIBLE_FIRST_IND	(NULL)
   DS_VIEW_IND	(NULL)
   DS_KEY_COLUMN_ID	(NULL)
   DS_VAL_COLUMN_ID	(NULL)
   WIDGET_ID	(NULL)
   CONDITIONAL_IND	N
   CACHE_DATA_IND	(NULL)
   VALIDATE_ON_SWITCH_IND	(NULL)
   CRITERIA_ID_REQ_IND	(NULL)
   CONTEXT_CONTAINER_IND	(NULL)
   HIDE_LABEL	N
   MULTI_LANG_IND	(NULL)
   UPLOAD_FILE_FORMATS	(NULL)
   RESIZABLE_IND	(NULL)
   LINKED_CURR_COL	(NULL)
   LABEL_ALIGN_TYPE	top
   APPEND_CURRENCY_MODE	(NULL)
   INITIAL_MULTIPLICITY	(NULL)
   PRINT_REQUIRED_IND	Y
   TOGGLE_IND	(NULL)
   CHANNEL_ID	A
   LABEL_CHAR_COUNT	(NULL)
   HELP_ICON_IND	N
   COPY_PASTE_IND	(NULL)
   PRODUCT	(NULL)
   SUB_PRODUCT	(NULL)
   FUNCTION_CODE	(NULL)
   INPUT_ACTION	(NULL)
   APPLICATION_CONFIG	{ "unit":"Rupees", "minValue":"0", "stepValue":"1", "appendModeinInput":"prefix", "maxValue":"1000", "showInput":"true", "currencySymbol":"true", "amountFormatInd":"true", "appendModeinVal":"prefix", "additionalProperties":{}, "appendModeinScale":"prefix" }
   EVENT_CONFIG	(NULL)
   VALIDATION_CONFIG	(NULL)
   LOV_CATEGORY	(NULL)
   LOV_PARENT_ID	(NULL)
   LST_UPD_DT	2021-11-01 19:59:27

The following screen shot showcases a slider form item with the currency symbol in the functional application, Modelhouse:



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