Display Images in a Grid

SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.

Goal

Display a set of images in a read-only paging grid. The images are stored in Appian's document management system.

images:SAIL_Recipe_Array_Grid_Image.png

This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.

Setup

First, upload a few images into Appian. Then, create a constant of type document named UC_IMAGE_DOCS and select the Multiple checkbox. Select the images that you uploaded as the value.

Now that we've created the supporting constant, let's move on to the main expression.

Expression

=a!gridField(
  label: "SAIL Example: Grid with Images",
  /* Images are stored in a constant. 'datasubset.totalCount' would be used here when data lives in a data store entity  */
  totalCount: count(cons!UC_IMAGE_DOCS),
  columns: {
    a!gridTextColumn(
      label: "Document Name",
      /* when the document id is being stored in RDBMS, it would be expression: document(todocument(fv!item, "name")) */
      data: a!forEach(items: cons!UC_IMAGE_DOCS, expression: document(fv!item, "name"))
    ),
    a!gridImageColumn(
      label: "Image Thumbnail Column",
      data: a!forEach(items: cons!UC_IMAGE_DOCS, expression: a!documentImage(document: fv!item)),
      size: "THUMBNAIL"
    )
  },
  value: a!pagingInfo(
    startIndex: 1,
    batchSize: count(cons!UC_IMAGE_DOCS)
  )
)

Notable implementation details

  • Because we did not configure any paging or sorting, clicking on the column headers will not sort the columns.
  • If your images are appropriate to show at a 20 x 20px size you can use size: "ICON" instead of size: "THUMBNAIL".
17.2
FEEDBACK