Check out the walk-through given below on how to use a Combobox filter component in the Designer.
Combo Box is used to filter data on any associated components. Selecting an item from the drop down menu will change the data displayed in the associated components.
When user wants to filter data on associated components. When users wants to select only a particular item.
The user can get the reflection of the chart by enabling the shadow option.
The user can also change the color and increase/ decrease the transparency of the shadow.
The user can change the height, width, top and left position of the combo box filter component.
Font color-size-weight-family can be adjusted from the General Properties.
The user can select between different 'Selection' options.
If selection is default, then no checkboxes will appear, directly user need to select a value by scrolling.
If the selection is 'Single' then we can search one value and select. It is used when we have lots of values to select.
If the selection is 'Multiple', then more than one value can be selected.
If the user sets a value in selected index, that value gets displayed initially in the filter. In this scenario the user needs to enable the notify GV update.
Please Note: If initial visibility is not enabled, then the chart won’t be available for the first preview.
In this section user can set the Rollover color, Selection color, Background color, and Chrome Color.
If user needs to see the title, then enable that option. Given a title that user wants to see along with the filter values in description field.
Hierarchical Combo Box is similar to Check Box and Combo Box but here the list will be arranged in the hierarchical manner and users will be allowed to select multiple items simultaneously.
When users should be given the option to select 1 or more cities that will be used in the table/chart (instead of displaying data for all cities)
Background
The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
General
The user can change the height, width, top, left. If initial visibility is not enabled, then the chart won’t be available for the first preview. Hierarchy level can be selected between Multiple or Single. Also, user can set the selection limit as either user can show it in the preview or not. Enable the Notify GV Update so that when user change values in this filter, those values get updated in the filter.
Style
If user set a Rollover Color, then when user move from one cell to another, they can see those cells in that color. Selection color highlights the selected cells. Also, they can adjust the panel color and background color as well as their font properties.
Check out the given walk-through to understand the Checkbox filter component.
The checkbox is used to filter data on any associated components. Enabling a checkbox will change the data displayed in the associated components.
To filter data displayed in the associated components
To select multiple items at a time
The user can change the height, width, top, and left position for the checkbox filter component.
The user can set a name to the label and change its font color-style-weight-family from the General Properties.
If the Show Checked option is enabled a checkmark will appear by default.
Chrome color is used to set the component background, the user can change its transparency.
A value can be set to the Checked Value so that when the user clicks on the check box, this value will get passed.
Please Note: If initial visibility is not enabled, the chart won’t be available for the first preview.
The user can provide multiple checkboxes while enabling this property option.
Multiple Checkboxes: Enable the Multiple Checkboxes option from the MultiCheckbox Settings property to add multiple checkboxes with labels.
Toggle Checkboxes: Enable the option to access the new Toggle Switch UI as checkboxes.
Manage Checkbox: Click the Manage Checkbox icon to access the dialog window for managing multiple checkboxes.
The user can add or delete checkboxes.
Provide Label Text, select the default display to be checked or unchecked, and provide value for the checked toggle checkboxes.
Direction: Select an option from the drop-down menu to choose the direction of the checkboxes. It can be Horizontal or Vertical.
The user can style the toggle switch UI using the Toggle Style property option.
The user can modify the Width, Height, and Toggle Switch Shape (Round or Square) from the Toggle Stypes property option.
The user can also define colors for the Toggle Slider, Checked Color, and UnChecked Color.
The user can get the reflection of the chart by enabling the shadow option.
The user can also change the color and increase/decrease the transparency of the shadow.
The following use case explains the steps to connect and use a Checkbox with a Data Grid component.
Drag a Data Grid component to the Designer canvas.
Associate a Data Connection with it.
Drag a Checkbox component from the Filter group to the canvas.
Open the Checkbox Properties, provide the necessary properties, and apply them.
Provide the text for the Label.
Provide the Checked Value.
Keep the Unchecked Value blank.
Use the component object page to write the required script at the component level.
Configure the Condition tab by providing a field value for the conditions (the field State is chosen in the given image).
Click the Preview icon to preview the Dashboard.
Use a checkmark in the given box to display the Checked Value in the chart.
Uncheck the Check Box to display the Unchecked Value in the chart (In this case, no value has been assigned as Unchecked Value so it will display all the records).
Check out the below given walk-through on how to use the Radio Button filter component in Designer module.
The Radio Button component helps to filter data on other components.
The user can get the reflection of the chart by enabling the shadow option can also change the color and increase & decrease the transparency of the shadow.
The user can change the height, width, top, left.
If the Initial Visibility option is not enabled, then the chart won’t be available for the first preview.
The user can view the Radio button either in the form of Button or as radio.
Please note that in this case, the selected View Type is Enhance Button.
Font color-size-family-style can be modified for button from the General Properties.
Also, the spacing between the buttons can be adjusted.
Selection color can be set, so as to identify which button user has selected.
Chrome color sets the background color for these buttons also its transparency can be changed.
Orientation can be changed between horizontal or vertical. Also enable Notify GV update so that whatever value user update/click in the button, its value gets updated in the connection.
Check out the below given walk-through on how to use the List filter component in Designer module.
List is a component used to filter data. All available items are displayed as a list. Users can select multiple items simultaneously by holding the CTRL-key. Select items will determine the data that is displayed in any associated chart(s).
Here user can set the Background color and adjust its transparency. The user can get the reflection of the chart by enabling the shadow option can also change the colour and increase & decrease the transparency of the shadow.
The user can change the height, width, top, left.
If the Initial Visibility is not enabled, then the chart won’t be available for the first preview.
List swap is enabled, so that when the users select the values, they can move it to the second column (selected value list) and if didn’t need a value in the selected list, they can move it to the Initial Column itself.
Selected index can be set, so that cell value is selected initially. Enable the Notify GV Update so that when they change values in this filter, those values get updated in the filter.
If user set a Rollover Color, then when they move from one cell to another, they can see those cells in that color. Selection color highlights our selected cells. Also, user can adjust the font and border properties.
If user need to see the title, then enable that option. And in description section give a title user want to see along with the filter values.
