Skip to main content

Attachment Gallery Component

The attachmentGallery component displays files in a lightbox with previous/next navigation, a thumbnail strip, download controls, and keyboard navigation. It can render an already-loaded list or page through the complete result of a DataGrid GraphQL query.

Loaded items​

Use items for attachment records already available in the component context. currentAttachmentId selects the initially displayed file; if it is absent, the first file opens.

component: attachmentGallery
props:
  items: "{{ event.attachments }}"
  currentAttachmentId: "{{ attachmentId }}"
  options:
    height: 70vh

Records default to attachmentId, presignedFileUri, and fileName. Set urlField or fileNameField when the records use different or nested paths.

DataGrid query results​

DataGrid row and dots-menu actions receive the grid's last gqlCommand, including the active query, filters, search, sort, skip, and take. Pass it to a gallery dialog to browse beyond the current grid page while preserving that result order.

component: attachmentGallery
props:
  query: "{{ gqlCommand.query }}"
  variables: "{{ gqlCommand.variables }}"
  currentAttachmentId: "{{ attachmentId }}"
  options:
    pageSize: 10
    height: 70vh

Paged mode loads the page identified by skip and take first, then fetches nearby pages as the user navigates or scrolls the thumbnail strip. The GraphQL response must use the standard grid shape: the first result field contains items and totalCount.

Props​

  • items (array or template): Already-loaded attachment records. When present, no query runs.
  • query (string or template): GraphQL query used in paged mode.
  • variables (object or template): Query variables; paging overrides skip and take as needed.
  • currentAttachmentId (string or number): Attachment to open initially.
  • urlField (string): Record path containing the file URL. Defaults to presignedFileUri.
  • fileNameField (string): Record path containing the display name. Defaults to fileName.
  • options.pageSize (number): Number of records loaded around the current file. Defaults to 10.
  • options.height (string): Lightbox height. Defaults to 70vh.

The web renderer supports this component. Native clients must provide their own fallback until mobile support is added.