Document Image

SAIL Design System guidance available for Images A picture is worth a thousand words. Learn how to use images in your interface designs to say more than words ever could.

Function

a!documentImage( document, altText, caption, link, showWhen )

Displays an image of a document. Used in an image, rich text display, tree browser, billboard layout component, or in a grid column component in a Read-Only Grid.

Parameters

Usage considerations

Using the document parameter

The document parameter allows you to display a single document as an image.

The way you reference a document in the document parameter depends on how the document is managed—using a record type or folder.

Record type-managed documents:

• For documents stored in Appian, index into the Document field.

  For example, ri!caseDocument[recordType!Case Document.fields.document], where the rule input points to the Case Document record type.
  
  

• For documents stored in external systems, reference the entire record using a rule input or local variable.

  For example, ri!orderDocument, where the rule input points to the Order Document record type.

Folder-managed documents:

• Reference the document or document identifier using a constant, query, or other expression.

  For example, ri!documentId, which is a rule input type with a Document data type.

See more examples below.

Supported document types

You can display the following document types:

• JPG / JPEG
• PNG
• GIF
• SVG
• BMP

If the document type is unsupported, Appian displays the document name instead of the image.

Examples

To experiment with examples, copy and paste the expression into an interface object.

Record type references are specific to each environment. If you copy and paste an example with a record type or field reference into your interface, it will not evaluate. Use it as a reference only.

Display an Appian-stored document from a record type

This example displays a document image from a document management record type where files are stored in Appian. Because the document is stored in Appian, the component must reference the Document field from the record type.

This example uses a rule input (ri!customerDocument) that points to the Customer Document record type to dynamically pass in different documents.

1
2
3
4
5
6
7
8
9
a!imageField(
  label: ri!customerDocument[recordType!Customer Document.relationships.document.fields.name],
  labelPosition: "ABOVE",
  images: {
    a!documentImage(
      document: ri!customerDocument[recordType!Customer Document.fields.document]
    )
  }
)

Display an externally-stored document from a record type

This example displays a document image from a document management record type where files are stored in an external system. To display external documents, the component must reference the entire record so Appian can return the specific file.

This example uses a rule input (ri!orderDocument) that points to the Order Document record type to dynamically pass in different documents.

1
2
3
4
5
6
7
8
9
a!imageField(
  label: ri!orderDocument[recordType!Order Document.fields.name],
  labelPosition: "ABOVE",
  images: {
    a!documentImage(
      document: ri!orderDocument
    )
  }
)

Display a document using a constant

To test this example, replace cons!MY_PNG with a constant that points to a document in your environment.

Note that this uses the document() function to access the name of the document to display in the interface.

1
2
3
4
5
6
7
8
9
10
11
12
a!imageField(
  label: document(
    documentId: cons!MY_PNG,
    property: "name"
  ),
  labelPosition: "ABOVE",
  images: {
    a!documentImage(
      document: cons!MY_PNG
    )
  }
)

Feature compatibility

Related recipes

The following recipes include usage of the Document Image.

• Browse Hierarchical Data (Hierarchical Data):

  Display a hierarchical data browser.

• Call to Action Pattern (Formatting):

  Use the call to action pattern as a landing page when your users have a single action to take.

• Display Processes by Process Model with Status Icons (Grids, Images, Reports):

  Use an interface to display information about instances of a specific process model.

• Milestone Patterns (Looping):

  There are two options for milestone patterns which all display some form of a progress indicator to guide users through a series of steps.

• Refresh Until a Background Action Completes (Auto-Refresh):

  Use a refresh interval to display the results of a background action automatically.

• Track Adds and Deletes in Inline Editable Grid (Grids):

  In an inline editable grid, track the employees that are added for further processing in the next process steps.

• Upload Multiple Documents and Edit Document Properties (Document Management, Records):

  Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form.

• Upload Multiple Documents in an Editable Grid (Document Management, Records):

  Build a form that allows users to create a record and upload related documents in an editable grid.

• Upload and rename a file (Document Management, Records):

  Allow users to upload and rename a file.

Feedback