In this article you will learn about input controls in Helical Insight. The input controls are predefined structures where user gives certain input and based on that output is generated, for example generating a chart for a date range. Mainly, input controls are used in dashboard, charts, reports. In Helical Insight there are certain components available which can be used directly and if not then there is provision to add custom input control based on your business requirement using a script or an HTML.

Following Components are available for use :

• Select
• Select with search
• Date Picker
• Date-Range Picker
• Button
• Charts
• Custom

All the components have some basic and common configuration. The configuration options are listed in the table below

Option	Format	Default	Description
listeners	Array	[ ]	A list of variables on whose change, this component needs to be updated
parameters	Array	[ ]	A list of variables which are to be set by this component. This also depends on type and is explained below in detail.
executeAtStart	boolean	FALSE	This specifies if the component is to be updated/initialised after Dashboard.init()
map	Int	depends on type	This is sent along with requestParameters to Data-Layer and must match map-id there
options	Object	depends on type	Explained in detail for each component, below.
requestParameters	object	{ }	A list of parameters that are to be sent with update request of the component. It depends on your configuration of dashboard It consists of key and value pairs. value is the name of the variable whose value is to be used and key is the name with which the value is to be sent. { NameToUse : "var1" }
name	String	(required)	This will be used as id for the component and also referencing it in other options
type	String	(required)	This type of the component to be used. Each type is explained in detail, below.
htmlElementId	String	(required)	This is the jQuery selector of the HTML element, where the component is to be appended. Any selector can be used but using an id is preffered. eg: '#myFirstComponent'

Select Component

Select component can be used by using type : “select”. It has two modes single and multiple, which can be set via options, which are explained below:

Option	Format	Default	Description
multiple	boolean	FALSE	Determines whether the component must be single-select (false) or multi-select (true).
display	string	(required)	The key/column name of the data that should be used as display value
value	string	(required)	The key/column name of the data that should be used as actual value

Search with Select Component

Select2 component can be used by setting type : “select2”. Similar to select, it has two modes single and multiple, which can be set via options, which are explained below:

Option	Format	Default	Description
multiple	boolean	FALSE	Determines whether the component must be single-select (false) or multi-select (true).
display	string	(required)	The key/column name of the data that should be used as display value
value	string	(required)	The key/column name of the data that should be used as actual value
placeholder	string	"Select an option"	The text to be shown when no option is selected

Date Picker and Date-Range Picker

Date Picker and Date-Range Picker components can be selected by using type : “datepicker” and type : “daterangepicker” respectively. Both components have almost identical options and are explained below:

Common Options

Option	Format	Default	Description
displayFormat	string	"YYYY-MM-DD"	Determines the format of the date that is displayed to the user. The format is same a used by moment.js and are explained below.
outputFormat	string	"YYYY-MM-DD"	Determines the format of the date that is stored in the variable and used while querying databases. The format is same a used by moment.js and are explained below.

Extra Options for daterangepicker

Option	Format	Default	Description
separator	string	' to '	The separator to be used while displaying the dates.

Date Formats

	Format	Output
Month	M	1 2 ... 11 12
Month	Mo	1st 2nd ... 11th 12th
Month	MM	01 02 ... 11 12
Month	MMM	Jan Feb ... Nov Dec
Month	MMMM	January February ... November December
Quarter	Q	1 2 3 4
Day of Month	D	1 2 ... 30 31
Day of Month	Do	1st 2nd ... 30th 31st
Day of Month	DD	01 02 ... 30 31
Day of Year	DDD	1 2 ... 364 365
Day of Year	DDDo	1st 2nd ... 364th 365th
Day of Year	DDDD	001 002 ... 364 365
Day of Week	d	0 1 ... 5 6
Day of Week	do	0th 1st ... 5th 6th
Day of Week	dd	Su Mo ... Fr Sa
Day of Week	ddd	Sun Mon ... Fri Sat
Day of Week	dddd	Sunday Monday ... Friday Saturday
Day of Week (Locale)	e	0 1 ... 5 6
Day of Week (ISO)	E	1 2 ... 6 7
Week of Year	w	1 2 ... 52 53
Week of Year	wo	1st 2nd ... 52nd 53rd
Week of Year	ww	01 02 ... 52 53
Week of Year (ISO)	W	1 2 ... 52 53
Week of Year (ISO)	Wo	1st 2nd ... 52nd 53rd
Week of Year (ISO)	WW	01 02 ... 52 53
Year	YY	70 71 ... 29 30
Year	YYYY	1970 1971 ... 2029 2030
Week Year	gg	70 71 ... 29 30
Week Year	gggg	1970 1971 ... 2029 2030
Week Year (ISO)	GG	70 71 ... 29 30
Week Year (ISO)	GGGG	1970 1971 ... 2029 2030
AM/PM	A	AM PM
AM/PM	a	am pm
Hour	H	0 1 ... 22 23
Hour	HH	00 01 ... 22 23
Hour	h	1 2 ... 11 12
Hour	hh	01 02 ... 11 12
Minute	m	0 1 ... 58 59
Minute	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
Second	ss	00 01 ... 58 59
Fractional Second	S	0 1 ... 8 9
Fractional Second	SS	0 1 ... 98 99
Fractional Second	SSS	0 1 ... 998 999
Timezone	Z	-07:00 -06:00 ... +06:00 +07:00
Timezone	ZZ	-0700 -0600 ... +0600 +0700
Unix Timestamp	X	1360013296

Button Components

This component can be accessed by using type: “button”. Using it, one can trigger component update manually, if they don’t want to use listeners. Apart from the common configurations mentioned above, button has one additional configuration and also a different behaviour for executeAtStart which is explained below.

Additional Configuration

Option	Format	Default	Description
triggers	array	[ ]	It must be an array of the name properties used while defining the components. It will trigger update of all the components in the array on click
executeAtStart	boolean	FALSE	For button, this specifies if the components specified in triggers are to be updated/initialised after Dashboard.init()

Options

Option	Format	Default	Description
display	string	"Submit"	The text to be displayed on button
classes	string	"btn-primary"	Space separated string of classes to be applied to the button, which can be used for styling or custom actions.

Charts Component

This component can be accessed by using type: “chart”. Apart from the common configurations mentioned above, chart has one additional configuration which is explained below. Additional Configuration

Option	Format	Default	Description
Vf	object	(required)	It must have two keys, namely file and id. file: The name of the file that contains the information about the chart visualizations id: The id of the chart from the visualization file, that is to be displayed

Options

Option	Format	Default	Description
actions	array	[ ]	Creates a custom menu. It must be an array of objects and each object must contain a key and value pair where key will be used as id of the element and value will be used as display value. The objects allow for grouping of controls. Note: The actions are to be specified manually by the developer.
menuLabel	string	'Actions'	The label to be used for custom menu

  Custom Componenets This component can be accessed by using type: “custom”. This component can be used to write your custom script. This component has a slightly different configuration. Configuration

Option	Format	Default	Description
Name	string	(required)	This will be used as id for the component and also referencing it in other options
Type	string	(required)	Type is "custom"
listeners	array	[ ]	A list of variables on whose change, the customScript will be called.
htmlElementId	string	(required)	This is the jQuery selector of the HTML element, where the component is to be appended. Any selector can be used but using an id is preferred. eg: '#myFirstComponent'
executeAtStart	boolean	FALSE	This specifies if the component is to be updated/initialised after Dashboard.init()
customScript	function	(required)	This function has two arguments, first is reference to the element (jQuery Object) given in htmlElementId and the second is an object containing the variables specified in listeners with name as key and its value as value.

  For more Info, Contact us at : demo@helicalinsight.com