File loading icon (change)

This procedure shows you how to change the default animation icon shown when processing a file loading request.

Overview

To change the animation icon used, you will customize the ChromeBarItemUploadStatusWidget.

Create your own ChromeBarItemUploadStatus Widget

In <GBC_PROJECT_DIR>/customization/<customization_project>/js/ add a js file : MyChromeBarItemUploadStatusWidget.js

In this example we inherit the default widget ChromeBarItemUploadStatusWidget to modify the way the icon is created. The icon is shown only when the widget is processing the loading of a file.

// in MyChromeBarItemUploadStatusWidget.js
// Inherit this customized widget from ChromeBarItemUploadStatusWidget
modulum('MyChromeBarItemUploadStatusWidget', ['ChromeBarItemUploadStatusWidget', 'WidgetFactory'],
    function(context, cls) {

      /**
       * Custom upload icon in ChromeBar
       * @class MyChromeBarItemUploadStatusWidget
       * @memberOf classes
       * @extends classes.ChromeBarItemUploadStatusWidget
       */
      cls.MyChromeBarItemUploadStatusWidget = context.oo.Class(cls.ChromeBarItemUploadStatusWidget, function($super) {
        return /** @lends classes.MyChromeBarItemUploadStatusWidget.prototype */ {
          __name: "MyChromeBarItemUploadStatusWidget",
          __templateName: "ChromeBarItemWidget",

          /**
           * @inheritDoc
           */
          constructor: function(opts) {
            $super.constructor.call(this, opts);
            // in default widget, we call: this.setImage("zmdi-upload");  
            this.setImage(context.ThemeService.getResource("img/html5_circle.gif"));
          },

        };
      });
      // Declare the custom widget as the default one
      cls.WidgetFactory.registerBuilder('ChromeBarItemUploadStatus', cls.MyChromeBarItemUploadStatusWidget);
    });

In this example:

  • The image used, is located in <customization_project_dir>/resources/img/ folder.

    NOTE: You can access the image with javascript with the method: context.ThemeService.getResource("my-image") For more information see the Theme resources API.

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

View the changes by opening an app with file upload feature in your browser.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.

NOTE: If you want to configure the loading bar when the app is processing instead, see File loading icon (center) topic