Paging Grid Image Column Component

Image Column

SAIL Function: a!gridImageColumn()

Displays a column of images within a paging grid. To display images in an editable grid, use an image component.

Parameters

Name Keyword Type Description
Label label Text Name to display for the column heading.
Field field Text Name of the field that populates the column. Stored into Paging and Selection Value when the user clicks on the column label. A sort indicator displays on the column when its Field argument matches pagingInfo.sort[1].field.
Data data Array of Images Array of images values to display in the column. Create images with a!documentImage() and a!webImage().
Size size Text Optional text to control what size image displays. Valid values are "THUMBNAIL" (default) and "ICON".
Visibility showWhen Boolean Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true.

Notes

  • If Size is set to "ICON", images of up to 20 x 20 pixels display at their natural sizes. Larger images are scaled down as necessary to fit the 20-by-20-pixel limit, preserving their native aspect ratios. Icons cannot be clicked to open slideshows.
  • On mobile devices (iPhone, iPad, Android), tapping on an image with a link does not execute the link.
  • If size is set to "THUMBNAIL" or null, images of up to 240 pixels wide by 80 pixels high display at their normal sizes. Larger images are scaled down to fit the 240-by-80-pixel limit, preserving their native aspect ratios. Clicking a thumbnail opens a lightbox/slideshow mode, allowing users to scroll between images.
  • If size is set to "THUMBNAIL", images cannot have links associated with them.
  • Images look best with the "ICON" size if they are 40 x 40 pixels and have a transparent background. This size is recommended to ensure high quality rendering on high pixel density devices (E.g., MacBook Pros with Retina displays and many smartphones).

See Also: UX Design Guide: Indicator Icons

FEEDBACK