Skip to main content

Dynamic Document Gallery

Target audience: Modelers

Introduction​

The document gallery component is part of the standard form palette in Flowable Design. It can be used in many ways and this is an example of how it can be used to show documents in the Flowable content store.

We're going to use a simple query to match documents based on a form field. More complex queries can be created, including using Decision Tables to determine what parameters might be needed given data that may have already been collected in a case or process.

Selection Control Setup​

First, create an app and a single task process:

App

Add a form for the task with a selection control and a document gallery. We've used {{area}} as the variable for the selection.

Form

Keeping the selection control set to static values, add some items with values to be used in the search query.

Form

Now configure the different attributes of the document gallery. First, in the Details group, set the File attribute to:

content-api/content-service/content-items/{{$item.id}}/data

Then the Thumbnail attribute to:

content-api/content-service/content-items/{{$item.id}}/rendition/thumbnail

They use the special variable {{$item.id}} that references the ID of results from the query to define URLs to a document's binary content and thumbnail.

Details

Next we'll configure the actual query used to select the documents. We're going to use the content-services API (see here). Select the Data source as REST and set the Query URL to:

content-api/content-service/content-items?mimeType=application%2Fpdf&nameLike=%25{{area}}%25

This query uses the nameLike parameter with wildcards either side of it to match any document's name with the current value of the area variable. We've also constrained the query to only match PDF documents with the mimeType parameter.

Set the Lookup URL to:

content-api/content-service/content-items/{{$id}}

The results returned from the query are contained under data in the JSON response, so we need to set the Path attribute to data. The other attributes can be left as their defaults.

Data source

Publish and Run​

Save and publish the app and then switch to Flowable Work. We'll need some documents to search for, so create a Library folder in the Templates root and add the PDF documents you want to use here. The query doesn't constrain the match to any specific folder, so you can create whatever folder hierarchy you'd like.

Library

Now start an instance of the new process and view the task. Select one of the values from the selection control and the gallery should show documents with matching names. With the items above, selecting Tuberculosis shows:

TB docs

Change the selection and the gallery updates immediately. Here we selected Covid-19:

Covid docs

Now we've selected Vaccination, and a document that also matched with Covid is shown because its name has both covid and vaccine:

Vaccination docs

Hopefully this has given some ideas for creative ways to use the Document Gallery in conjunction with Flowable's content store.