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 ConfigurationOption | 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 |
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 |
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. |