Announcement

Collapse
No announcement yet.

[ANSWERED] Valence 5 - Environment Name

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [ANSWERED] Valence 5 - Environment Name

    Valence 3.2 displayed the Environment name in the top header. That was convenient to have that particularly when a user sent a problem screenshot, you always knew what environment they were running.

    It would be nice if Valence 5 had that also.

    - JP
    Last edited by sean.lanktree; 08-16-2019, 04:26 PM.

  • #2
    Wanted to mention that this functionality can be accomplished with the "Hook.js" (under resources/desktop) by adding code for the "componentrender" event. Something as follows should work:

    Code:
    componentrender : function(cmp){
        if (cmp.xtype === 'controlbar'){
            me.onRenderControlbar(cmp);
        }
    }
    Then, at the end of the constructor, add the onRenderControlbar method

    Code:
    onRenderControlbar : function(cmp){
        cmp.insert(1,{               // position 1 will insert it just before the logo
            xtype : 'tbtext',
            text  : Valence.util.Helper.getEnvironment()
        });
    }

    Comment


    • #3
      Thanks Sean. That looks really really nice.

      Where would the code go to update the description when the environment changes?

      Comment


      • #4
        Oh yeah, didn't think about that part. OK, let's modify the original code a bit and add an "itemId" to our "tbtext" component:

        Code:
        onRenderControlbar : function(cmp){
            cmp.insert(1,{                                // position 1 will insert it just before the logo
                xtype : 'tbtext',
                text   : Valence.util.Helper.getEnvironment(),
                itemId : 'environment_name'
            });
        }
        Next, back to the componentrender event...

        Code:
        componentrender : function (cmp) {
            if (cmp.xtype === 'controlbar'){
                me.onRenderControlbar(cmp);
                app.on({
                    scope     : me,
                    environmentset : me.onEnvironmentSet
                });
            }
        },
        Last, add new "onEnvironmentSet" method after anywhere after the constructor in the Hook:

        Code:
        onEnvironmentSet : function(){
            var controlBar = Ext.ComponentQuery.query('controlbar')[0],
                  envName  = Valence.util.Helper.getEnvironment();
            if (controlBar){
                controlBar.down('#environment_name').setText(envName);
            }
        }
        Last edited by sean.lanktree; 05-26-2017, 09:49 AM. Reason: Original code was wrong.

        Comment


        • #5
          I modified the original answer above to be corrected. Should be good to go now.

          Comment


          • #6
            That didn't solve the problem with the error on Valence.util.Helper.getEnvironment()

            Thanks for trying.

            Comment


            • #7
              Valence.util.Helper.getEnvironment() was failing to resolve during the environmentset on login.

              I changed it to a setTimeout, and that delay was enough to make the environment name readable.

              Code:
                environmentset       : function (user, env) {
                        setTimeout( "onEnvironmentSet(Valence.util.Helper.getEnvironment())", 100);                    
                },
              Your onEnvironmentSet Function needs to move outside the Ext.define:

              Code:
                          
              onEnvironmentSet = function(envName){
                  var controlBar = Ext.ComponentQuery.query('controlbar')[0];
                  if (controlBar){
                      controlBar.down('#environment_name').setText(envName);
                  }
              };
              Last edited by JPinTO; 06-16-2017, 11:16 AM.

              Comment


              • #8
                It would be nice if hook.js had a afterenvironmentset event.

                The timing of an after event would probably mitigate for this.

                Comment


                • #9
                  Here is an update that reflects the latest version of Valence and the hook. It doesn't have the original timing issue when the environment changes.

                  Code:
                  /**
                   * @class Valence.Hook
                   * @singleton
                  
                   This class is used to 'Hook' into the Valence Portal to override and customize the look, functionality
                   and features of the Desktop Portal. A special javascript file called `Hook.js`, located
                   in the IFS under each instance directory resources/desktop, is
                   referenced by the Valence Portal when starting the Portal.  By using the listeners and
                   configuration settings in Hook.js you can customize your portal and still have the flexibility to apply
                   updates and releases of Valence.
                   */
                  Ext.define('Valence.Hook', {
                      singleton              : true,
                      /**
                       * @cfg {Object} portalSettingOverrides
                       * Override portal settings
                       */
                      portalSettingOverrides : {
                      },
                      /**
                       * @cfg {Object} ui
                       * Change the look/feel of the portal
                       */
                      ui : {
                          /**
                           * @cfg {Object} loginLogoUrl
                           * Change the image used for the Portal login. One may be specified for each theme or the "default" will be used for all.
                           *
                           * Same image used for all themes:
                           *
                           * ##Example
                           *      loginLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : null,
                           *          "metal"   : null
                           *      }
                           *
                           * Different image for each theme:
                           *
                           * ##Example
                           *      loginLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : "path_to_another_image.png",
                           *          "metal"   : "yet_another_path.png"
                           *      }
                           */
                          loginLogoUrl : {
                              "default" : null,
                              "dracula" : null,
                              "metal"   : null
                          },
                          /**
                           * @cfg {Object} portalLogoUrl
                           * Change the image used for the Portal control bar.  Same rules apply as loginLogoUrl above.
                           *
                           * Same image used for all themes:
                           *
                           * ##Example
                           *      portalLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : null,
                           *          "metal"   : null
                           *      }
                           *
                           * Different image for each theme:
                           *
                           * ##Example
                           *      portalLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : "path_to_another_image.png",
                           *          "metal"   : "yet_another_path.png"
                           *      }
                           */
                          portalLogoUrl : {
                              "default" : null,
                              "dracula" : null,
                              "metal"   : null
                          },
                          /**
                           * @cfg {Object} lockLogoUrl
                           * Change the image used for the Portal lock window.  Same rules apply as loginLogoUrl above.
                           *
                           * Same image used for all themes:
                           *
                           * ##Example
                           *      lockLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : null,
                           *          "metal"   : null
                           *      }
                           *
                           * Different image for each theme:
                           *
                           * ##Example
                           *      lockLogoUrl : {
                           *          "default" : "path_to_my_company_image.png",
                           *          "dracula" : "path_to_another_image.png",
                           *          "metal"   : "yet_another_path.png"
                           *      }
                           */
                          lockLogoUrl : {
                              "default" : null,
                              "dracula" : null,
                              "metal"   : null
                          },
                          /**
                           * @cfg {Object} footer
                           * Add footer items here. If the footer object is not empty, Valence will apply the footer as a
                           * config to a container.
                           *
                           * ##Example
                           *      footer : {
                           *          layout : {
                           *              type : 'hbox'
                           *          },
                           *          cls    : 'my-footer', // css could be provided at resources/themes/css/Portal/overrides.css
                           *          items  : [{
                           *              xtype : 'component',
                           *              html  : 'My Company Name',
                           *              cls   : 'my-footer-text' // custom styling for the text
                           *          },{
                           *              xtype : 'tbfill' // push remaining items towards the end
                           *          },{
                           *              xtype : 'component',
                           *              html  : '<a href="http://www.mycompany.com" target="_blank">Company Website</a>'
                           *          }]
                           *      }
                           */
                          footer : {}
                      },
                      /**
                       * @ignore
                       */
                      constructor            : function () {
                          var me  = this,
                              ns  = Valence.login.Processor.getNamespace(),
                              app = (typeof window[ns].getApplication === 'function') ? window[ns].getApplication() : null;
                  
                          if (app){
                              app.on({
                                  scope                : me,
                                  /**
                                   * @event activateapp
                                   * Fired when an application is activated in the portal.
                                   *
                                   * @param {Object} app - application record
                                   *
                                   */
                                  activateapp          : function(app){
                                  },
                                  /**
                                   * @event afterautostart
                                   * Fired after auto start is completed.
                                   *
                                   * @param {Array} apps - Array of applications that were automatically started.
                                   *
                                   */
                                  afterautostart       : function(apps){
                                  },
                                  /**
                                   * @event appsloaded
                                   * Fired after the "Apps" store has been loaded
                                   *
                                   * @param {Ext.data.Store} appStore - Store containing the users available applications.
                                   *
                                   */
                                  appsloaded           : function(appStore){
                                  },
                                  /**
                                   * @event beforeactivateapp
                                   * Fired before an application is activated in the portal. return false to prevent the app from
                                   * activating.
                                   *
                                   * @param {Object} app - application record
                                   *
                                   */
                                  beforeactivateapp    : function(app){
                                  },
                                  /**
                                   * @event beforeautostart
                                   * Fired before auto starting the applications. return false to prevent autostart apps from launching
                                   */
                                  beforeautostart      : function(){
                                  },
                                  /**
                                   * @event beforechangepassword
                                   * Fired before the call is made to change the password. return false to prevent call
                                   *
                                   * @param {Object} params - parameters that will be passed to the backend to to change the password.
                                   */
                                  beforechangepassword : function(params){
                                  },
                                  /**
                                   * @event beforecloseapp
                                   * Fired before an application is closed. return false to prevent closing the application
                                   *
                                   * @param {Object} app - application record
                                   */
                                  beforecloseapp       : function (app) {
                                  },
                                  /**
                                   * @event beforeenvironmentset
                                   * Fired before the environment is set. return false to prevent setting of environment
                                   *
                                   * @param {String} user The user id
                                   * @param {Number} env The Environments id
                                   */
                                  beforeenvironmentset : function (user, env) {
                                  },
                                  /**
                                   * @event beforelaunchapp
                                   * Fired before an application is launched. return false to prevent the app from launching
                                   *
                                   * @param {Object} app - application record
                                   */
                                  beforelaunchapp      : function(app){
                                  },
                                  /**
                                   * @event beforelock
                                   * Fired before the portal locks. return false to prevent the lock attempt
                                   */
                                  beforelock           : function(){
                                  },
                                  /**
                                   * @event beforelogin
                                   * Fired whenever a user successfully enters a user and password on Login. return false to prevent
                                   * login attempt
                                   * @param {Object} loginparams The params to be sent to the back end server.
                                   *
                                   * - `user` the user
                                   * - `password` password on login
                                   * - `display`  the display type. set to 'desktop' or 'touch'
                                   * - `version` the Valence.version
                                   * - `lng` the language id
                                   */
                                  beforelogin          : function (params) {
                                  },
                                  /**
                                   * @event beforelogout
                                   * Fired whenever the user requests to logout. return false to prevent logout
                                   *
                                   * @param {String} user User id
                                   * @param {Object} params The params to be sent to the back end server.
                                   */
                                  beforelogout         : function (user,params) {
                                  },
                                  /**
                                   * @event beforepoll
                                   * Fired before a poll is about to occur. The Portal maintains the state of the connection by
                                   * periodically sending a request - a 'poll' to the server.
                                   *
                                   * @param {Object} params The params to be sent to the back end server.
                                   */
                                  beforepoll           : function (params) {
                                  },
                                  /**
                                   * @event beforesendpassword
                                   * Fired before send password is called. return false to prevent call to sendpassword
                                   *
                                   * @param {Object} params The params to be sent to the back end server.
                                   */
                                  beforesendpassword   : function(params){
                                  },
                                  /**
                                   * @event beforeshowappcircles
                                   * Fired before showing app circles. return false to prevent showing
                                   *
                                   * @param {Array} apps Apps that will be displayed
                                   */
                                  beforeshowappcircles : function (apps) {
                                  },
                                  /**
                                   * @event beforeshowchangepassword
                                   * Fired before showing the change password dialog. return false to prevent showing
                                   */
                                  beforeshowchangepassword : function(){
                                  },
                                  /**
                                   * @event beforeusersettings
                                   * Fired before showing the user settings section. return false to prevent showing the user settings
                                   *
                                   * @param {Ext.dom.Element} el - the user initials element that was clicked to show the user settings
                                   */
                                  beforeusersettings : function(el){
                                  },
                                  /**
                                   * @event closeapp
                                   * Fired after an application is closed.
                                   *
                                   * @param {Object} app - application record
                                   */
                                  closeapp             : function (app) {
                                  },
                                  /**
                                   * @event componentrender
                                   * As top level components of the Portal are created, rendered (such as the login window, portal
                                   * toolbar, etc.), the “componentrender” event is fired, passing in the component object. You can
                                   * use this listener to alter any elements of the passed object prior to display, such as (for
                                   * example) a title property or color attribute.
                                   *
                                   * Typically you’d begin by having your code interrogate the component object to see what type of
                                   * component it is (hint: console.log(cmp); is a good start).
                                   * @param {Object} cmp The component that was rendered
                                   */
                                  componentrender      : function (cmp) {
                                      // if this is the controlbar lets call our method that adds the environment to it
                                      //
                                      if (cmp.xtype === 'controlbar'){
                                          me.onRenderControlbar(cmp);
                                      }
                                  },
                                  /**
                                   * @event environmentset
                                   * Fired after the environment is set.
                                   *
                                   * @param {String} user User id
                                   * @param {Number} env Environment id
                                   *
                                   */
                                  environmentset       : function (user, env) {
                                      // set the environment 
                                      //
                                      var controlBar = Ext.ComponentQuery.query('controlbar')[0],
                                            envName  = Valence.util.Helper.getEnvironment();
                                      if (controlBar){
                                          controlBar.down('#environment_name').setText(envName);
                                      }
                                  },
                                  /**
                                   * @event launchapp
                                   * Fired after an application is launched
                                   *
                                   * @param {Object} app - application record
                                   */
                                  launchapp            : function (app) {
                                  },
                                  /**
                                   * @event lock
                                   * Fired after the portal has been locked
                                   */
                                  lock                 : function () {
                                  },
                                  /**
                                   * @event login
                                   * Fired after the user is successfully logged in.
                                   *
                                   * @param {String} user User id
                                   * @param {String} sid Session id
                                   *
                                   */
                                  login                : function (user, sid) {
                  
                                  },
                                  /**
                                   * @event loginfailure
                                   * Fired if a login attempt fails.
                                   *
                                   * @param {Object} params Parameters sent to the backend login program
                                   * @param {Object} response Response object from the backend login program
                                   *
                                   */
                                  loginfailure         : function (parms,response) {
                                  },
                                  /**
                                   * @event loggedout
                                   * Fired after the user logs out
                                   *
                                   * @param {String} user User id
                                   *
                                   */
                                  loggedout            : function (user) {
                                  },
                                  /**
                                   * @event passwordchanged
                                   * Fired after the user password was changed
                                   *
                                   * @param {String} user User id
                                   * @param {String} pwd Password
                                   *
                                   */
                                  passwordchanged      : function(user,pwd){
                                  },
                                  /**
                                   * @event poll
                                   * Fired after the poll request is handled
                                   *
                                   * @param {Object} rsp Response object from the backend
                                   *
                                   */
                                  poll                 : function (rsp) {
                                  },
                                  /**
                                   * @event portalsearchshow
                                   * Fired when showing the search field
                                   *
                                   * @param {Ext.form.field.ComboBox} searchField Search field component
                                   *
                                   */
                                  portalsearchshow     : function(searchField){
                                  },
                                  /**
                                   * @event settingsapplied
                                   * @ignore
                                   * Fired when the portal has applied all the settings. Check for `portalSettingOverrides` and apply
                                   * them.
                                   */
                                  settingsapplied      : function () {
                                      var me = this,
                                          fnc;
                  
                                      for (var i in me.portalSettingOverrides){
                                          fnc = 'set' + Ext.util.Format.capitalize(i);
                                          if (typeof Valence.login.config.Settings[fnc] === 'function'){
                                              Valence.login.config.Settings[fnc](me.portalSettingOverrides[i]);
                                          } else {
                                              Valence.login.config.Settings[i] = me.portalSettingOverrides[i];
                                          }
                                      }
                                  }
                              });
                          }
                      },
                  
                      onRenderControlbar : function(cmp) {
                          // add the current environment to the valence heading just before the logo
                          //
                          cmp.insert(1, {
                              xtype  : 'tbtext',
                              text   : Valence.util.Helper.getEnvironment(),
                              itemId : 'environment_name'
                          });
                      }
                  });

                  Comment


                  • #10
                    This works like a charm!

                    Comment


                    • #11
                      Thanks Johnny for provided a 5.2 update for this issue.

                      As a synopsis of the changes required to valence-5.2/resources/desktop/hook.js:

                      1. Modify componentrender event
                      2. Modify environmentset event
                      3. Add onRenderControlbar function

                      To move the envirornment name after the favorite apps asterisk icon:

                      Code:
                      cmp.insert(1,
                      Change to

                      Code:
                      cmp.insert(3,

                      Comment

                      Working...
                      X