Quickie: Modify Download Button

File-upload fields are one of many great features of AppGini-generated apps. In Table View (TV) and also in tables of children tabs in Detail View (DV) AppGini renders larger download buttons with blue default icon and no text, by default:

In one of my projects, I wanted to change the appearance of that download button so that it matches the "Open" button (to the left of it) better, visually, and also add a caption for better usability.



AppGini automatically renders a larger button with blue text-color (depending on your theme).

Modified download button

Same height as "open" button (left of it), different icon, additional text, different style.


The following javascript function requires AppGini Helper Javascript Library, because in Detail View (DV) we have to wait for the children tabs to be loaded completely. Our AppGini Helper Javascript Library provides an event-handler dv.ready()-function for this.

<!-- file: hooks/header-extras.php -->

    function autoChangeDownloadButtons(icon = null, text = null, variation = null) {
        try {
                .removeClass('text-info glyphicon-lg')
                .removeClass(icon != null ? 'glyphicon-download-alt' : '')
                .addClass(icon != null ? `glyphicon-${icon}` : '')
                .parent().append(text != null ? ` ${text}` : '')
                .addClass(variation != null ? `btn-${variation}` : '');
        } catch (error) {

    // this is for table views
    if (AppGiniHelper.TV != null) {
        jQuery(document).ready(function() {

    // this is for children tabs of detail views
    if (AppGiniHelper.DV != null) {
        AppGiniHelper.DV.ready(function() {



The javascript function has three parameters.

autoChangeDownloadButtons("icon", "Text", "variation");
  • icon ( string )
    Icon name without glyphicon-prefix
    If given, default icon will be replaced by given icon.
    You will find a list of available glyphicons here for example.
  • Text ( string )
    If given, Text will be appended. Space between icon and text will be set automatically.
  • variation (string)
    Bootstrap style for buttons. Available values:
    • "default"
    • "info"
    • "primary"
    • "success"
    • "warning"
    • "danger"

Different variations

Here are a few examples of modified download buttons.

Add text, change icon and style

autoChangeDownloadButtons("cloud-download", "Download", "info");

Keep icon, remove color-variation and adjust button size


Append button text but keep default icon

autoChangeDownloadButtons(null, "Download from Server to Client");

Replace default icon by "flash" icon


Change icon and text

autoChangeDownloadButtons("cloud-download", "Download");

Backdraw: Reload of children tab in Detail View

There is one more problem: If the data of a children tab is reloaded, for example after adding a detail record, then the tab content is reloaded and the standard buttons appear again.

The next version of out AppGini Helper Library with include an event handler dv.getChildrenTabs().onReload() that will be called whenever (any) child tab is reloaded. We can then catch this event and modify our buttons after reload. But this will be future version.

I hope you like it!

Kind regards,

PS: Stay safe, everyone!

Do you like it?