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.

Example

Code

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 -->
<script>

    function autoChangeDownloadButtons(icon = null, text = null, variation = null) {
        try {
            jQuery('.glyphicon.glyphicon-lg.glyphicon-download-alt.text-info')
                .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) {
            console.error(error);
        }
    }

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

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

</script>

Parameters

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.

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,
Jan

PS: Stay safe, everyone!