Skip to main content

dataLayout

Type​

property

Summary​

Defines how each item in the list is drawn.

Syntax​

set the dataLayout of widget to <Array>
get the dataLayout of widget

Description​

The dataLayout property allows us to customize the list items. Being an ordered array, where each key corresponds to a subitem of the list item. Inside each key will be the properties for that element.

For PolyList to draw the data, the data must have the structure defined in this property. Each subitem has the following properties.

name: The name of the item, this has to coincide in the data array that comes in the dataContent property. Otherwise nothing will be displayed in this element.

content-type: Defines the type of content that will be drawn in the subitem. Its possible values ​​are:

  • image-file: The content must be a file path to an existing and valid image file. Be sure the file exists before assigning it to the list
  • image-data: The data corresponding to the content of an image file or the text of an image object.
  • Text: Single line text.
  • Text-multiline: Multiline text.
  • icon: The name of an existing svg icon on the svg icon library.
  • icon-path: An svg path.
  • Color: RGB or RGBA color.
  • Action: This data type will show a selected icon independently of the content. For example to be used to show a 'link' icon and take you to the web page when clicked

content-fit: This sub property is only available for image-data and image-file content types. it can be one of:

  • fill: This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
  • none: The image won't be resized.
  • cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
  • contain: The image keeps its aspect ratio, but is resized to fit within the given dimension
  • scale-down: the image is scaled down to the smallest version of none or contain

margin: The margin that the content of this subitem will have. Their values must be an integer. This property overrides the margin property that is set for the widget.

padding: The padding that the content of this subitem will have. Their values must be an integer.

text-size: The font size of the text. This property is valid only for text and text-multiline types. Their values must be an integer.

Color: Color with which the content of the sub item is drawn. Its values must be an RGBA color.

align: The text alignment. This property is only valid for text and multiline text types. Its possible values are left, center and right.

text-style: The style of the text. This property is only valid for text and multiline text types. Its possible values are plain, bold, italic and (bold,italic).

fill: Whether to draw the fill in this sub item. Their values must be a boolean.

fill-type: The shape that the background of the fill will have. Its can be rectangle, rounded-rectangle and circle.

fill-color: The color that the background of the fill will have. Its value has to be an RGBA color.

fill-cornerRadius: The radius that the fill corners will have when the fill-type is rounded-rectangle. Its value must be an integer.

The following properties can be declared in percent or in exact pixels. So that the value of these is taken as pixels. Its value must end with px, so if we want it to be 15 pixels, we have to set the value to 15px. For it to be taken as a percentage, we only put the integer.

width: The width that the subitem will have.

height: The height that the subitem will have.

left: The left that will have the subitem.

top: The top that the subitem will have.

right: The right that the subitem will have.

bottom: the bottom that the sub-element will have.

The right and bottom properties behave differently than how these same properties behave in a LiveCode control. Since in this case the value of these properties represents the distance that it will be from that side of its parent item. So if we set right to 0, the subitem will match the right of the its containing item.