Easily Showing and Hiding Tabs at Runtime in Infor CRM (Saleslogix)

Showing and hiding tabs in the Infor CRM (Saleslogix) client should be an easy thing. It should be something you can do on demand, and any time, no matter where things are in the page life-cycle. You should be able to show or hide tabs based on changes in other controls on the detail form. The help in Application Architect describes creating a module, an external assembly that you can wire up for the portal to show and hide tabs and runtime. That just feels like too much work to do something that should be simple. Let’s take a look at a simpler route that you can do with just a line or two of code.

Overview

While the route of creating a page module works. I think it’s too much code and effort to do something so simple. So, thinking of how to make this as simple as possible, it just comes down to having something on the screen that you need to hide (or show). That’s a really easy job for some Javascript and CSS. That’s how we’ll do it, we’ll just inject some Javascript onto the page to do the work and set the CSS of the tabs to show or hide as needed.

The tabs in the web client have an ID value of “show_” and then the tab name. That is, the “Smart Part ID” of the SmartPart/QuickForm added to the page. For example, the contacts tab on the account page would have a tab name of “show_AccountContacts”. The problem is that the way tabs work already is by setting the CSS “display” attribute to none. So, if we also try to use “display:none” to hide the tab it will get overridden by the code that makes up the tab control. However, we can use “visibility” and set the CSS to “visibility:hidden” to hide the tab. One thing to note, if the tab is not the last tab, that using visibility will hide it, but the visibility CSS attribute will cause the tab element to still retain the same space. Keep this in mind, if your tab isn’t the last one, you’ll also need to add some additional code to adjust the width of the tab to reduce the space that is left. Also, when we hide a tab this way, if the tab was selected at the time, you’ll still see the form for the tab unless you also programmatically select a different tab. We’ll use jQuery to do the work since it’s already in the client.

The Code to Show & Hide Tabs At Runtime

While we could reduce this all to a single line, I’ve expanded the code a bit to make things easier to read and understand. Here’s the code:

// Hiding a tab at runtime

var tabName = "MyTabName"; // Smart Part ID of the tab form on the page
var visibility = "hidden"; // can be "visible" to show or "hidden" to hide

var script = "$('#show_" + tabName + "').css('visibility', '" + visibility + "'); ";

// To select another tab (recommended if you're hiding a tab)
if (visibility == "hidden")
{
    var tabNameToSelect = "DefaultTabName";
    script += "$('#show_" + tabNameToSelect + "').click();";
}

// register the script
ScriptManager.RegisterClientScriptBlock(this, GetType(), tabName + "_Script", script, true);

That’s all there is to it. Of course, as I mentioned earlier, you could reduce this code down a bit. Also, to reiterate, if the tab is not the last one, you’ll also need to add CSS width properties to reduce the space there left behind.