Selection Controls

This page describes how to set up and configure the Selection Controls component which allows you to add radio, or checkbox input to your dashboards.

The following example shows some radio buttons added to a dashboard.

 

Screenshot

Set up Selection Controls

To set up a Selection Controls component, click-and-drag the component into the workspace and configure the following:

  1. Use a data source to define the items in the selection control.

  2. In the mapping define which column represents the text labels in the selection control, and which column is the value passed to the view state on selection.

  3. Set the Selected Value as a view state parameter which carries the value of the selected item.

Refer to Selection Controls properties described in the next section for details on additional properties.

Selection Controls properties

The following sections provides details on how to configure the properties of the Selection Controls component.

Basics

Open the Basics properties on the right and configure the properties described in the following table.

Screenshot

Field

Description

Name

Enter a name for the component.

Data Source

A data source: include the list of values to pass into the linked View State Parameter and possibly a list of value names to display in the dropdown.

 

The following example shows a query for a radio button data source.

Screenshot

Tip

When using Data Source to create a set of radio buttons, ensure Use Data Source is checked and Data Source Mapping is defined.

The following is a sample query to use is (if connecting to the sample data connection source htmlevalcongroup available in the sample demo dashboard set):

q

Copy 
select distinct src from dfxQuote

Selected Value

The view state parameter populated on selection.

Selected values

Label

Label description for the Radio Button.

Use Data Source

When checked, Data Source is used to build a Radio Button.

Accept Empty Values

When checked, a null value is available for selection.

Force Selected Value

When checked, the Radio Button always populates a Selected ValueView State Parameter; either default or selected value (which may be null if not set).

Multi-select

When unchecked only a single radio button can be selected. This is the default behavior.

When checked, multiple radio button selections are supported and selected items passed to the Selected Value View State Parameter.

When checked the Double Click property is displayed.

 

Screenshot

Double Click

When Multi-select is enabled, this field is displayed.

When this is checked it allows users to quickly select-all or deselect-all items depending on the current selection state.

  • If no items are selected, the first double-click selects the clicked item; the next selects all.

  • If all items are selected, a double-click deselects all except the clicked item.

Items Layout

Configure Radio Button layout: Horizontal or Vertical.

Horizontal

Radio button alignment: Left, Right or Center.

Vertical

Radio button alignment: Top, Middle or Bottom.

Label Width

The width of the main label.

Item Action Event

Sets the type of action event when useDatasource is set to false

  • None - This is the default. No action when changing a selection.

  • Always - Always runs actions when changing a selection.

  • Index - Only run actions when changing to the selected index.

  • Value- Only run actions when changing to the selected value.

Data source mapping

Configure the properties described in the following table.

Screenshot

When a Data Source is used to populate Radio Buttons, the items of the Data Source represent values. Labels must be assigned using Data Source Mapping otherwise the list is empty.

Field

Description

Value

The column of the Data Source corresponding to the values to be passed into the Selected Value View State Parameter.

Text

The column of the Data Source corresponding to the text to be displayed as the dropdown options.

Items

If Data Source is not used to create Radio Buttons, individual values can be specified in the Items menu.

Screenshot

Action

Refer to Actions for details.

Style

Configure the property described in the following table.

Field

Description

Label Template

Screenshot

Sets the label text for each selection item. The parameters passed to the template depend on whether Use Data Source is enabled.

  • if using a data source then the parameters reflect the column names

  • if inputting items manually then Text and Value parameters are passed

Refer to Style for common settings .

Format, Margins

Refer to Style for common settings .

Further Reading