Image Component

Image

Function: a!imageField()

Displays an image from document management or the web.

See also: Document Image, User 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.
  • "JUSTIFIED" Aligns the label alongside the component starting at the edge of the page.
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 Array of images to display, created with
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.
Size size Text Determines how the images are sized. Valid values: "ICON", "TINY", "GALLERY", "SMALL", "MEDIUM" (default), "LARGE", and "FIT".
Is Thumbnail isThumbnail Boolean Determines whether the images can be viewed at a larger size when clicked. Multiple images will be visible in a slideshow. Default: false.
Style style Text Determines how the images are rendered. Valid values: "STANDARD" (default) or "AVATAR".
Alignment align Text Determines alignment of the images. Valid values are "START" (default), "CENTER", and "END".

The maximum display dimensions for each Size are listed below:

  • "ICON": 20x20 pixels
  • "TINY": 60x120 pixels
  • "GALLERY": 240x80 pixels
  • "SMALL": 100x200 pixels
  • "MEDIUM": 200x400 pixels
  • "LARGE": 400x600 pixels
  • "FIT": natural dimensions

Notes

  • If Style is set to "STANDARD", images are scaled down as necessary to fit the size limit, preserving their natural aspect ratio. Images will never be scaled up with this configuration, so they'll display at their natural size if they are smaller than the configured size.
  • If Style is set to "AVATAR", images are scaled down or up as necessary to fit the size limit, preserving their natural aspect ratio, and cropped in a circle.
  • If Size is set to "FIT", images display at either their natural width or the width of the container, whichever is smaller.
  • 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 into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Display a Series of Document Images

1
2
3
4
5
6
7
8
9
10
11
12
13
14

=a!imageField(
  label: "Image Field Example",
  images: {
    a!documentImage(
      document: a!iconNewsEvent(icon: "HAMMER", color: "BLUE")
    ),
    a!documentImage(
      document: a!iconNewsEvent(icon: "GEARS", color: "GREY")
    ),
    a!documentImage(
      document: a!iconNewsEvent(icon: "BRIEFCASE", color: "GREEN")
    )
  }
)

Returns the following when used as part of an interface expression:

Display a Series of User Images with Looping

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

=a!imageField(
  label: "Images",
  size: "MEDIUM",
  style: "AVATAR",
  images: a!forEach(
    /* 
    * Usernames of users in your enviornment. 
    * Please adjust usernames appropriately.
    */
    items: { "james.baker", "karen.anderson", "maria.lopez" },
    expression: a!userImage(
      user: fv!item
    )
  )
)

Returns the following when used as part of an interface expression:

Old Versions

There are older versions of this Interface Component. You can identify older versions by looking at the name to see if there is a version suffix. If you are using an old version, be sure to refer to the corresponding documentation from the list below.

Old Versions Reason for Update
a!imageField_17r3

Now supports a style parameter, a separate configuration for thumbnail functionality, and more sizes.

To learn more about how Appian handles this kind of versioning, see the Function and Component Versions page.

Open in Github

On This Page

FEEDBACK