# Common Report Item Properties Learn about common report item properties in ActiveReportsJS. ## Content 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#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](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties) 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions). 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#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. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the Expression Editor in action DOC-SUMMARY-TAG-CLOSE ![UsingExpressionEditor](https://cdn.mescius.io/document-site-files/images/fcb03d52-fb54-40c3-8356-825c2a095d5b/UsingExpressionEditor.be5e1f.gif) DOC-DETAILS-TAG-CLOSE 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#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. DOC-DETAILS-TAG-OPEN DOC-SUMMARY-TAG-OPEN Expand to watch using the Collection Editor in action DOC-SUMMARY-TAG-CLOSE ![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/GetStartedWithDrillThroughReports/ConfiguringLineChartPlot.gif) DOC-DETAILS-TAG-CLOSE ### Base properties All the report items have the following set of properties. * The `Name` is the [String](/activereportsjs/docs/v6.1/#scalar) that identifies a report item and is displayed in the [Report Explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer) * The `Top` and `Left` in [Length](/activereportsjs/docs/v6.1/#length) units determine the location of a report item relative to its parent container, such as a report body or [Banded List](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/BandedList) section. * The `Width` and `Height` in [Length](/activereportsjs/docs/v6.1/#length) units set a report item's size. * The `Tooltip` is the [string expression](/activereportsjs/docs/v6.1/#expression) that sets the text displayed when a report reader hovers over a report item at preview time. * The `Bookmark` is the [string expression](/activereportsjs/docs/v6.1/#expression) that allows a report item to be the target of the [Jump To Bookmark](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity#jump-to-bookmark) interactivity action. * The `Label` is the [string expression](/activereportsjs/docs/v6.1/#expression) that determine the text associated with a report item that appears in the [Report Map](/activereportsjs/docs/v6.1/ReportAuthorGuide/Interactivity#report-map) and [Table of Contents](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/TableOfContents). * The `ZIndex` is the [number](/activereportsjs/docs/v6.1/#scalar) that specifices the report item's stack order in the output. * The `Layer Name` property designates the specific [Layer](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-layers) to which the report item is assigned. ### Style properties * The `Background Color` is an [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate either to a [cross-browser color name](https://www.w3schools.com/colors/colors_hex.asp) 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties#embedded-images) * The `Database` tab shows the fields from the [report datasets](/activereportsjs/docs/v6.1/ReportAuthorGuide/Databinding) * 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](/activereportsjs/docs/v6.1/ReportAuthorGuide/report-configuration/layout-properties#embedded-images). * `Database` \- a data set field that contains the image data in `Base64` format * The `Value` [expression](/activereportsjs/docs/v6.1/#expression) is an image Id, for instance the `URL` * The `MIME Type` [expression](/activereportsjs/docs/v6.1/#expression) specifies the image type. Supported types are `jpeg`, `png` and `svg` * The `Repeat` [enum](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#expression) in [Length](/activereportsjs/docs/v6.1/#length) units sets the default border width. * The `Style` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate to one of `None`, `Dotted`, `Dashed`, `Solid`, `Double`, `Groove`, `Ridge`, `Inset` values sets the default border style. * The `Color` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate either to a [cross-browser color name](https://www.w3schools.com/colors/colors_hex.asp) 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](/activereportsjs/docs/v6.1/#expression) in [Length](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Expressions) 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`. ![image.png](https://cdn.mescius.io/document-site-files/images/63fe0dd3-3685-4797-a0bd-27582eb114bd/image.640c72.png) * `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 Value`determines 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. ![image.png](https://cdn.mescius.io/document-site-files/images/63fe0dd3-3685-4797-a0bd-27582eb114bd/image.125deb.png) * `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 Value`determines 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. ![image.png](https://cdn.mescius.io/document-site-files/images/63fe0dd3-3685-4797-a0bd-27582eb114bd/image.df33a4.png) ### Line properties These group of properties is available for various elements of a [Chart](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart) report item. * The `Width` [expression](/activereportsjs/docs/v6.1/#expression) in [Length](/activereportsjs/docs/v6.1/#length) units sets the line thickness. * The `Style` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate to one of `None`, `Dotted`, `Dashed`, `Solid`, `Double`, `Groove`, `Ridge`, `Inset` values sets the line style. * The `Color` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate either to a [cross-browser color name](https://www.w3schools.com/colors/colors_hex.asp) or to a hexadecimal color code sets the line color. ### Page Break The `Page Break` [enum](/activereportsjs/docs/v6.1/#enum) property is available for [data regions](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Regions) and [Container](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/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](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Items/Data-Visualizers/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](/activereportsjs/demos/Reports/GetStartedWithDrillDownReports/purejs). ### Text Properties Some report items or their parts display textual content whose appearance is determined by the following properties. * The `Color` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate either to a [cross-browser color name](https://www.w3schools.com/colors/colors_hex.asp) or to a hexadecimal color code sets the text color. * The following properties are closely related to the [Font Configuration](/activereportsjs/docs/v6.1/GettingStarted/FontConfiguration). * The `Font Family` string [expression](/activereportsjs/docs/v6.1/#expression) specifies the font to use for text. * The `Font Style` [expression](/activereportsjs/docs/v6.1/#expression) that should evaluate to `Normal` or `Italic` specifies the font style to use for text. * The `Font Weight` [expression](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#expression) in [Length](/activereportsjs/docs/v6.1/#length) units specifies the size of a font. * The `Text Decoration` [expression](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#length) units sets a text line's height. It is converted to the [line height](https://www.w3schools.com/cssref/pr_dim_line-height.asp) CSS style. * The `Character Spacing` in [Length](/activereportsjs/docs/v6.1/#length) units sets the space between characters in a text. * The `Direction` [expression](/activereportsjs/docs/v6.1/#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](/activereportsjs/docs/v6.1/#expression) determines the default language to use for dates and number formatting within a report item. * The `Writing Mode` [expression](/activereportsjs/docs/v6.1/#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.