Choice Control

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

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

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:

Properties and Settings

Property group Property name Description Default Example

Model

 

 

Choice Options

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

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

allows edition the Name and Position of the Choice Option

removed the Choice Option

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

Selected Option

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

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 Option configuration example with Static Value

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:
  • 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

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.
    Help icon and tooltip with static HTML content example

Name

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

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:
  • 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:
  • Selected Panel: shows only configurable properties from the selected panel. Radio buttons with choice options are not shown:
Radio buttons with Panel

Direction

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

  • Vertical (default): all choice options are aligned vertically.
  • Horizontal: depending on the screen size, the choice options are aligned horizontally:

    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:
Vertical

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

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

Tablet

True

Mobile

True

❌ - not set