Skip to main content
Matrix42 Self-Service Help Center

Choice Control

Overview

Choice Control allows creating a collection of radio buttons describing a set of related options. Only one radio button in a given group can be selected at the same time. Each choice option of the control has a configurable panel:

  1. Choice options (radio buttons)
  2. A panel of the selected option

01_overview_example1.png

The content of the Choice Control also depends on the selected view modes:

  • Radio buttons with Panel
  • Radio buttons
  • Selected Panel

Supported Layout Types

Choice Control can be used in the following Layouts:

Users with Administrator rights can change the default settings and add the control to other types of layouts via Supported Widget Types field in the Administration application → User Interface → Control Descriptors → Edit action → Advanced tab.

Configuration

To configure the Choice Control for one of the supported Layout types:

  1. Open the Layout Designer
  2. In the Toolbox, choose Choice Control
  3. Drag&drop the Choice Control on the canvas of the edited Layout
  4. Add necessary Choice Options
  5. Configure the Panels by adding and configuring necessary controls from the Toolbox:

choice_control_configuration.png

Properties and Settings

Property group Property name Description Default Example

Model

Choice Options

To add and configure the choice option use the following buttons:

add_choice_option.png adds a new choice option. Define the internally used Name and Position of the new option and click Save.

edit_name_position.png allows edition the Name and Position of the Choice Option

remove_choice_option.png removed the Choice Option

expand_choice_option_configuration.png expands the Choice Option configuration and allows defining the following properties:

  • Title: set localizable or static value for the choice option name that will be displayed in the application;
  • Count Indicator: obsolete;
  • Description: internally used description of the panel;
  • Disabled: by default is set to the static value false and the option can be selected, while true shows the option but it cannon be selected:
    ChoiceOption_disabled_example.png
    Disabled false and disabled true examples
    Instead of the static value, you can set the value from the Model. In this case, the choice option display mode depends on the value retrieved from a specified data model field.
  • Visible: by default is set to static value true and the option is shown; if set to false the option is not shown. Instead of the static value, you can set the value from the Model. In this case, the choice option visibility depends on the value retrieved from a specified data model field.
choice_options_example.png

Selected Option

The data source name for the option that is pre-selected by default in the Choice Control. choice_option_selected_option.png

Hidden Choice Options

Optional field that provides another way for configuration of the Choice Options visibility.

For instance, to hide necessary Choice Options you can enumerate their Names as comma-separated static values:

hidden_choice_options1.png

Hidden Choice Option configuration example with Static Value

hidden_choice_options_eg.png

Common

Disabled

Defines the entire Choice Control display mode: 

  • Static value:
    • False (default): allows choosing from one of the configured Choice Options;
    • True: pre-configured options are shown, but none of them can be selected. All data retrieved to the Choice Control is disabled:
      choice_control_disabled.png
  • Model: allows setting the value from the Model. In this case, the Choice Control display mode depends on the value retrieved from a specified data model field.
False choice_control_disabled_false_default.png

Help

help icon and tooltip for information displaying as:

  • ❌  not set: help icon is not displayed;
  • static value: manually entered text displayed in a pop-up window. The text of the prompted message is edited in a standard text editor and can include plain text, headings, links, and lists;
  • localizable:  plain text specified per each available in the system locale. Shows appropriate localized help message according to the currently selected by the user language profile settings;
  • model: displayed data is retrieved from a specified data model field.
    choice_control_help1.png
    Help icon and tooltip with static HTML content example
choice_control_help_example.png

Name

automatically generated name or identifier of the control.  auto-generated choice_control_name.png

Appearance

View Mode

Possible options:

  • Radio buttons with Panel (default): the control displays a list of options. When selected, each option has its specific configurable panel, for example, a panel where you can specify a Wizard:
    01_overview_example.png
  • Radio buttons: the control displays only a list of options. Only one option can be selected and in comparison to the previous View Mode the panel configuration is not suggested:
    choice_option_view_mode_radio_only.png
  • Selected Panel: shows only configurable properties from the selected panel. Radio buttons with choice options are not shown:
    choice_option_view_mode_selected_panel.png
Radio buttons with Panel choice_option_view_mode.png

Direction

Defines the direction of the radio buttons alignment on the layout. Possible options:

  • Vertical (default): all choice options are aligned vertically.
    choice_control_vertical.png
  • Horizontal: depending on the screen size, the choice options are aligned horizontally:
    choice_control_horizontal1.png
    At the same time, the control descriptor content is responsive, and depending on the screen size the choice options are automatically adjusted and regrouped to a necessary number of columns to provide a better user experience.
    Additionally, the Horizontal direction allows defining the choice option Buttons Width. By default, it is set to 320px, but can be redefined and set in px, %, em or rem:
    choice_control_horizontal_button_width.png
Vertical choice_option_direction.png

Visibility

Control display modes:

  1. Static value: check-box options
    • selected (True): control displaying on the page layout template is enabled; 
    • disabled (False): the control is not shown on the page layout template.
  2. Model: select data model source out of suggested data with boolean type. The control displaying depends on the current value of a selected record.
True Screen Shot 2021-12-06 at 5.58.58 PM.png

Margin

obsolete  

Padding

obsolete  

Flex option

obsolete Fixed  

Device Visibility

Desktop

This property allows improving user experience by managing device visibility options.

For instance, the control can be hidden from the preview when it is too large and contains a lot of columns that cannot fit the small screen of a mobile device.

The application checks the user device's screen resolution and shows or hides grid preview based on the selected check-box options settings:

  • disabled: the grid is not displayed;
  • selected (default): the grid is shown on the page.
True Screen Shot 2021-12-06 at 5.59.39 PM.png

Tablet

True

Mobile

True

❌ - not set

  • Was this article helpful?