Change file loading icon

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

About this task

When you upload a file into your application, an animated icon displays in the chromebar. The default icon displays as in Figure 1

Note:

This icon only displays for a brief time, and is then replaced by a counter showing the percentage that has been loaded. It will normally only be seen if your file is very large or if your system is slow.

You can use another animation icon by customizing the ChromeBarItemUploadStatusWidget.

Steps

1. In the gbc-project-dir/customization/customization-project-dir/js directory, add a js file called MyChromeBarItemUploadStatusWidget.js:

   // 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:

   • 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.
   • The image is located in the customization-project-dir/resources/img folder.
     Note:

     You can access the image with JavaScript using the method: context.ThemeService.getResource("my-image").

2. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

3. View the changes by opening an app with a file upload feature. Upload a large file to allow time to view the icon.
   Tip:

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