Difference between revisions of "Content Item Object"

From MSX - Wiki
Jump to navigation Jump to search
 
(47 intermediate revisions by the same user not shown)
Line 13: Line 13:
 
     "enumerate": false,
 
     "enumerate": false,
 
     "compress": true,
 
     "compress": true,
 +
    "decompress": false,
 
     "shortcut": true,
 
     "shortcut": true,
 +
    "round": true,
 +
    "break": "line",
 
     "group": "Item Group",
 
     "group": "Item Group",
 
     "color": "msx-glass",
 
     "color": "msx-glass",
Line 27: Line 30:
 
     "truncation": "headline",
 
     "truncation": "headline",
 
     "centration": "text",
 
     "centration": "text",
 +
    "separation": -1,
 
     "tag": "Item Tag",
 
     "tag": "Item Tag",
 
     "tagColor": "msx-red",
 
     "tagColor": "msx-red",
Line 35: Line 39:
 
     "progress": -1,
 
     "progress": -1,
 
     "progressColor": "msx-blue",
 
     "progressColor": "msx-blue",
 +
    "progressBackColor": "msx-black",
 
     "wrapperColor": "msx-gray",
 
     "wrapperColor": "msx-gray",
 
     "image": "http://link.to.image",
 
     "image": "http://link.to.image",
Line 80: Line 85:
 
|-
 
|-
 
| <code>key</code> || <code>string</code> || <code>null</code> || No || data-sort-value=97|'''0.1.97''' ||  
 
| <code>key</code> || <code>string</code> || <code>null</code> || No || data-sort-value=97|'''0.1.97''' ||  
−
The key that is used to assign a keyboard key to the content item action. This property is part of the hidden features. For more information, please see [[Key Property]].
+
The key that is used to assign a keyboard key (or a remote control button) to the content item action. This property is part of the hidden features. For more information, please see [[Key Property]].
 
|-
 
|-
 
| <code>layout</code> || <code>string</code> || <code>null</code> || '''Only for the template object and non-templated items''' || data-sort-value=0|0.1.0 ||  
 
| <code>layout</code> || <code>string</code> || <code>null</code> || '''Only for the template object and non-templated items''' || data-sort-value=0|0.1.0 ||  
 
The layout of the content item in format <code>"x,y,w,h"</code>. This property is used to position the item on the layout grid.
 
The layout of the content item in format <code>"x,y,w,h"</code>. This property is used to position the item on the layout grid.
  
−
'''Note: The grid size is 12x6 (or 8x6 for panels). It is not possible to register multiple items on the same position, however, it is possible to overlap items (e.g. to add background or foreground items of type <code>"space"</code>). If this property is set to the template object, only the <code>w</code> and <code>h</code> values are used. This property has no effect if it is set to a templated item.'''
+
'''Note: The grid size is 12x6 (or 8x6 for panels). It is not possible to register multiple items on the same position, however, it is possible to overlap items (e.g. to add background or foreground items of type <code>"space"</code>). If this property is set to the template object, only the <code>w</code> and <code>h</code> values are used. This property has no effect if it is set to a templated item. Since version 0.1.156, it is possible to register multiple items of type <code>"space"</code> on the same position, because they are now excluded from the selection engine (e.g. you can register a button and multiple space items on the same position).'''
  
 
The <code>x</code> value can go from <code>0</code> to <code>11</code> (or from <code>0</code> to <code>7</code> for panels).<br/>
 
The <code>x</code> value can go from <code>0</code> to <code>11</code> (or from <code>0</code> to <code>7</code> for panels).<br/>
Line 141: Line 146:
  
 
This property is part of the hidden features. For more information, please see [[Compress Property]].
 
This property is part of the hidden features. For more information, please see [[Compress Property]].
 +
|-
 +
| <code>decompress</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=155|'''0.1.155''' ||
 +
This property can only be used inside the template object and is used to decompress compressed content items. This means that the standard layout grid size (12x6 or 8x6 for panels) is used. This allows you to use compressed header/footer/insert/overlay/underlay pages with uncompressed content items. Technically, the content items are mapped from the standard layout grid size to the compressed layout grid size (16x8 or 10x8 for panels) by making layout and offset adjustments.
 +
 +
'''Note: This property is ignored if the corresponding content root object has not set the <code>compress</code> property to <code>true</code>.'''
 
|-
 
|-
 
| <code>shortcut</code> || <code>boolean</code> || <code>true</code> || No || data-sort-value=132|'''0.1.132''' ||  
 
| <code>shortcut</code> || <code>boolean</code> || <code>true</code> || No || data-sort-value=132|'''0.1.132''' ||  
Line 146: Line 156:
  
 
This property is part of the hidden features. For more information, please see [[Option Shortcut]].
 
This property is part of the hidden features. For more information, please see [[Option Shortcut]].
 +
|-
 +
| <code>round</code> || <code>number</code>{{pipe}}<code>boolean</code> || <code>true</code> || No || data-sort-value=156|'''0.1.156''' ||
 +
Indicates if the content item should have rounded corners if the rounded style is used. By default, most of the content item corners are rounded for this style.
 +
 +
* <code>0</code>{{pipe}}<code>false</code>: The content item corners are not rounded if the rounded style is used (only special corners like from badges and stamps are rounded).
 +
* <code>1</code>{{pipe}}<code>true</code>: Most of the content item corners are rounded if the rounded style is used.
 +
* <code>2</code>: This value is only relevant for items of type <code>"button"</code> or <code>"control"</code> and indicates that image corners should not be rounded if the rounded style is used (e.g. when using transparent logos that use some corners).
 +
* <code>3</code>: This value is only relevant for items of type <code>"default"</code> or <code>"space"</code> and indicates that the progress bar should be rounded if the <code>progress</code> property is used, the <code>imageBoundary</code> property is set to <code>true</code>, and an <code>imageHeight</code> property is set. Otherwise, such progress bars are integrated into the content item unrounded.
 +
|-
 +
| <code>break</code> || <code>string</code> || <code>null</code> || No || data-sort-value=156|'''0.1.156''' ||
 +
The break type of the content item if it is automatically created (i.e. via the template object). By default, no breaks are enforced (i.e. only if a line/page is full, a new one is started).
 +
 +
* <code>"line"</code>: The item will be displayed on a new line (or on a new page if a new line is not possible).
 +
* <code>"page"</code>: The item will be displayed on a new page.
 +
* <code>"context"</code>: The item will be displayed on a new page and a page offset is added (if no insert page has been inserted) to indicate a context break.
 +
* <code>"context:{CONTEXT_ID}"</code>: The item will be displayed on a new page and an insert page with the indicated context ID (e.g. <code>"context:context_id"</code>) is inserted beforehand. If there is no insert page for the indicated context ID, this type behaves like <code>"context"</code>.
 +
 +
'''Note: This property only has an effect if it is set to a templated item.'''
 
|-
 
|-
 
| <code>group</code> || <code>string</code> || <code>null</code> || No || data-sort-value=92|'''0.1.92''' ||  
 
| <code>group</code> || <code>string</code> || <code>null</code> || No || data-sort-value=92|'''0.1.92''' ||  
Line 193: Line 221:
 
* <code>"large"</code>: Large size.
 
* <code>"large"</code>: Large size.
 
* <code>"extra-large"</code>: Extra-large size.
 
* <code>"extra-large"</code>: Extra-large size.
 +
 +
'''Note: This property is ignored for content items of type <code>"control"</code>.'''
 
|-
 
|-
 
| <code>headline</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>headline</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 235: Line 265:
 
* <code>"stamp-center"</code>: The stamp is aligned in the center.
 
* <code>"stamp-center"</code>: The stamp is aligned in the center.
 
* <code>"stamp-right"</code>: The stamp is aligned on the right side.
 
* <code>"stamp-right"</code>: The stamp is aligned on the right side.
 +
 +
Since version '''0.1.156''', you can also assign the title and text properties to specific areas if content separation is used.
 +
 +
* <code>"separation-left"</code>: The title and text properties are assigned to the left area.
 +
* <code>"separation-title-left"</code>: The title properties are assigned to the left area.
 +
* <code>"separation-text-left"</code>: The text properties are assigned to the left area.
 +
* <code>"separation-right"</code>: The title and text properties are assigned to the right area.
 +
* <code>"separation-title-right"</code>: The title properties are assigned to the right area.
 +
* <code>"separation-text-right"</code>: The text properties are assigned to the right area.
  
 
If you want to set multiple alignments, please use the separator <code>|</code> (e.g. <code>"title-left|stamp-right"</code>).
 
If you want to set multiple alignments, please use the separator <code>|</code> (e.g. <code>"title-left|stamp-right"</code>).
Line 253: Line 292:
  
 
'''Note: Please note that properties like <code>icon</code> or <code>extensionLabel</code> are always centered vertically and are therefore not available for this property.'''
 
'''Note: Please note that properties like <code>icon</code> or <code>extensionLabel</code> are always centered vertically and are therefore not available for this property.'''
 +
|-
 +
| <code>separation</code> || <code>number</code> || <code>-1</code> || No || data-sort-value=156|'''0.1.156''' ||
 +
The content separation value to separate label (i.e. <code>label</code> and <code>extensionLabel</code>), title (i.e. <code>title</code>, <code>titleHeader</code>, and <code>titleFooter</code>), and text (i.e. <code>headline</code> and <code>text</code>) properties into a left and right area. This property can be used to prevent overlapping content. The value is a relative floating point number and can go from <code>0.0</code> (0% for the left and 100% for the right area) to <code>1.0</code> (100% for the left and 0% for the right area). If this property is set to <code>-1</code>, no content separation is performed. By default, all properties (except <code>extensionLabel</code>) are assigned to the left area. This can be changed with the <code>alignment</code> property.
 +
 +
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored. Only for items of type <code>"control"</code>, the <code>label</code> and <code>extensionLabel</code> properties are used for content separations. For items of type <code>"separate"</code>, the <code>title</code>, <code>titleHeader</code>, and <code>titleFooter</code> properties are excluded from content separations.'''
 
|-
 
|-
 
| <code>tag</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>tag</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 258: Line 302:
 
This property supports [[Inline Expressions]].
 
This property supports [[Inline Expressions]].
  
−
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must be set, otherwise this property ignored.'''
+
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored.'''
 
|-
 
|-
 
| <code>tagColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>tagColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 267: Line 311:
 
This property supports [[Inline Expressions]].
 
This property supports [[Inline Expressions]].
  
−
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must be set, otherwise this property ignored. Since version 0.1.146, you can change the alignment of the badge with the <code>alignment</code> property.'''
+
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored. Since version 0.1.146, you can change the alignment of the badge with the <code>alignment</code> property.'''
 
|-
 
|-
 
| <code>badgeColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>badgeColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 277: Line 321:
 
This property supports [[Inline Expressions]].
 
This property supports [[Inline Expressions]].
  
−
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must be set, otherwise this property ignored. You can change the alignment of the stamp with the <code>alignment</code> property.'''
+
'''Note: For items of type <code>"space"</code>, an <code>image</code> or a <code>color</code> property must also be set, otherwise this property is ignored. You can change the alignment of the stamp with the <code>alignment</code> property.'''
 
|-
 
|-
 
| <code>stampColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=146|'''0.1.146''' ||
 
| <code>stampColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=146|'''0.1.146''' ||
Line 284: Line 328:
 
|-
 
|-
 
| <code>progress</code> || <code>number</code> || <code>-1</code> || No || data-sort-value=70|'''0.1.70''' ||
 
| <code>progress</code> || <code>number</code> || <code>-1</code> || No || data-sort-value=70|'''0.1.70''' ||
−
The progress of the content item that is shown as bar at the bottom. The value is a relative floating point number and can go from <code>0.0</code> to <code>1.0</code>. If this property is set to <code>-1</code>, the progress bar is not visible, but can be updated. If this property is not set at all, the progress bar is not visible and can not be updated.
+
The progress of the content item that is shown as bar at the bottom. The value is a relative floating point number and can go from <code>0.0</code> to <code>1.0</code>. If this property is set to <code>-1</code> (or another negative value), the progress bar is not visible, but can be updated. If this property is not set at all, the progress bar is not visible and can not be updated.
 
|-
 
|-
 
| <code>progressColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=70|'''0.1.70''' ||
 
| <code>progressColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=70|'''0.1.70''' ||
 
The color of the progress bar.  
 
The color of the progress bar.  
 +
Please see [[Colors]] for possible values.
 +
|-
 +
| <code>progressBackColor</code> || <code>string</code> || <code>null</code> || No || data-sort-value=156|'''0.1.156''' ||
 +
The background color of the progress bar.
 
Please see [[Colors]] for possible values.
 
Please see [[Colors]] for possible values.
 
|-
 
|-
Line 333: Line 381:
 
Indicates if the content image is preloaded to make it directly visible. By default, images are loaded on the fly.
 
Indicates if the content image is preloaded to make it directly visible. By default, images are loaded on the fly.
  
−
'''Note: For preloaded images, the <code>imageFiller</code> property can not be set to <code>"fit"</code>, <code>"cover"</code>, or <code>"smart"</code>.'''
+
'''Note: For preloaded images, the <code>imageFiller</code> property can not be set to <code>"fit"</code>, <code>"cover"</code>, or <code>"smart"</code>. Since version 0.1.155, this property can be set to <code>false</code> to disable the auto image preload feature for reload/replace actions.'''
 
|-
 
|-
 
| <code>imageLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>imageLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
Line 348: Line 396:
 
|-
 
|-
 
| <code>imageBoundary</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=146|'''0.1.146''' ||
 
| <code>imageBoundary</code> || <code>boolean</code> || <code>false</code> || No || data-sort-value=146|'''0.1.146''' ||
−
Indicates if specific content properties (i.e. <code>tag</code>, <code>badge</code>, <code>stamp</code>, <code>progress</code>, and <code>imageOverlay</code>) are bound to the image area. By default, these properties are bound to the area of the entire content item. To use this property, the content must either be wrapped (e.g. the <code>imageWidth</code> or <code>imageHeight</code> property is set) or the item must be of type <code>"button"</code>. Otherwise, this property has no effect.
+
Indicates if specific content properties (i.e. <code>tag</code>, <code>badge</code>, <code>stamp</code>, <code>progress</code>, and <code>imageOverlay</code>) are bound to the image area. By default, these properties are bound to the area of the entire content item. To use this property, the content must be wrapped (e.g. the <code>imageWidth</code> or <code>imageHeight</code> property is set), otherwise this property is ignored.
  
 
'''Note: Please note that the named content properties are already bound to the image area for items of type <code>"separate"</code>.'''
 
'''Note: Please note that the named content properties are already bound to the image area for items of type <code>"separate"</code>.'''
 
|-
 
|-
 
| <code>playerLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
 
| <code>playerLabel</code> || <code>string</code> || <code>null</code> || No || data-sort-value=0|0.1.0 ||
−
The label of the content video/audio file that is used inside the player. This property is only used if the content action is <code>video:{URL}</code> or <code>audio:{URL}</code>.  
+
The label of the content video/audio that is used inside the player. This property is only used if the content action is <code>video:{URL}</code> or <code>audio:{URL}</code>.  
 
This property supports [[Inline Expressions]].
 
This property supports [[Inline Expressions]].
 
|-
 
|-
Line 402: Line 450:
 
* [[Resolve Action]]
 
* [[Resolve Action]]
 
* [[Option Shortcut]]
 
* [[Option Shortcut]]
 +
* [[Advanced Text & Image]]
  
 
== See also ==
 
== See also ==

Latest revision as of 12:34, 15 April 2024

{   
    "id": "content_item_id",    
    "type": "default",
    "key": "red",
    "layout": "0,0,1,1",
    "area": "0,0,12,6",
    "offset": "0,0,0,0",
    "display": true,
    "enable": true,
    "focus": false,
    "execute": false,    
    "enumerate": false,
    "compress": true,
    "decompress": false,
    "shortcut": true,
    "round": true,
    "break": "line",
    "group": "Item Group",
    "color": "msx-glass",
    "title": "Item Title",
    "titleHeader": "Item Title Header",
    "titleFooter": "Item Title Footer",
    "label": "Item Label",
    "icon": "blank",
    "iconSize": "medium",
    "headline": "Item Headline",
    "text": "Item Text",   
    "alignment": "left",
    "truncation": "headline",
    "centration": "text",
    "separation": -1,
    "tag": "Item Tag",
    "tagColor": "msx-red",
    "badge": "Item Badge",
    "badgeColor": "msx-green",
    "stamp": "Item Stamp",
    "stampColor": "msx-yellow",
    "progress": -1,
    "progressColor": "msx-blue",
    "progressBackColor": "msx-black",
    "wrapperColor": "msx-gray",
    "image": "http://link.to.image",
    "imageFiller": "default",
    "imageWidth": -1,
    "imageHeight": -1,
    "imageOverlay": -1,
    "imagePreload": false,
    "imageLabel": "Image Label",
    "imageColor": "msx-black",
    "imageScreenFiller": "fit",      
    "imageBoundary": false, 
    "playerLabel": "Player Label",
    "background": "http://link.to.image",    
    "extensionIcon": "blank",
    "extensionLabel": "Extension Label",
    "action": null,
    "data": null,
    "properties": null,
    "live": null,
    "selection": null,
    "options": null
}
Property syntax of content item object
Property Type Default Value Mandatory Since Version Description
id string null No 0.1.0

The ID of the content item. This property can be used to identify the item. The ID must be unique for the content data and only consist of letters, numbers, and the special characters "_", "-", ".".

type string "default" No 0.1.0

The type of the content item.

  • "default": Default item.
  • "teaser": Teaser items are similar to "default" items, but they have a larger title.
  • "button": Button items have a frame and a transparent background color. The icon and label properties are typically used with this type.
  • "separate": Separate items have separated titles.
  • "space": Space items are not selectable and can be used to add background or foreground items.
  • "control": Control items are similar to "button" items and mainly designed for internal purposes (e.g. they are used in context menus and settings). The icon and label properties are typically used with this type. Additionally, the extensionLabel and extensionIcon properties are available for this type.

Note: Please note that a content page must have at least one selectable item in order to be displayed (e.g. a content page that only contains items of type "space", cannot be displayed). This does not apply to a content page that is displayed as overlay/underlay page, because such kind of page can only contain items of type "space".

key string null No 0.1.97

The key that is used to assign a keyboard key (or a remote control button) to the content item action. This property is part of the hidden features. For more information, please see Key Property.

layout string null Only for the template object and non-templated items 0.1.0

The layout of the content item in format "x,y,w,h". This property is used to position the item on the layout grid.

Note: The grid size is 12x6 (or 8x6 for panels). It is not possible to register multiple items on the same position, however, it is possible to overlap items (e.g. to add background or foreground items of type "space"). If this property is set to the template object, only the w and h values are used. This property has no effect if it is set to a templated item. Since version 0.1.156, it is possible to register multiple items of type "space" on the same position, because they are now excluded from the selection engine (e.g. you can register a button and multiple space items on the same position).

The x value can go from 0 to 11 (or from 0 to 7 for panels).
The y value can go from 0 to 5.
The w value can go from 1 to 12 (or from 1 to 8 for panels).
The h value can go from 1 to 6.

All values are absolute integers. Please use the offset property to position items between the grid.

area string null No 0.1.110

The area used for created content items in the format "x,y,w,h". This property can only be used inside the template object and is used to specify the area in which the created items can be positioned. It is typically used with an overlay/underlay page to keep a specific area clear of content.

The x value can go from 0 to 11 (or from 0 to 7 for panels).
The y value can go from 0 to 5.
The w value can go from 1 to 12 (or from 1 to 8 for panels).
The h value can go from 1 to 6.

All values are absolute integers.

Note: If this property is set, the possible w and h values of the layout property are changed accordingly.

offset string null No 0.1.0

The offset of the content item in format "x,y,w,h". This property can be used to add or subtract an offset.

The x value can go from -11.0 to 11.0 (or from -7.0 to 7.0 for panels).
The y value can go from -5.0 to 5.0.
The w value can go from -11.0 to 11.0 (or from -7.0 to 7.0 for panels).
The h value can go from -5.0 to 5.0.

All values are relative floating point numbers.

Note: The offset values have been increased in version 0.1.110. In previous versions, each value can only go from -1.0 to 1.0.

display boolean true No 0.1.0

Indicates if the content item is displayed. This property can be used to temporarily remove items.

enable boolean true No 0.1.0

Indicates if the content item is enabled. This property can be used to temporarily disable items.

focus boolean false No 0.1.0

Indicates if the content item is focused. This property can be used to set the focus to a specific item.

Note: If this property is set to true for multiple items, only the first item will get the focus. This property has no effect if the content is loaded via a menu.

execute boolean false No 0.1.0

Indicates if the content item is automatically executed on load. This property is part of the hidden features. For more information, please see Execute Property.

enumerate boolean true|false No 0.1.0

Indicates if the content item is enumerated. Enumerated items can be executed in a row (e.g. to start a playlist or a slideshow). The default value is true if the item is automatically created (via the template object), otherwise false.

compress boolean true No 0.1.123

Indicates if font size adjustments are performed when the content is compressed.

Note: This property is ignored if the corresponding content root object has not set the compress property to true.

This property is part of the hidden features. For more information, please see Compress Property.

decompress boolean false No 0.1.155

This property can only be used inside the template object and is used to decompress compressed content items. This means that the standard layout grid size (12x6 or 8x6 for panels) is used. This allows you to use compressed header/footer/insert/overlay/underlay pages with uncompressed content items. Technically, the content items are mapped from the standard layout grid size to the compressed layout grid size (16x8 or 10x8 for panels) by making layout and offset adjustments.

Note: This property is ignored if the corresponding content root object has not set the compress property to true.

shortcut boolean true No 0.1.132

Indicates if the content item can be used as shortcut if it is used inside the options property and the key property is set.

This property is part of the hidden features. For more information, please see Option Shortcut.

round number|boolean true No 0.1.156

Indicates if the content item should have rounded corners if the rounded style is used. By default, most of the content item corners are rounded for this style.

  • 0|false: The content item corners are not rounded if the rounded style is used (only special corners like from badges and stamps are rounded).
  • 1|true: Most of the content item corners are rounded if the rounded style is used.
  • 2: This value is only relevant for items of type "button" or "control" and indicates that image corners should not be rounded if the rounded style is used (e.g. when using transparent logos that use some corners).
  • 3: This value is only relevant for items of type "default" or "space" and indicates that the progress bar should be rounded if the progress property is used, the imageBoundary property is set to true, and an imageHeight property is set. Otherwise, such progress bars are integrated into the content item unrounded.
break string null No 0.1.156

The break type of the content item if it is automatically created (i.e. via the template object). By default, no breaks are enforced (i.e. only if a line/page is full, a new one is started).

  • "line": The item will be displayed on a new line (or on a new page if a new line is not possible).
  • "page": The item will be displayed on a new page.
  • "context": The item will be displayed on a new page and a page offset is added (if no insert page has been inserted) to indicate a context break.
  • "context:{CONTEXT_ID}": The item will be displayed on a new page and an insert page with the indicated context ID (e.g. "context:context_id") is inserted beforehand. If there is no insert page for the indicated context ID, this type behaves like "context".

Note: This property only has an effect if it is set to a templated item.

group string null No 0.1.92

The group label of the content item if it is enumerated. This label is shown in the content headline after the enumeration info. If the group label starts with the string "id:" (e.g. "id:group_id"), the label is only used as ID and does not appear in the content headline.

Note: Each group has its own enumeration counter. Therefore, if a group item is executed, only the related group items are executed in a row. To use this property, the enumerate property must be set to true, otherwise this property is ignored.

This property supports Inline Expressions.

color string null No 0.1.0

The background color of the content item. Please see Colors for possible values.

title string null No 0.1.0

The title of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

titleHeader string null No 0.1.0

The title header of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

titleFooter string null No 0.1.0

The title footer of the content item that is positioned in the lower left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

label string null No 0.1.0

The label of the content item that is positioned in the bottom center or on the left side if the item type is "control". This property is typically used for items of type "button" or "control". This property supports Inline Expressions.

icon string null No 0.1.0

The icon of the content item that is positioned in the center or on the left side if the item type is "control". This property is typically used for items of type "button" or "control". Please see Icons for possible values.

iconSize string "medium" No 0.1.0

The size of the content icon.

  • "small": Small size.
  • "medium": Medium size.
  • "large": Large size.
  • "extra-large": Extra-large size.

Note: This property is ignored for content items of type "control".

headline string null No 0.1.0

The headline of the content item that is positioned in the upper left corner.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

text string|array null No 0.1.0

The text of the content item that is positioned in the upper left corner. By default, the text is indicated as single string. Additionally, longer texts can be split into an array of strings.

Note: Since version 0.1.82, you can change the alignment of this content with the alignment property.

This property supports Inline Expressions.

alignment string "left" No 0.1.82

The content alignment of the properties title, titleHeader, titleFooter, headline, and text. By default, the content of these properties are aligned on the left side.

  • "left": The content is aligned on the left side.
  • "center": The content is aligned in the center.
  • "right": The content is aligned on the right side.
  • "justify": The content is aligned to fill the entire size.

Since version 0.1.97, you can also set separate alignments for the title (i.e. title, titleHeader, and titleFooter) and text (i.e. headline and text) properties.

  • "title-left": The title properties are aligned on the left side.
  • "title-center": The title properties are aligned in the center.
  • "title-right": The title properties are aligned on the right side.
  • "title-justify": The title properties are aligned to fill the entire size.
  • "text-left": The text properties are aligned on the left side.
  • "text-center": The text properties are aligned in the center.
  • "text-right": The text properties are aligned on the right side.
  • "text-justify": The text properties are aligned to fill the entire size.

Since version 0.1.146, you can also set the alignment of the badge and the stamp.

  • "badge-left": The badge is aligned on the left side.
  • "badge-center": The badge is aligned in the center.
  • "badge-right": The badge is aligned on the right side.
  • "stamp-left": The stamp is aligned on the left side.
  • "stamp-center": The stamp is aligned in the center.
  • "stamp-right": The stamp is aligned on the right side.

Since version 0.1.156, you can also assign the title and text properties to specific areas if content separation is used.

  • "separation-left": The title and text properties are assigned to the left area.
  • "separation-title-left": The title properties are assigned to the left area.
  • "separation-text-left": The text properties are assigned to the left area.
  • "separation-right": The title and text properties are assigned to the right area.
  • "separation-title-right": The title properties are assigned to the right area.
  • "separation-text-right": The text properties are assigned to the right area.

If you want to set multiple alignments, please use the separator | (e.g. "title-left|stamp-right").

truncation string null No 0.1.128

Indicates which content text properties (i.e. title, titleHeader, titleFooter, headline, and text) should be truncated. By default, these properties are not truncated. If you want to indicate multiple properties, please use the separator | (e.g. "titleHeader|titleFooter").

centration string null No 0.1.146

Indicates which of the following content properties should be centered vertically.

  • title (this also includes the titleHeader and titleFooter properties)
  • text (this also includes the headline property)
  • label
  • badge
  • stamp

By default, these properties are either top or bottom aligned. If you want to indicate multiple properties, please use the separator | (e.g. "badge|stamp"). Typically, this property is useful when the layout height (i.e. the h value of the layout property) is set to 1.

Note: Please note that properties like icon or extensionLabel are always centered vertically and are therefore not available for this property.

separation number -1 No 0.1.156

The content separation value to separate label (i.e. label and extensionLabel), title (i.e. title, titleHeader, and titleFooter), and text (i.e. headline and text) properties into a left and right area. This property can be used to prevent overlapping content. The value is a relative floating point number and can go from 0.0 (0% for the left and 100% for the right area) to 1.0 (100% for the left and 0% for the right area). If this property is set to -1, no content separation is performed. By default, all properties (except extensionLabel) are assigned to the left area. This can be changed with the alignment property.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored. Only for items of type "control", the label and extensionLabel properties are used for content separations. For items of type "separate", the title, titleHeader, and titleFooter properties are excluded from content separations.

tag string null No 0.1.0

The tag of the content item that is positioned in the upper right corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored.

tagColor string null No 0.1.0

The background color of the content tag. Please see Colors for possible values.

badge string null No 0.1.0

The badge of the content item that is positioned in the upper left corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored. Since version 0.1.146, you can change the alignment of the badge with the alignment property.

badgeColor string null No 0.1.0

The background color of the content badge. Please see Colors for possible values.

stamp string null No 0.1.146

The stamp of the content item that is positioned in the lower right corner. This property supports Inline Expressions.

Note: For items of type "space", an image or a color property must also be set, otherwise this property is ignored. You can change the alignment of the stamp with the alignment property.

stampColor string null No 0.1.146

The background color of the content stamp. Please see Colors for possible values.

progress number -1 No 0.1.70

The progress of the content item that is shown as bar at the bottom. The value is a relative floating point number and can go from 0.0 to 1.0. If this property is set to -1 (or another negative value), the progress bar is not visible, but can be updated. If this property is not set at all, the progress bar is not visible and can not be updated.

progressColor string null No 0.1.70

The color of the progress bar. Please see Colors for possible values.

progressBackColor string null No 0.1.156

The background color of the progress bar. Please see Colors for possible values.

wrapperColor string null No 0.1.70

The color of the content wrapper (e.g. the color of the image space within the content item). To use this property, the content must be wrapped (e.g. the imageWidth or imageHeight property is set), otherwise this property is ignored. Please see Colors for possible values.

image string null No 0.1.0

The image of the content item. The properties imageFiller, imageWidth, and imageHeight can be used to style and position the image.

imageFiller string "default" No 0.1.0

The filler type of the content image.

  • "default": The image is stretched to fill the entire size.
  • "width"|"width-top": The image is sized to fill the entire width (by keeping the ratio) and is positioned at the top.
  • "width-center": The image is sized to fill the entire width (by keeping the ratio) and is positioned in the center.
  • "width-bottom": The image is sized to fill the entire width (by keeping the ratio) and is positioned at the bottom.
  • "height"|"height-left": The image is sized to fill the entire height (by keeping the ratio) and is positioned on the left side.
  • "height-center": The image is sized to fill the entire height (by keeping the ratio) and is positioned in the center.
  • "height-right": The image is sized to fill the entire height (by keeping the ratio) and is positioned on the right side.
  • "fit": The image is sized (by keeping the ratio) to fit into the size and is positioned in the center.
  • "cover": The image is sized (by keeping the ratio) to cover the entire size and is positioned in the center.
  • "smart": If the ratio of the image and the size is the same, "cover" is used, otherwise "fit" is used.
imageWidth number -1 No 0.1.0

The width of the content image. This property can be used to reduce the width of the image and to position the text on the right side of it. The value is a relative floating point number and can go from 0.0 to 12.0 (or from 0.0 to 8.0 for panels). Additionally, the value must be less or equal than the item width, otherwise it is ignored.

imageHeight number -1 No 0.1.0

The height of the content image. This property can be used to reduce the height of the image. The value is a relative floating point number and can go from 0.0 to 6.0. Additionally, the value must be less or equal than the item height, otherwise it is ignored.

imageOverlay number -1 No 0.1.0

The overlay of the content image. This property can be used to explicitly set or remove the overlay of the image. The overlay is used to darken the lower part of the image to make the titles (i.e. title, titleHeader, and titleFooter) more visible. By default, the overlay is used if an image has titles on top of it.

  • -1: Automatically set/remove overlay.
  • 0: Remove overlay.
  • 1: Set overlay.

Since version 0.1.97, you can also set an inverted overlay to darken the upper part of the image to make the text (i.e. headline and text) more visible.

  • 2: Set inverted overlay and automatically set/remove default overlay.
  • 3: Set inverted overlay and remove default overlay.
  • 4: Set inverted and default overlay.
imagePreload boolean false No 0.1.58

Indicates if the content image is preloaded to make it directly visible. By default, images are loaded on the fly.

Note: For preloaded images, the imageFiller property can not be set to "fit", "cover", or "smart". Since version 0.1.155, this property can be set to false to disable the auto image preload feature for reload/replace actions.

imageLabel string null No 0.1.0

The label of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. This property supports Inline Expressions.

imageColor string null No 0.1.6

The background color of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. Please see Colors for possible values.

imageScreenFiller string "fit" No 0.1.6

The filler type of the content image that is used inside the slideshow. This property is only used if the content action is image:{URL} or image:context. Please see property imageFiller for possible values.

imageBoundary boolean false No 0.1.146

Indicates if specific content properties (i.e. tag, badge, stamp, progress, and imageOverlay) are bound to the image area. By default, these properties are bound to the area of the entire content item. To use this property, the content must be wrapped (e.g. the imageWidth or imageHeight property is set), otherwise this property is ignored.

Note: Please note that the named content properties are already bound to the image area for items of type "separate".

playerLabel string null No 0.1.0

The label of the content video/audio that is used inside the player. This property is only used if the content action is video:{URL} or audio:{URL}. This property supports Inline Expressions.

extensionIcon string null No 0.1.0

The extension icon. This property is only available for content items of type "control" and can be used to display an additional icon on the right side of the control item. Please see Icons for possible values.

extensionLabel string null No 0.1.0

The extension label. This property is only available for content items of type "control" and can be used to display an additional label on the right side of the control item. This property is only used if no extensionIcon is set. This property supports Inline Expressions.

action string null No 0.1.0

The action of the content item that is performed if the item is executed. If this property is not set and the item is executed, an info message with "No action available." is displayed. Please see Actions for possible values.

data object null No 0.1.0

The additional data of the content item that is used if the item is executed. Please see Actions for possible values.

properties object null No 0.1.58

Extended properties for special use cases. Each property is a key-value pair of type string. Please see Extended Properties for possible values.

live object null No 0.1.70

A special live object to periodically update content items (e.g. with live data, playback progress, etc.). Please see Live Object for the data structure.

selection object null No 0.1.110

A special selection object to specify the behavior of the content item if it is selected (i.e. if it has the focus). Please see Selection Object for the data structure.

options object null No 0.1.120

A special page object that is displayed in a panel if the content item is selected and the menu button is pressed. The availability of options for the current selected item is indicated in the lower right corner of the content screen. This property is ignored if the content is displayed in a panel. Please see Content Page Object for the data structure.

Since version 0.1.130, you can also set a Content Root Object as options.

Related Hidden Features[edit]

See also[edit]

Retrieved from "https://msx.benzac.de/wiki/index.php?title=Content_Item_Object&oldid=3474"