Display Images in a Grid

Interface patterns give you an opportunity to explore different interface designs. To learn how to directly use patterns within your interfaces, see How to Adapt a Pattern for Your Application.

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: "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".
Open in Github
FEEDBACK