Search code examples
ibm-mobilefirst

How to customise IBM Mobile First Direct Download Screen?


What is customisable in IBM Mobile First Direct Download Screen? (e.g. color to match the theme of the app, wording display...), etc..)

For example: I would like to change the background to red, the loading bar to red, and the "Downloading" word to Updating...


Solution

  • You cannot simply update the UI. To be able to customize the second direct update dialog (i.e. the one in the screen shot), this will require you to take control of the direct update flow entirely, which means, you need to be very careful...

    Learn more in the user documentation

    var directUpdateCustomListener = {
      onStart: function(totalSize){
        //show custom progress dialog
      },
      onProgress: function(status,totalSize,completedSize){
        //update custom progress dialog
      },
      onFinish: function(status){
    
        if (status == 'SUCCESS'){
          //show success message
          WL.Client.reloadApp();
        }
        else {
          //show custom error message
    
          //submitFailure must be called is case of error
          wl_directUpdateChallengeHandler.submitFailure();
        }
      }
    };
    
    wl_directUpdateChallengeHandler.handleDirectUpdate = function(directUpdateData, directUpdateContext){
    
      WL.SimpleDialog.show('Update Avalible', 'Press update button to download version 2.0', [{
        text : 'update',
        handler : function() {
          directUpdateContext.start(directUpdateCustomListener);
        }
      }]);
    };