Document Viewer Component

Function

a!documentViewerField( label, labelPosition, instructions, helpTooltip, document, showWhen, height, altText, disabled, accessibilityText, marginAbove, marginBelow, initialPageDisplay, highlightedText )

Displays a document from document management on an interface.

Parameters

Usage considerations

When to use this component

This component displays documents stored in Appian.

Do not use it to display:

• An image from a document in Appian. Instead, use a Document Image.
• A video. Instead, use a Video Field.
• Documents from another system. Instead, use the Web Content Field.

Support for Microsoft Office documents

You can display Microsoft Office documents anywhere in your application if you have the Microsoft Document Editor plug-in installed. However, Appian will only generate a record view with Microsoft Office support for a document management record type.

Displaying documents

To display a document, you can use a:

• Record field reference. For example, recordType!Case Document.fields.documentId.
• Constant. For example, cons!DOCUMENT.
• Rule input or local variable that contains the document identifier. For example, local!document.

If a document is invalid, has been deleted, or the user does not have access to view it, the component will display Document not available.

Viewing documents on different devices

Document viewing behavior differs depending on the browser and document type. Some browsers may render documents inline, while other browsers or file types may only be downloaded. Browser plug-ins or extensions may also impact this behavior.

The document viewer component works within the constraints of the browser and its handling of different document types. For example, iOS browsers don't natively support viewing a PDF inline, so the component provides an option to view the file in a separate tab.

Security

For security purposes, documents are loaded using the static content URL.

The message Missing system configuration will be displayed if this domain is not configured on your Appian instance. See Post-Install Configurations for more details on this configuration.

When to use altText and accessibilityText

The value for the altText parameter should be a short description that is read by screen readers and displays if the document fails to load.

The value for the accessibilityText parameter should be used if you need to provide additional information for screen readers about the document.

Appian Mobile considerations

On Appian Mobile applications, the document viewer component appears as a document download link. The value provided in altText is used for the link label.

Examples

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

Displaying a document from a record type

This example uses a rule input (ri!caseDocument) to pass in a specific document from the Case Document record type.

Replace the record type references with valid record type references in your environment.

1
2
3
4
5
6
7
8
{
  a!documentViewerField(
    label: ri!caseDocument[recordType!Case Document.relationships.documentProperties.fields.name],
    document: ri!caseDocument[recordType!Case Document.fields.documentId],
    height: "TALL",
    altText: ri!caseDocument[recordType!Case Document.relationships.documentProperties.fields.name]
  )
}

This expression displays the following:

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Displaying a blank document

Replace the document field value with a valid document in your environment.

1
2
3
4
5
6
7
8
{
  a!documentViewerField(
    label: "Appian Whitepaper",
    document: 282578,
    height: "TALL",
    altText: "5 Digital Transformation Predictions for 2018 and Beyond"
  )
}

Displaying a document image using a constant

To test this example, replace cons!MY_PDF 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
a!documentViewerField(
  label: document(
    documentId: cons!MY_PDF,
    property: "name"
  ),
  document: cons!MY_PDF
)

Connect to an AI chat response

When you use an AI chat component to answer questions about a document, you can enhance the user experience by connecting the chat's sources directly to a document viewer. This pattern allows users to click a source citation in the chat response and instantly see the exact page and text the AI used for its answer, providing clear verification and context.

See Connect Document Viewer to an AI Chat Response recipe for more information.

Feature compatibility

Related recipes

The following recipes include usage of the Document Viewer Component.

• Connect Document Viewer to an AI Chat Response:

  This pattern illustrates how to connect a!documentViewerField component to an AI chat response.

• 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.

Feedback