Versions Compared

Version Old Version 3 New Version 4
Changes made by

Lakshminarayanan1 S CTOO (Unlicensed)

Lakshminarayanan1 S CTOO (Unlicensed)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

  • Form Items > Data Selection > Slider Field:

Image RemovedImage Added


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

...


  • Image Added

APIs:

  1. To create slider thumbs dynamically

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

    Code Block
    languagejs
    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:

    Code Block
    languagejs
    fm.setMinValue("ITEM_ID","500");
/* Here, 
*  'fm' refers to the form manager's object.
*  'setMinValue' 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:

    Code Block
    languagejs
    fm.setMaxValue("ITEM_ID","10000");
/* Here, 
*  'fm' refers to the form manager's object.
*  'setMaxValue' 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 maximum range on form initialization

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

    Code Block
    languagejs
    this.fm.registerHandler("cbxpreinitialize", 
	function(fm, event, fieldName, value) 
	{
		return
		{   
			'ITEM_ID': 
			{
				'setMaxValue' : 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.
*  'setMaxValue' is the API for dynamically set the maximum range.
*  '10000' refers to the number of thumbs for the slider.
*/


...

#

Property

Description

Sample Value

1

Form ID

Unique ID of the Form on which you want to place the Form Item.

FORM_PURCHINVOICE

2

Item ID

Unique ID to the Form item.
This value is automatically configured once the form is selected from the pop-up window.

AMT_INVOICE

3

Item Type

To identify the item type in a form.


4

Channel

Assigns the form item compatibility for various devices.

All Devices

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.

payments

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 KeyAmount (in Lakhs)

Domestic Fund Transfer Amount 

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.

Info

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

18Add Icon

Image Modified
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: 

  1. ClickImage Modifiedicon 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. 

    Image Modified
  2. ClickImage Modifiedicon to choose an icon for the form item.  
    Image Removed
    Image Added
  3. 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.   

    Image Modified
  4. 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. 

    Image Modified
  5. To add a customized icon, click Custom tab.  

    Image Modified
  6. 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. 

    Image Modified
    The customized image appears under the category of Custom Images.  

    Image Modified
Selected
19

Minimum Input Size

Indicates the minimum number of characters within the text controls.

60

20

Maximum Input Size

Indicates the maximum number of characters within the text controls.

8100000

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:

  1. Select the form item in the form designer area.
  2. Click the Switch icon () on the primary ribbon.
  3. 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

23Event 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.


24Settings Menu
  1. Click SettingsImage Addedicon to configure the settings of the Slider form item. 

    Image Added

    The Settings menu appears. 

    Image Added

  2. In the Append mode in value field, select the Suffix option. 

    Note
    titleNote

    The Append mode in value enables you to append a text as a prefix or a suffix to the input value. If you choose the Do not append option, no text will be appended to the input value. On selecting Prefix, the text will be appended as prefix to the input value, whereas the Suffix option paves the way for the text to be appended as a suffix to the input value. 

    Image Added

  3. In the Append mode in scale field, select the Suffix option. 

    Note
    titleNote

    The Append mode in scale enables you to append a text as a prefix or a suffix to the input value of the scale. If you choose the Do not append option, no text will be appended to the input value of the scale. On selecting Prefix, the text will be appended as prefix to the input value of the scale, whereas the Suffix option paves the way for the text to be appended as a suffix to the input value of the scale.

    Image Added

  4. In the Unit field, type the input text, e.g. Rupees. 

    Note
    titleNote

    The input text, entered in the Unit field, is determined as the Prefix or Suffix text of the Append mode in value and Append mode in scale fields. 

    Image Added

  5. In the Increment each step by field, type a relevant number. The entered number will determine the step-count of the Slider form item. 

    Note
    titleNote

    The entered value in the Increment each step by field must be relevant to the number limits, as per the values, provided in the Minimum Input Size and Maximum Input Size fields. 

    Image Added

  6. To enable the input field, click the Show input field toggle. 

    Image Added

  7. To enable the Amount formatting indicator, click the Amount formatting indicator toggle. 

    Note
    titleNote

    The Amount format will get displayed, if the Amount formatting indicator is enabled.  

    Image Added


    The following screen shot showcases the enabled fields in the Slider form item: 

    Image Added