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.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
=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: "GALLERY",
      isThumbnail: true
    )
  },
  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: "GALLERY".
FEEDBACK