Common Report Item Properties

All the report items in ActiveReportsJS share common properties that have one of the following types.

Scalar

These are the most basic property types: String, Number, and Boolean. After you set the value of a scalar property at design time, it can't change at runtime.

The Properties panel provides the text input for editing String values, the toggle switch for setting Boolean values, and the numeric up-down for setting Number values.

Enum

The Enum properties require you to choose a value from the pre-defined list. For example, the Page Orientation property of a report may be Portrait or Landscape. The editor of these properties is the drop-down list.

Length

The Length properties usually represent the size of some aspect of a report item, for instance, its dimensions. A Length value is a string consisting of two parts.

• The Value is a decimal number

• The Unit is one of the following units of measure

  • pt(points)

  • pc(picas)

  • in(inches)

  • mm(millimeters)

  • cm(centimeters)

Examples: 11in, 2cm, 0.25pt. The editor of these properties is the text editor.

Expression

An expression is a formula that composed using the expression language. The result of a formula is one of Scalar, Enum or Length types mentioned above. For example, when we say that a property is a string expression, this property's value should be an expression that evaluates to a string.

Static expressions do not change their value at runtime. Dynamic expressions can not be evaluated at design time and are used to set up conditional formatting or dynamic visibility.

The recommended way to modify expressions is to use the Expression Editor that can be invoked using the drop-down menu that appears if you click the box on the right boundary of a property editor.

The same drop-down menu allows you to reset the property to its default value.

Collection

A Collection is a list containing one or more items of the same type. Items can, in turn, consist of several properties of different types. The Properties panel has the Add Item and Show Items buttons on the right boundary of a Collection property. The former adds a default item into the collection. The latter expands the list of items and allows to delete or edit them.

Base properties

All the report items have the following set of properties.

• The Name is the String that identifies a report item and is displayed in the Report Explorer

• The Top and Left in Length units determine the location of a report item relative to its parent container, such as a report body or Banded List section.

• The Width and Height in Length units set a report item's size.

• The Tooltip is the string expression that sets the text displayed when a report reader hovers over a report item at preview time.

• The Bookmark is the string expression that allows a report item to be the target of the Jump To Bookmark interactivity action.

• The Label is the string expression that determine the text associated with a report item that appears in the Report Map and Table of Contents.

• The ZIndex is the number that specifices the report item's stack order in the output.

• The Direction expression that should evaluate to one of the following values specifies the default direction of a textual content within a report item.

  • LTR- text direction goes from left-to-right

  • RTL - text direction goes from right-to-left

• The Language string expression determines the default language to use for dates and number formatting within a report item.

• The Writing Mode expression that should evaluate to one of the following values sets whether the textual content within a report item is laid out horizontally or vertically as well as the direction in which text moves.

  • lr-tb - if the Direction is LTR, textual content flows horizontally from left to right. For RTL direction, content moves horizontally from right to left. The following horizontal line resides below the previous line.

  • tb-rl - if the Direction is LTR, textual content flows vertically from top to bottom, and the following vertical line resides to the left of the previous line. For RTL direction, content flows vertically from bottom to top, and the following vertical line resides to the right of the previous line.

Style properties

• The Background Color is an expression that should evaluate either to a cross-browser color name or to a hexadecimal color code, such as #face0d. You can choose a color using the drop-down menu of the Background Color property at design time.

• The Background Image allows setting an image to be used as the background. The drop-down editor provides a quick way to choose the image.

  • The Shared tab enumerates image files that reside in the same folder as the report template

  • The Embedded tab contains the list of embedded images

  • The Database tab shows the fields from the report datasets

  • Selecting any of the items on these tabs automatically sets the following properties that you can also configure manually if you click the expand icon on the right side of the Background Image property.

    • The Source specifies where the image come from

      • External - URL or a file on the local file system.

      • Embedded - embedded report images.

      • Database - a data set field that contains the image data in Base64 format

    • The Value expression is an image Id, for instance the URL

    • The MIME Type expression specifies the image type. Supported types are jpeg, png and svg

    • The Repeat enum property sets the arrangement of the background image if its size is less than the one of a report item.

      • Repeat - to repeat vertically and horizontally to fill the available size

      • NoRepeat - to display the image only once

      • RepeatX - to repeat horizontally to fill the available width

      • RepeatY - to repeat vertically to fill the available height

• The Border section includes several properties that allow you to set the appearance of a report item's border

  • The Width expression in Length units sets the default border width.

  • The Style expression that should evaluate to one of None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset values sets the default border style.

  • The Color expression that should evaluate either to a cross-browser color name or to a hexadecimal color code sets the default border color.

  • The default border Width, Style, and Color apply to the left, top, right, and bottom boundaries of a report item. You can set the individual border properties for these sides by expanding corresponding editors using the icon on their right side.

• The Padding expression in Length units sets space around a report item's content. The default value applies to the left, top, right, and bottom boundaries of a report item. You can set the individual padding values for these sides by expanding the Padding editor using the icon on its right side.

Data Visualizers

In the Value property of the background image editor, you can choose the Data Visualizer... option that opens a popup dialog in which you can configure the following visual effects.

• Icon Set displays one of the icons from the predefined list based on the expression evaluation result. For instance, if you select the 3TrafficLights set, the green light displays if the Icon 1 Value expression evaluates to True, the yellow light – if the Icon 2 Value expression evaluates to True and the red light – the Icon 3 Value expression evaluates to True.

  
  

• Range Bar displays a bar of the selected color based on the Minimum, Maximum, Length, and Starting Value properties. The Minimum and Maximum determine the range of data. The area between the Length and the Maximum is transparent (or between the Length and the Minimum in the case of a negative value). The Starting Valuedetermines the zero point to the left of which negative data is rendered, and to the right of which positive data is rendered. You can also set an alternate color for values less than zero. An optional progress indicator displays the additional bar of the selected color based on the Progress Indicator Length property.

  
  

• Data Bar displays a bar of the selected color based on the Minimum, Maximum, Value, and Zero Value properties. The Minimum and Maximum determine the range of data. The area between the Value and the Maximum is transparent (or between the Value and the Minimum in the case of a negative value). The Zero Valuedetermines the zero point to the left of which negative data is rendered, and to the right of which positive data is rendered. You can also set an alternate color for values less than zero.

  
  

Line properties

These group of properties is available for various elements of a Chart report item.

• The Width expression in Length units sets the line thickness.

• The Style expression that should evaluate to one of None, Dotted, Dashed, Solid, Double, Groove, Ridge, Inset values sets the line style.

• The Color expression that should evaluate either to a cross-browser color name or to a hexadecimal color code sets the line color.

Page Break

The Page Break enum property is available for data regions and Container report item and has the following list of values.

• None - no page breaks are added

• Start - to add a page break before a report item

• End - to add a page break after a report item

• StartAndEnd - to add a page break before and after a report item

Visibility

All the report items determine their visibility at runtime using the following properties.

• The Hidden boolean expression sets the report item's initial visibility. If the Hidden value is True, then a report item is not displayed. By default, the Hidden is False and a report item is displayed.

• The ToggleItem is the name of a textbox that controls the visibility of a report item. If this property is set, then the specified textbox displays the expand or collapse icon on its left boundary. If a report reader clicks this icon, a report re-renders, and a report item shows or hides. This property can be used to create Drill-Down reports.

Text Properties

Some report items or their parts display textual content whose appearance is determined by the following properties.

• The Color expression that should evaluate either to a cross-browser color name or to a hexadecimal color code sets the text color.

• The following properties are closely related to the Font Configuration.

  • The Font Family string expression specifies the font to use for text.

  • The Font Style expression that should evaluate to Normal or Italic specifies the font style to use for text.

  • The Font Weight expression that should evaluate to one of the Lighter, Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, Heavy or Bolder values sets how thick or thin characters in text should be displayed.

• The Font Size expression in Length units specifies the size of a font.

• The Text Decoration expression should evaluate one of the None, Underline, DoubleUnderline, Overline, or LineThrough values and specifies the decoration added to the text.

• The Text Align expression that should evaluate to one of the following values sets the alignment of text

  • General - aligns numbers and dates to the right and everything else to the left

  • Left - aligns the text to the left

  • Right - aligns the text to the right

  • Center - centers the text

  • Justify - stretches the multiline text so that each line has equal width

• The Text Justify expression affects if Text Align is Justify and should evaluate to one of the following values

  • Auto - changes the space between words, except for the last line.

  • Distribute - the same as Auto.

  • DistributeAllLines - changes the space between words for all lines.

• The Vertical Align that should evaluate to one of the Top, Middle, or Bottom values sets the vertical alignment of text within its bounding box.

• The Wrap Mode expression that should evaluate to one of the following values specifies how words should break when reaching the end of a line

  • NoWrap - line breaks do not occur

  • CharWrap - line breaks occur at any character

  • WordWrap - line breaks occur at the end of words

• The Line Spacing in Length units sets a text line's height. It is converted to the line height CSS style.

• The Character Spacing in Length units sets the space between characters in a text.