Conditional Display of Tool Bar Items

Back To Blog

It’s been far too long since my last entry – but it certainly hasn’t been from a lack of desire.  I’ve been saving up some good ideas for a few months just waiting to find time to type them up… but now I’ve realized there never is a good time to break from a project – you just have to do it and make the time.

As I continue to work with Clarity 7 the more impressed I am at the flexibility it provides.  In this post I’m going to illustrate how to conditionally hide a toolbar button (E.g. Save) based on the contents of a reference variable (which could be the results of Page Option selection or an Excel formula on the grid).  The power and flexibility of Clarity 7 really shows itself in these situations as this is literally only a few lines of javascript code in the Advanced section of the template.  Nothing hiding in secret files on the server, no reams of code – just a handful of lines.

In this example I’m going to use a Clarity defined Page Option reference variable, but the same logic would work using a user defined variable that references an Excel cell.

Prerequisites

    • This example assumes that a page option exists called pgYesNo and is linked to a Custom List containing 2 entries, Yes and No.  To make the example obvious we’ll say the caption for this page option is “Allow Save”.  Obviously not a real-life situation, but I believe it illustrates the functionality clearly.

Steps

  • Step 1 – In the Advanced section of the template right click Browser Jobs and add a JavaScript job called jsHideSave
  • Step 2- Add the following code into the script area:

function customHide() {
if ( cWindow.toolbox) {
cWindow.toolbox.defaultSaveMethod = null;
cWindow.toolbox.hideTool(“send”, true )
} else {
window.setTimeout(customHide, 100);
}
}

function customShow() {
if ( cWindow.toolbox) {
cWindow.toolbox.defaultSaveMethod = “Send()”;
cWindow.toolbox.unhideTool(“send”, true );
} else {
window.setTimeout(customShow, 100);
}
}

if ( “{PageOptions.pgYesNo.Name}” == “Yes” ) {
customShow()
} else {
customHide();
}

    • Step 3 – Add the jsHideSave job to the Events -> Browser Events -> Before Display event

That’s it!

Some notes on the code:

  • There is no guarantee that the toolbar item section of the window will be displayed before Clarity triggers the “Before Display” sequence – so for this reason we add the timeout java command allowing the process to wait those few milliseconds until the toolbar display has caught up.
  • The code includes both a show and hide even though the template default is to show the Save button.  This is because Clarity doesn’t automatically recreate the toolbar list when using Point of View of Select Options – so this code ensure the toolbar is refreshed after any page option changes.
  • In this example, the defaultSaveMethod setting is to stop Clarity from prompting to save when a tab is closed or changed.  This line would not be necessary when removing other buttons.
  • When pasting the code the web page changes the quotes (“) – so you will need to replace the quotes from the paste with real double-quotes.  Sorry about this.

As always please let know your thoughts, questions and any ideas for future blog posts. I’m always interested in other’s thoughts on Clarity and any challenges being faced.

– Jay