Checkbox and Checkbox List Screen Components

Introduction

The Checkbox and Checkbox List Screen Components are used to enable or disable options. The Checkbox is used when only one option can be selected or deselected, while the Checkbox List allows the user to select or deselect multiple options at the same time.

Checkbox Screen Component

A Checkbox is an option that the user selects or deselects to enable or disable an individual option. If the Checkbox is selected, it sends an input value of true to the server. If the Checkbox is not selected, it will send a null input value to the server. The built-in Boolean Converter has a special handling for the Checkbox Component: the input value null is translated to false.

While single Radiobuttons can be grouped, single Checkboxes cannot. Adding multiple Checkboxes with the same Binding Expression to a screen results in Checkboxes overwriting each other's values if the screen is submitted to the server.

Configuration

Checkbox properties (Properties tab) are:

  • Text - Defines the label text of the checkbox.

Checkbox Style Business Object

The Checkbox Style Business Object allows styling checkboxes consistently.

States

The Checkbox Style Business Object has the following states:

  • Default
  • Disabled
  • Error

Styling Properties

  • Inner Spacing: defines the space between the element inside the Checkbox and the border.
  • Outer Spacing: defines the space between the element outside the Checkbox and the border.
  • Text: refers to a Text Style Business Object to define style of the option label displayed next to the checkbox.
  • Checkbox: refers to a CheckboxInput Style Business Object to define the style (outline and spacing) of the checkbox.
  • Error Box (virtual): refers to an ErrorBox (virtual) Style Business Object to define the style of the error message when in Error state.

For more information on Style Business Objects and styling properties, refer to the Style Business Object article.

Checkbox List Screen Component

A Checkbox List is a list of options that the user can enable or disable individually.

Configuration

Properties tab

Checkbox List properties are:

  • Orientation – Whether the options are distributed horizontally or vertically.
  • Alignment – Alignment of the text labels relative to the Checkboxes.

Data Source tab The Data Source tab allows specifying the options shown in the list. For some of the Data Sources, you can also specify label texts directly.

If multiple Checkboxes are selected when the page is submitted to the server, the values of all selected Checkboxes are concatenated with a "|" as separator. The order in which the values are concatenated is not defined. Use the Expression Function CONTAINS to check if a value is included or not.

Checkbox List Style Business Object

The Checkbox List Style Business Object allows styling checkbox lists consistently.

States

The Checkbox List Style Business Object has the following states:

  • Disabled
  • ReadOnly
  • Error

Styling Properties

  • Inner Spacing: defines the space between the element inside the Checkbox List and the border.
  • Outer Spacing: defines the space between the element outside the Checkbox List and the border.
  • Text: refers to a Text Style Business Object to define style of the option label displayed next to each checkbox.
  • Checkbox: refers to a CheckboxInput (virtual) Style Business Object to define the style (outline and spacing) of the checkboxes.
  • Error Box (virtual): refers to an ErrorBox (virtual) Style Business Object to define the style of the error message when in Error state.

For more information on Style Business Objects and styling properties, refer to the Style Business Object article.

Checkbox Input (virtual) Style Business Object

The CheckboxInput (virtual) Style Business Object has the following states:

  • Disabled
  • Focused
  • ReadOnly
  • Error

The CheckboxInput (virtual) Style Business Object has the following styling properties:

  • Outline: defines the color of the checkbox border.
  • Outer Spacing: defines the space between the checkbox border and the border of the outer element.