Tech Tip: Conditional CUI Buttons

In previous blog posts, we've covered how to use CUI to create custom menu buttons. The example covered in that post was for a button that always needed to be available, but there are times when we may want a custom action to be available only under certain circumstances. In this post, we'll cover how to add a custom button to the toolbar of the main menu that is only available when a user has selected multiple items in the main grid. 

Getting Started

To begin with, we'll need to create two new methods. One will handle the initialization of the toolbar button and the other will handle what happens when the user clicks on the button.

Init Method

The initialization method will handle the logic for when this button should be enabled/disabled. The toolbar button will be enabled if we return { "cui_disabled" : false } from our method and will be disabled if we return { "cui_disabled" : true }. The example method below shows how to check for the number of selected items in the grid and enables the button appropriately.

Click Method

The click method we'll use in this example will show how you can query for the selected items and get property information from them. In this case, we'll simply print out the keyed_names of all of the selected items using the sample code below.

Adding the Button

The steps for adding this button will be mostly similar to those for adding the custom refresh button with a few key differences. Instead of adding this to the Tearoff Window Toolbar, we'll be adding this button to the Main Window Toolbar so that it will be available from the main grid. We'll also be setting a few more properties on this button as seen in the screenshot below.

  1. Additional Data - By passing in { "cui_disabled" : true }, the button will be disabled by default.
  2. Init Method - This method will determine when this button is enabled.
  3. Include Events For Init - This will determine when the Init Method for this button is called. Here we want it to be called whenever an item is selected in the grid, so we can check if at least two items are selected.

Using This Button

After saving this button to the Main Window Toolbar, you should see it the next time that you log in to Aras Innovator. You can try it out by navigating to any ItemType, selecting multiple items in the grid by using Ctrl + Click, and clicking on the new button that you've added.


Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.