--- title: "File Download Control" slug: "file-download-control" updated: 2025-12-19T22:47:57Z published: 2025-12-19T22:47:57Z canonical: "docs.processmaker.com/file-download-control" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.processmaker.com/llms.txt > Use this file to discover all available pages before exploring further. # File Download Control The File Download control adds an area in the [Screen](/v1/docs/screens) from which the Request participant can download a file to a local computer that was attached to the Request via a [File Upload](/v1/docs/file-upload-control) control in a different Screen in that Request. > This control is only available for the following Screen types: > > - Display type > - Form type > > See [Screen Types](/v1/docs/screens#screen-types). Watch the following product tour to learn how to use a File Download control. [Embedded content](https://app.supademo.com/embed/L-Pywme2dLbtHunO-9zDI) > For a documented example of using the File Download control, see [Preview or Download Multiple Files Uploaded from a Previous Task](/v1/docs/example-preview-or-download-multiple-files-uploaded-from-a-previous-task). --- ## Add the Control to a Screen **Permissions** Your user account or group membership must have the following permissions to design a Screen unless your user account has the **Make this user a Super Admin** setting selected: - Screens: Edit Screens - Screens: View Screens See the [Screens](/v1/docs/permission-descriptions-for-users-and-groups#screens) permissions or ask your Administrator for assistance. Follow these steps to add this control to the [Screen](/v1/docs/screens): 1. [Create a new Form-type or Display-type Screen](/v1/docs/create-a-new-screen) or [edit an existing one.](/v1/docs/manage-screens#edit-a-screen) 2. From the Controls Menu on the left, expand the **Files** category, and then locate the **File Download** icon ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b31e58c2-360d-4008-a280-0652ca61ec1a.png). 3. Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/f966820e-610a-49a0-a496-6461a59ffae8.png) 4. Configure the File Download control. See [Settings](/v1/docs/file-download-control#inspector-settings). 5. Validate that the control is configured correctly. See [Validate Your Screen](/v1/docs/validate-and-publish-a-screen#validate-a-processmaker-screen). The following screen uses a **File Download** control where you can download details of a license purchase. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/90001476-e809-4ac6-ad41-56ff2c530053.png) --- ## Settings The File Download control has the following configurable settings in the Properties Panel: - [**Variable** panel](/v1/docs/file-download-control#variable-panel-settings) - [**Advanced** panel](/v1/docs/file-download-control#advanced-panel-settings) - [**Accessibility panel**](/v1/docs/file-download-control#accessibility-panel-settings) --- ### Variable Panel Settings Expand the **Variable** panel from the Properties Panel on the right to configure the following properties: #### Label Edit the default label that displays for this control if necessary. **New File Download** is the default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/ad7b591d-6e9a-4ad1-9334-84e196e8437b.png) #### Name Enter the name of the download file. This setting has no default value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/58d3279d-7056-496a-ae7e-a8e9d1ff9caf.png) --- ### Advanced Panel Settings Expand the **Advanced** panel from the Properties Panel on the right to configure the following properties: #### Visibility Rule Specify an expression that indicates the condition(s) under which this control displays. See [Expression Syntax Components](/v1/docs/feel-expression-syntax#show-or-hide-screen-builder-controls). If this setting does not have an expression, then this control displays by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b499b31f-336c-4ece-ba21-78eb7fb0c023.png) For example, this control displays if the variable value **tip** is **1**. For a detailed example of the Visibility Rule setting, see [Show or Hide Controls Based on Button Selection](/v1/docs/example-show-or-hide-controls-based-on-button-selection). Note the following regarding how to use visibility rules: - To make this control hidden until another control contains a value, enter the **Variable Name** setting value of that control to this control's **Visibility Rule** setting. - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings). #### Device Visibility Select on which device types this control displays: - **Desktop:** The control displays only on desktop devices. Enable the **Show for Desktop** toggle key. - **Mobile:** The control displays only on mobile devices. Enable the **Show for Mobile** toggle key. - **Both:** The control displays on both desktop and mobile devices. Both toggle keys are enabled by default. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/b6ab54bd-2d8c-4d7a-9ec7-1750791fcf0e.png) #### CSS Selector Name Enter the value to represent this control in custom CSS syntax when in [Custom CSS](/v1/docs/custom-css#add-custom-css-to-a-processmaker-screen) mode. As a best practice, use the same **CSS Selector Name** value on different controls of the same type to apply the same custom CSS style to all those controls. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/8b3e7ca5-09fc-48de-a942-99a8b11d3ad4.png) Then, use this name in the [Custom CSS](/v1/docs/custom-css#apply-css-to-specific-processmaker-screen-controls) feature to apply CSS styling to this control as follows: ```plaintext [selector='Submit Form'] {    color: blueviolet; } ``` See the following best practices regarding custom CSS in Screens: - [Editing a CSS name to represent this control in custom CSS syntax](/v1/docs/screen-design-best-practices#css-selector-naming-best-practice) - [Visibility rules override custom CSS settings](/v1/docs/screen-design-best-practices#visibility-rules-override-custom-css-settings) --- ### Accessibility Panel Settings The **Accessibility** panel centralizes settings that enhance screen-reader compatibility and overall usability. ARIA Label setting persists through import, copy/paste, versioning, and upgrades, supporting a more inclusive and standards-aligned Screen Builder experience. #### Aria Label Enter the string that provides a text alternative to this control for the following purposes: - Assistive technology, such as screen readers, read the **Aria Label** setting value. - This control has a visual indication of its purpose, such as a control that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication. The **Aria Label** setting value replaces the [**Label** setting](/v1/docs/file-download-control#label) value. For example, if a control has both a **Label** setting value and an **Aria Label** setting value, assistive technology only uses the **Aria Label** setting value. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/e6e0a1fc-a21d-4912-a13b-9951da151ff9.png) #### Tab Order Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation. [See best practices for setting the tab order for a Screen's controls](/v1/docs/screen-design-best-practices#tab-order-for-keyboard-navigation). Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen. ![](https://cdn.document360.io/2d311614-fcb7-4424-8b4c-d4d3091eebeb/Images/Documentation/cdd3b322-e44e-442f-8c72-f1aef0fcbf11.png)