Content

A content / label control can simultaneously handle all static content of the page, as well as dynamic labelling based on named ranges defined in the spreadsheet model.

Through the dynamic content injection engine, users can utilize a special tag in order to inject the value of named ranges of all types (i.e. single, list, and table) into the content of these controls.

Edit Content

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

Modifying HTML Contents

Clicking on the HTML (</>) button will change the mode of the editor to HTML-mode. From this mode, users can enter their own HTML contents, 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 for security purposes.

Dynamic Content Injection

The value of calculated and input named ranges can be injected directly into the HTML contents of a content / label control.

All dynamically injected variables will be nested between {{ }} brackets. To begin the process of injecting a variable into the contents, simply begin entering the curly brackets and some helpful hints will show up to guide you through the process.

Single Named Ranges

Upon opening the curly brackets, you will note a list of Single Named Ranges (SNR). Selecting one of these from the hints will populate the content control with the named range’s name.

If you would like no formatting to be applied, you can simply close the two brackets and the value will be injected as an unformatted value.

Alternatively, several formatting options are available when injecting the value of a Single Named Range (SNR). To utilize any of the formatting options, simply type in a colon character (:) after the named range’s name to see a list of supported data types.

These data types (Integer, Decimal, DateTime or Text) are necessary for the determination of the actual format, so select one that fits the assumed value of the Single Named Range (SNR). Text data type is different from the others since it will get the formatted value directly from the PSC. Text data type has an optional paramater None for format which has no effect on the output.

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

{{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

List and Table Named Ranges

These types of named ranges are entered in the same format as Single Named Ranges (SNR), except they do not support formatting of the output values. Using a List or Table Named Range within two sets of curly brackets will inject a full table into the content / label control.

This is best utilized when looking to test the values that exist within a named range, rather than for final presentation of a list or table named range. To present a readable and customizable format, utilize an Input or Output Grid control to display this type of data.

Visible

Indicates whether the content / label control is visible.

This can be configured as Always or Never to indicate whether the content / label 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 content / label can be configured to reflect the value of that named range using the ‘By Value Of’ setting.

Tags:
Previous Slider
Next Output Grid