Document Gallery component icon Document Gallery

The Document Gallery component shows a list of thumbnails linked to images.


Group Name Description



This is a unique id for the component.


The label attribute adds a label to the component, if not empty.

Label position

The position of the label, you can choose between Left or Top.


The binding for the component. Use an appropriate expression to bind the component to its value and thus specify where the value is saved read. For example, use {{myVariableName}} to store the value of the component in a variable named myVariableName. Use prefixes to define the scope of the value, e.g., root. for referencing the root case to store the value in or parent. to store the value in the parent work item of the current one. For instance {{}} stores the value in the root case using a variable named foo. For more information please refer to the Flowable Forms section.

Label tooltip

When it is defined, a question mark icon appears in the component label. When the user hovers over it, it shows this text in a tooltip.

Default value

If a value is not set, the default value is used. Use an appropriate value; e.g., a text, a number, an id or a comma-separated list.


The description attribute additionally adds a description to the component.


If true the component is hidden and the value is not part of the payload.


Boolean value or expression specifies whether the component is visible or hidden. This expression might include another value in the same form, for instance, use a checkbox bound to {{showAdditionalFields}} and use the very same expression as the visible attribute to show or hide the component according to the checked state of the checkbox. If you want only to show the component, if the form is not used as the init-form, you can use the expression {{}} which evaluates to true only, if there is a current id which is not the id in a start form.


A Boolean value or expression specifies whether component is enabled or disabled.



Path to thumbnails in data response, for example, '{{$item.thumbnail}}'.


Path to images in data response, for example, '{{$item.images}}'.


Path to files in data response, for example, '{{$item.file}}'.

Open document

Open document flag.

Data source

Data source

Specify the data source type: Static, REST, or Master.


If the data source type is Static then specify the options for the selection list. The name is used as the label in the selection list, and the value is used to store the selected element.


This is an expression used to generate the label for each item. For example, Mr. {{$}} {{$item.surname}}. The expression is evaluated against the current work object. The selected item is available as $item.


Specifies how the data retrieved by the REST endpoint is stored in the variable. Choose 'ID' if only the ID of the selected entry should be saved in the variable, choose 'Full value' if the whole object should be saved and thus making it possible to display other values of the selected element within the form as well. Pay attention as storing the full value could lead to bloating the variables with unnecessary information depending on the amount of data retrieved by the REST endpoint.

Map to

The attribute of an item into which the value is mapped. For a Static data source value is commonly used as the map to attribute and for a REST data source id is commonly used as the map to attribute.

Navigation URL

The URL to navigate to for the selected item. The URL might contain expressions, most likely at least {{$}} to include the id of the selected element in the navigation URL.


Specifies the target for the navigation URL, use '_blank' to open the selected item in a new window or '_self' to use the same window for navigation.

Query URL

The REST endpoint URL used to query for the full list of items.

Lookup URL

The REST endpoint URL used to retrieve the item by id.


Where to find the array of items in the response, e,g., 'data.users'.



Documentation intended to explain concepts of its use for future reference.


Style class

Stylesheet class name. Add any style classes to be applied to the component for the desired styling and rendering.