Categories
Related

Using CUI Dropdowns

Christopher Gillis
Using CUI Dropdowns

In our previous blog posts, we've walked through the basics of CUI and demonstrated how to use many different kinds of CUI elements like menus and shortcuts. In this blog post, we'll cover how to utilize one of the slightly more complicated CUI elements: DropDowns. Occasionally, we want to give our users a little more freedom in terms of the actions they can perform with the user interface, and DropDowns are the perfect solution for that.

Use Case

In a recent release of Aras Innovator, the ability to split the screen and see two tabs side-by-side was introduced. One thing this enables our users to do is compre two versions of the same item. However, the existing way of selecting an older version requires too many clicks for some of our users, and they want a more streamlined process. To help them, we're going to be adding to be adding a dropdown to the CUI toolbar of our Part ItemType that will automatically populate with all of the versions of the current Part. Then we'll also add a button to the toolbar that will let our users open whatever version they have selected from the dropdown.

Preconfiguration

With our use case in mind, let's consider what functionality we'll actually need to write. The DropDown is a more complex CUI element than some of the others we've covered in the past. To create a simple Button, all we needed to do was create a simple Method that would run when the user clicked on the button. To create our DropDown, we can add a Method to handle when the user selects a new value, but we will also need a Method to define what values should be added to the DropDown. For our use case, we're going to need to query for all of the older generations of the current item and populate our DropDown with those. 

Once we show the user what generations they can pick from, we just need a Method to handle actually opening that older generation. While we could have that functionality run from the on click event of the DropDown itself, that seems intrusive to the user experience. Instead, let's set up a button that can handle opening the item that the user can click when they are ready and happy with their choice. To do this, we will just need some way to look up what generation the user has selected from the dropdown which we can do with the sample code below.

Configuring CUI

Now that we have our Method code written, we can go ahead and create all of our CUI items under the Part ItemType.

  1. Login as admin
  2. Navigate to TOC > ItemTypes
  3. Search for and open the Part ItemType
  4. Navigate to the Client Style relationship tab and open the item there
  5. In the Command Bar Section tab, add a new item
    1. Classification:  Data Model
    2. Name: Labs_Part_ItemView.ItemCommandBar
    3. Location: ItemView.ItemCommandBar
    4. For Identity [...]: World
  6. Open this new item

Now that we have our section added, we can create all of our CUI items underneath this. Since we have a DropDown and a Button that are going to work together, it might be helpful to first start with a separator to show the user that those two CUI elements will need to be used in tandem.

  1. In the Command Bar Item tab, add a new Separator item
    1. ItemType: Separator
    2. Name: labs.part.ivcb.version_selector.separator
    3. Sort Order: 10000
      1. This should place our CUI elements at the end of the toolbar, but you may need to set this value higher if you've made other CUI changes to the Part ItemType
    4. Action: Add
    5. For Identity [...]: World
  2. Add a new DropDown item
    1. ItemType: DropDown
    2. Name: labs.part.ivcb.version_selector.dropdown
    3. Sort Order: 10001
      1. This should place the DropDown immediately after the Separator
    4. Action: Add
    5. For Identity [...]: World
  3. Open the new DropDown item
    1. Set the Init Handler to be the first Method we created in the Preconfiguration section
    2. In the Include Events field, choose Update TearOff Window State
      1. The events you select here will dictate when the Init Handler will be called
    3. Save and close this item
  4. Add a new Button item
    1. ItemType: Button
    2. Name: labs.part.ivcb.version_selector.open_version.button
    3. Sort Order: 10002
      1. This should place the button immediately after the DropDown
    4. Action: Add
    5. For Identity [...]: World
  5. Open the new Button item
    1. Set the Click Method to be the second Method we created in the Preconfiguration section
    2. Set the Label to be Open Generation
    3. Save and close this item
  6. Save and close the Command Bar Section
  7. Save and close the Presentation Configuration

Now we're ready to test it out. If we open up a Part that has multiple generations, we should see that we can select any of the older generations.

And if we select an older generation and click the Open Generation button, a new window will be opened with the older version of the item loaded into it. We can then click the standard split screen button to compare both generations of the item.

Once we confirm that this works, adding the same functionality to another versionable ItemType is extremely simple. All we need to do is follow steps 1-4 at the top of this section and instead of creating a new Command Bar Section, we can just add the one we've already created. Try this out for yourself on another versionable ItemType like Document!

Conclusion

CUI continues to be a powerful tool that admins can utilize to provide a smoother, simpler experience for our end users. Even more complex use cases like the one we covered today can be implemented and deployed with relative ease. Spend some time thinking about ways you could improve on what we've already built today. Could we hide the dropdown and button if no older generations are found? Could we modify this to work with major revisions instead of generations? If you have any ideas and thoughts on how to implement them, please share them below!