Checkbox Component Nexus Component Styling

Checkbox Component Classic Styling

Checkbox Icon

The Checkbox component inserts a checkbox on the canvas.

The Checkbox component is supported in the Input view and is found in the Data Entry section of the Components tray.

Checkbox Component

See Add Board Components for details about adding components to a view.

Settings

The following settings are available.

Checkbox settings

Field

Description

Procedure

Label

A unique identifier that briefly describes the component in the user interface. The text you enter appears beside the checkbox.

Enter between 2 - 50 alphanumeric characters, excluding special characters.

Label Position

The location of the checkbox label in relation to the checkbox.

Select an option.

DB Field Name

The wording that appears beside the checkbox (for example, Yes or No). The text in this field becomes the database field name.

Enter between 2 - 50 alphanumeric characters, excluding special characters.

Checkbox Mode

Sets the checkbox to display as either a checkbox or a toggle switch.

Select an option.

Checked

Setting that determines if the checkbox is selected by default.

Turn the toggle on to set the default checkbox setting to selected.

Turn the toggle off to set the default checkbox setting to unselected.

Required

Adds a red asterisk to the end of the label indicating that the field is mandatory.

Turn the toggle to on to indicate the field is required.

Checked Value

The value indicating the checkbox is selected. This record will be added in DesignStudio in Code Mode and in WebEOC Nexus when a user adds a record and the checkbox is selected.

If you leave the Value field blank:

  • In DesignStudio, in Code Mode, the checkbox component will not have the "value" attribute.

  • In WebEOC Nexus, if records are added with the checkbox selected, the default value "on" will be added in the code.

If you enter text in the Value field (for example, "Checked" or “Yes”):

  • In DesignStudio, in Code Mode, the checkbox component's value attribute will contain the text from the Value field in Design Mode.

  • In WebEOC Nexus, when records are added with the checkbox enabled, the value will be saved as specified in the Value field in DesignStudio.

Style

The following style option is available.

Checkbox style option

Field

Description

Procedure

Help Text

The tooltip that appears when the pointer is over the checkbox.

Enter between 2 - 50 alphanumeric characters, excluding special characters.

Conditional

The following Conditional settings are available.

Conditional settings

Field

Description

Procedure

Conditional Settings

The component only appears when certain conditions in relation to another component are met.

See Add a Conditional Component.

Actions Toolbar

The following actions are available when you select any component on the canvas in the Board Workspace when working with Nexus Component Styling.

Actions descriptions
Icon Name Description Procedure
Settings Icon

Settings

Opens the Properties tab next to the Components Tray.

You can modify the component’s settings, such as label, database field name, help text, style, and conditional settings.

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Settings icon. The Properties tab displays on the right next to the Components tray.

  3. Update the settings as needed.

    Changes display in real time.

Move Icon

Move

 

This icon is not used.

To move the component, click and drag it to its new location.

Copy Icon

Clone

Copies the current component and its settings, then pastes it after the current component.

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Clone icon. The Properties tab displays on the right next to the Components tray.

  3. Edit the settings for the cloned component.

    Changes display in real time.

Delete Icon

Delete

Deletes the selected component.

  1. In Design mode, click the component on the canvas. A toolbar appears on the top right.

  2. Click the Delete icon.