Making a Valence Portal app tab “sticky”

As you create and deploy more Valence apps within your organization, logging in to the Valence Portal becomes more of a daily routine for your IBM i users. In such cases, setting up a global auto-start tab (as done in Portal Admin > Settings > Session Options > Application to autostart) can be a handy way to convey daily news, bulletins and announcements to the office staff. This tip shows how to make that launched tab “stick” so that it’s always open. You could also apply this concept to any other apps that are launched in the Valence Portal.

The method for changing the tab entails making modifications to a file called Hook.js, which for the desktop portal is located on the IFS in your Valence directory (i.e., valence-4.1) under resources/desktop. By modifying the listeners and configuration settings in Hook.js you can customize many elements and behaviors of the portal while retaining the flexibility to apply Valence updates as they’re released, as Hook.js is not overwritten when Valence updates are applied. Other examples of Hook.js overrides discussed previously in this blog include overriding the default Valence logos and applying custom multilingual literals. To make a specific tab “sticky” (meaning non-closable), we’ll insert a few lines of code into the Hook.js launchapp listener, which is a function that is fired in conjunction with every app launched within the Valence Portal. In the case of a global auto-start app, you’ll need to look up the app ID in the Portal Admin app, then apply that to the code below:

launchapp : function (app) {
    if (app.appId===1234) {
        var valenceTabPanel = Ext.ComponentQuery.query('apptabs')[0];
        if (!Ext.isEmpty(valenceTabPanel) && 
            typeof valenceTabPanel.updateTab === 'function') {
                valenceTabPanel.updateTab(app, {
                   closable : false
            });
        }
    }
},

In this case, whenever the Portal detects a launch of an app with an appId of 1234, it will create a variable called valenceTabPanel to serve as a reference to the tabs. The if statement on the next line may not be absolutely necessary, but it’s shown here just to demonstrate how to be certain the expected reference was obtained successfully before continuing, thus avoiding any console errors in the browser. The next line then uses the tab panel’s “updateTab” function to change the closable property to false for the current tab. The end result is that the “X” on the tab for the app is not shown, thereby making it an app that is always showing during the course of the users Valence session. Keep in mind that while changes to Hook.js are retained between updates, when you install a new version of Valence (such as the forthcoming Valence 4.2), you’ll need to copy over your custom code into the new version of Hook.js.