Checkbox

A checkbox control allows end users to enter a TRUE or FALSE value. Each checkbox must be associated with a Boolean Single Named Range (B.SNR) in the workbook (i.e. a range pointing to a single cell that evaluates to TRUE or FALSE).


Named Range

A list of all Boolean Single Named Ranges (B.SNR) from the workbook. The value entered into this input will be sent to the calculation engine, as if the user entered the value into the spreadsheet model.

Selecting a named range from the list may default some of the other checkbox properties based on some metadata captured from the spreadsheet model, such as the default value.

Named ranges containing formulas are excluded from the list, as well as named ranges that have already been bound to a different input in your user interface.


Name

The Name property constitutes the label that will appear in the user interface.


Style

The Style property will determine the coloring of the checkbox. The predefined color styles are as follows:

  • Primary
  • Info
  • Warning
  • Success
  • Danger

Users can customize the actual corresponding styles using Cascading Style Sheets (CSS) in the Stylesheet Designer.


Is Toggle Style

The Is Toggle Style checkbox indicates whether or not the checkbox will appear as a toggle, rather than a standard checkbox.


Alignment

The Alignment property determines the horizontal orientation of the checkbox control. This value can be set to Left, Center, or Right. The default horizontal alignment is Center.


Default Value

The Default Value property specifies the value that will be visible in this checkbox when the user interface is first loaded. This property may have a suggestion populated if the target named range for the checkbox includes a default value.

For checkbox controls, the default value is either TRUE or FALSE.


Tooltip Type

Tooltips are informative message boxes that are displayed when you mouse-over or click on a control. The Tooltip Type property determines the message style, and when the information will be shown.

  • Tooltip: The content will appear in a small bubble when the user enters focus on the target input by moving their mouse over the control.
  • Popover: The content will appear in a pop-up box when the user clicks on the target input.


Tooltip Content

This property accepts the special {FriendlyName} tag if you want to insert the value of the Name property of this control into the tooltip.

Tooltip

The Tooltip Content property determines the information that will appear in the tooltip bubble.


Popover

The Tooltip Content property determines the information that will appear in the popover message.

Clicking on the Edit Content button will launch an instance of a rich-text editor that supports HTML code. The editor includes a simple menu for inserting certain control sets such as tables, lists, images, videos, and links, as well as text formatting controls, such as boldness, highlighting, and font.

Modifying the HTML Content

Clicking on the HTML (</>) button will change the the editor to HTML-mode. In this mode, you can enter your own HTML code, including references to classes that are defined in the Stylesheets module. Click the ‘X’ button in the right corner to close this window and save your changes.

Styles that are defined in the Stylesheets module will not be visible in the User Interface Designer view of the application. These stylesheets are only loaded during the Preview and Published versions of the application.

Note that scripts that are injected into the HTML will be stripped from the contents control.

Dynamic Content Injection

The value of calculated, and input named ranges can be injected directly into the HTML contents of the popover.

All dynamically injected variables must be entered inside double curly braces – {{ }}. To inject a variable into the contents, begin by entering double curly braces, and the system will automatically display available fields.

Single Named Ranges

When you enter double curly braces, you will see a list of Single Named Ranges (SNR). Selecting one of these from the list will populate the name of the named range in the contents.

Several formatting options are available when injecting the value of a Single Named Range (SNR). To use any of the formatting options, simply type in a colon character (:) after the name to see a list of supported data types. If you don’t apply any formatting, the name will be injected as an unformatted value.

The data types (Integer, Decimal, DateTime, or Text) are necessary to determine the format of the field. The system will automatically format the value of the Single Named Range (SNR) when you select a data type. The text data type will get the formatted value directly from the calculation engine. Text data type also has an optional paramater (None) for formatting that has no effect on the output.

Upon selecting the data type, add a semicolon character (;) to begin defining the desired format for the output value. The .NET formatting standards apply to this property as outlined below.

Below are some examples.

{{NamedRangeName:Decimal;C2}}

  • When NamedRangeName = 12, the formatted value will be $12.00.
  • When NamedRangeName = 1.2345561, the formatted value will appear $1.23.
  • When NamedRangeName = ‘ABC’, the formatted value will appear blank.

{{NamedRangeName:Decimal;P3}}

  • When NamedRangeName = 0.12, the formatted value will be 12.000%.
  • When NamedRangeName = 1.2345561, the formatted value will appear 123.457%.
  • When NamedRangeName = ‘ABC’, the formatted value will appear blank.

{{NamedRangeName:Decimal;00000}}

  • When NamedRangeName = 1234.5678, the formatted value will be 01235.
  • When NamedRangeName = 1.2345561, the formatted value will appear 00001.
  • When NamedRangeName = ‘ABC’, the formatted value will appear blank.
Predefined Formats

In addition to manual format setting you may also use one of the predefined Numeric or Date and Time Formatting:

Integer (Input value: 1234)

  • {{ValueInteger:Integer;00}} => 1234
  • {{ValueInteger:Integer;#,##0}} => 1,234
  • {{ValueInteger:Integer;00000}} => 01234
  • {{ValueInteger:Integer;##-##}} => 12-34

 

Decimal (Input value: 123456.78)

  • {{ValueDecimal:Decimal;0.0}} => 123456.8
  • {{ValueDecimal:Decimal;0.00}} => 123456.78
  • {{ValueDecimal:Decimal;#,##0.0}} => 123,456.8
  • {{ValueDecimal:Decimal;#,##0.00}} => 123,456.78
  • {{ValueDecimal:Decimal;0.##}} => 123456.78
  • {{ValueDecimal:Decimal;00.00}} => 123456.78
  • {{ValueDecimal:Decimal;0,0.00}} => 123,456.78
  • {{ValueDecimal:Decimal;0%}} => 12345678%
  • {{ValueDecimal:Decimal;0.0%}} => 12345678.0%

 

Datetime (Input value: 12/05/2018 11:25:07 pm)

  • {{NamedRangeName:Datetime;yyyy}} => 2018
  • {{NamedRangeName:Datetime;MM}} => 12
  • {{NamedRangeName:Datetime;dd}} => 05
  • {{NamedRangeName:Datetime;yyyy/MM/dd}} => 2018/12/05
  • {{NamedRangeName:Datetime;MM/dd/yyyy}} => 12/05/2018
  • {{NamedRangeName:Datetime;dd/MM/yyyy}} => 05/12/2018
  • {{NamedRangeName:Datetime;HH}} => 23
  • {{NamedRangeName:Datetime;mm}} => 25
  • {{NamedRangeName:Datetime;ss}} => 07
  • {{NamedRangeName:Datetime;tt}} => PM
  • {{NamedRangeName:Datetime;HH:mm tt}} => 23:25 PM
  • {{NamedRangeName:Datetime;HH:mm:ss tt}} => 23:25:07 PM

Text

  • {{NamedRangeName:Text;None}} : None is an optional parameter
  • {{NamedRangeName:Text}} : Will work the same as above


Tooltip Position

The Tooltip Position property determines where the tooltip or popover will be positioned in respect to the target input.

If Auto is selected, the tooltip or popover position will be calculated automatically based on other parameters like the position of the target input, and content of the tooltip or popover.


Trigger Calculations

If Trigger Calculations is selected, changing the value in this input control will trigger a calculation. Calculations perform a server call with all of the inputs from the user interface and populate the output controls with the values from the updated calculation.

In workbooks with complex calculations, enabling calculations may lead to delays in the user experience.

The best practice when determining whether an input should trigger calculations should take into account the following factors:

  1. Does this input affect any calculated values? If the field is simply informational, then there is no reason to trigger a calculation.
  2. Does this input affect my user interface? If the field can change the visibility or enabled-ness of pages or other controls, then it is a good idea to trigger calculations when changes occur to the input.
  3. Will something else trigger calculations before this input is relevant? If the user won’t see the results of the calculations until reaching a different page, then you can hold off on triggering calculations until a button press or a different control’s value is changed.

Enabled

Indicates whether the checkbox field is enabled.

This can be configured as Always or Never to indicate whether the input is statically enabled or not.

Alternatively, if any Boolean Single Named Ranges (SNR) exist (i.e. ranges pointing to a single cell that evaluates to TRUE or FALSE), then the enabled-ness of the input can be configured to reflect the value of that named range using the ‘By Value Of’ setting.


Visible

Indicates whether the checkbox field is visible.

This can be configured as Always or Never to indicate whether the input is statically visible or not.

Alternatively, if any Boolean Single Named Ranges (SNR) exist (i.e. ranges pointing to a single cell that evaluates to TRUE or FALSE), then the visibility of the input can be configured to reflect the value of that named range using the ‘By Value Of’ setting.