Image Component

Image

SAIL Function: a!imageField()

Displays an image from document management or the web.

See also: Document Image, Web Image

Parameters

Name Keyword Type Description
Label label Text Optional text to display as the field label.
Label Position labelPosition Text Optional text to determine where the label appears. Valid values include
  • "ABOVE" (default) Displays the label above the component.
  • "ADJACENT" Displays the label to the left of the component.
  • "COLLAPSED" Hides the label. The label will still be read by screen readers; see accessibility considerations for more information.
Instructions instructions Text Optional text displayed beneath the image.
Help Tooltip helpTooltip Text Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is "COLLAPSED".
Images images Array of Images A list of images to display created with a!documentImage() or a!webImage().
Size size Text Optional text to control what size image displays. Valid values are "STANDARD" (default), "ICON", "THUMBNAIL", "SMALL", "MEDIUM", and "LARGE".
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.

The maximum display dimensions for each Size are listed below:

  • "ICON": 20x20 pixels
  • "THUMBNAIL": 100x200 pixels
  • "SMALL": 100x200 pixels
  • "MEDIUM": 200x400 pixels
  • "LARGE": 400x600 pixels

Notes

  • If an image's natural dimensions are smaller than the Size specified, the image displays at its natural dimensions.
  • If an image's natural dimensions are larger than the Size specified, the image is scaled down as necessary to fit the size limit, preserving its native aspect ratios.
  • If Size is set to "STANDARD", images display at either their natural width or the width of the column, whichever is smaller.
  • If Size is set to "THUMBNAIL", images can be clicked to open slideshows.
  • If Size is set to any valid size other than "THUMBNAIL", images can have links associated with them.
  • Images look best with the ICON size if they are 40 x 40 pixels and have a transparent background. The images display at 20 x 20 pixels but an original size of 40 x 40 pixels is recommend if any users view the images on high-definition screens, like an iPhone, iPad, or Mac.
  • Avoid using this component for offline mobile forms because images do not render when offline.

Examples

Copy and paste an example to the expression view of the interface designer to see it displayed.

Display a Single Web Image

=a!imageField(
  label: "ImageField Example",
  images: {
    a!webImage(
      source: "http://i.imgur.com/4tf4Cmo.png"
    )  
  }
)

Returns the following when used as part of a SAIL expression:

Display a Series of Web Images

=a!imageField(
  label: "ImageField Example",
  images: {
    a!webImage(
      source: "http://i.imgur.com/4tf4Cmo.png"
    ),
    a!webImage(
      source: "http://i.imgur.com/WiTQBf5.png"
    ),
    a!webImage(
      source: "http://i.imgur.com/M9TEmAS.png"
    )
  }
)

Returns the following when used as part of a SAIL expression:

Display a Series of Document Images with Looping

=a!imageField(
  label: "Images",
  size: "THUMBNAIL",
  images: a!forEach(
    /* 
    * Document ids of user profile images in demo enviornment. 
    * Please adjust document id appropriately.
    */
    items: { 1, 2, 3 },
    expression: a!documentImage(
      document: fv!item
    )
  )
)

Returns the following when used as part of a SAIL expression:

FEEDBACK