Discuss

Custom File Downloader with Controls and Progress Bar

On this page

You can add your own downloaders with custom controls and progress bars on your pages, using the App Connect Download Component.


We created a simple page layout, containing a regular button. We will use this button to trigger the download:

Screenshot_1|690x417

Setting up the Download Component

First we need to add the Download Component on the page. Select App in App Structure and add new component:

Screenshot_2|690x417

Open Components and select Download:

Screenshot_3|690x417

You will find its properties in the Properties panel. Select your file in the Url input. Note, that this option is for static files. If you want to use a dynamic file path, use the dynamic attributes and add it from there:

Screenshot_4|690x417

Browse to your file, select it and click Open. Note, that the file must be located in your project folder and not just in some random folder on your disk:

Screenshot_5|690x417

Then you can add a custom filename to be displayed to the users. If you leave this field empty, the users will see the original filename. Note, that this option is for static filenames. If you want to use a dynamic filename, use the dynamic attributes and add it from there:

Screenshot_7|690x417

Custom Controls - Download

Add your button, which will be used to trigger the download and select it. Then add new dynamic event:

Screenshot_8|690x417

Select Mouse > Click:

Screenshot_9|690x417

And click the action picker button:

Screenshot_10|690x417

Under the Download component, select Download and add it to the actions list. Click the select button:

Screenshot_11|690x417

Custom Progress bar

Now, let's add a progress bar which will show the download progress. Let's add it below the button:

Screenshot_12|690x417

Select Content > Progress:

Screenshot_13|690x417

Then select the inner part of the progress component - the progress bar and add new dynamic attribute:

Screenshot_14|690x417

Select Styling > Style:

Screenshot_15|690x417

Enter width for name:

Screenshot_16|690x417

Then select the dynamic data picker button for the value:

Screenshot_17|690x417

Under the Download Component > progress select percent and add manually + '%', so your expression will look like: download1.progress.percent + '%':

Screenshot_18|690x417

Now the progress bar will advance depending on the download progress. We want to show the download progress bar, only when the download runs. So select the Progress component and add new dynamic attribute:

Screenshot_19|690x417

Select Display > Show:

Screenshot_20|690x417

And select the dynamic data picker to select when to show it:

Screenshot_21|690x417

We want to show the progress, only when the download runs, so under the download component > progress select percent and manually add > 0:

Screenshot_22|690x417

Custom Controls - Abort Download

You can add one more button, which cancels the download. Add a regular button and select it. Then add new dynamic event:

Screenshot_23|690x417

Select Mouse > Click:

Screenshot_24|690x417

And click the action picker button:

Screenshot_25|690x417

Under the Download Component, select Abort and add it to the selected actions list. Click the select button:

Screenshot_26|690x417

Additionally you can hide or disable the cancel download button, so it is only available during the download process. Select the button and add a new dynamic attribute:

Screenshot_27|690x417

Select Input > Disabled:

Screenshot_28|690x417

And select the dynamic data picker to select when to disable it:

Screenshot_29|690x417

We need this button disabled, when the download process is not running. So under the Download Component > progress select percent and manually add == 0. Then click the Select button:

Screenshot_30|690x417

Save your page and you are done. Here are the results:

ac_download|690x405