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. |
a!documentImage( document, altText, caption, link, showWhen )
Displays an image from document management for use in an image, rich text display, tree browser, billboard layout component, or in a grid column component in a Read-Only Grid.
Name | Keyword | Types | Description |
---|---|---|---|
Document |
|
Document |
The image to display. Supported document types:
|
Alternate Text |
|
Text |
Alternate text of the image used for the image's alt attribute and read by screen readers; see accessibility considerations for more information. |
Caption |
|
Text |
Optional text to display in the mouseover text for the image and when the images is viewed in slideshow mode. |
Link |
|
Link |
Link that determines the behavior of an image when clicked. Create links with: |
Visibility |
|
Boolean |
Determines whether the image is displayed in the component. When set to false, the image is hidden and is not evaluated. Default: true. |
To experiment with examples, copy and paste the expression into an interface object.
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 | Note |
---|---|---|
Portals | Compatible | |
Offline Mobile | Compatible | |
Sync-Time Custom Record Fields | Incompatible | |
Real-Time Custom Record Fields | Incompatible | Custom record fields that evaluate in real time must be configured using one or more Custom Field functions. |
Process Reports | Incompatible | Cannot be used to configure a process report. |
Process Events | Incompatible | Cannot be used to configure a process event node, such as a start event or timer event. |
The following patterns 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 three options for milestone patterns which all display some form of a progress indicator to guide users through a series of steps.
Refresh Until Asynchronous Action Completes (Auto-Refresh): Use a refresh interval to display the results of an asynchronous 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.
Document Image