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.
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.
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.
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)
)
)
size: "ICON" instead of size: "GALLERY".