Working With Tree Grid Views and CUI

Working With Tree Grid Views and CUI

The configurable user interface (CUI) is a tool in Aras Innovator to alter and customize how you use Aras Innovator without requiring long development cycles, or even to be much in the way of a developer yourself. By making use of configuration changes and reusing low-code tools, you can alter an Aras Innovator instance much quicker and cheaper than conventional PLM solutions. When combined with a developer’s talents, or reuse of method code, you have a lot of power over what your system can do. Make common actions more convenient, bring the right information to where it will be needed, and generally enjoy the power of a flexible environment.

Today, we’re going to take a look at Tree Grid Views (TGVs) and we're going to go over how to add or remove options from a Tree Grid View's toolbar or context menu. 

Before we begin, please note that these steps assume you’re logged in as an administrator or other account with sufficient permissions. In our examples, we’ll be using version 12 Service Pack 18. This isn't an article about how to setup a TGV or how to connect it to a query- we're starting with one already configured as detailed in this post.

One Tree Grid View

Tree Grid Views are often set up for a specific context; drawing on a specific, preset query, and intended to be showing in only one place. Under those circumstances, you want your modifications to apply only to the one TGV you have in mind. In the following steps, we'll walk you through removing one of the normal toolbar buttons and adding a new context menu option to a TGV we already made.

  1. In the Table of Contents, go to Administration->Presentation Configurations. If you don't see it, follow sub-steps a-e below. Otherwise continue to step 2.
    1. Go to Administration->Itemtypes
    2. Search for Presentation Configurations
    3. Open it, edit, and in TOC Access add a new row
    4. Set the name to Administrators and the category to Administration.
    5. Hit done. You should see Presentation Configurations in the table of contents now, though you may need to refresh.
  2. Create a new Presentation Configuration, named Part TGV Example
  3. In the Command Bar Section relationship, add two new rows.
    1. The first row will control the Toolbar, the row of UI elements above the TGV itself. Set its properties as follows:
      1. Classification: Data Model
      2. Name: Part TGV Example Toolbar
      3. Location: TGV_Toolbar
      4. Identity: World
    2. The second row will control the Context Menu, the menu which appears when you right click on a Tree Grid View. Set its properties as follows:
      1. Classification: Data Model
      2. Name: Part TGV Example ContextMenu
      3. Location: TGV_ContextMenu.
      4. Identity: World
  4. Hit Done
  5. Now we want to make some changes to our toolbar. Most Tree Grid Views can export to excel, but in this case we don’t want that. Open the toolbar by right clicking that row and clicking open.
    1. Keep in mind that this will augment the usual TGV Toolbar. You can add new toolbar buttons and remove existing ones from the defaults.
    2. Add an existing CommandBarItem as a new row. This will open up a search grid. Search for an item with the name “rb_ExportToExcel” and add it.
    3. Set the Action to “Remove”
    4. Hit Done.
  6. Now our tool bar won’t have that option in this TGV.
  7. Next we want to add an option to our context menu. Go back to the Part TGtV Example Presentation Configuration. Where before you opened the toolbar, now open the Context Menu by right clicking it and clicking Open.
    1. Like the toolbar, this will augment the usual options. Unlike with the toolbar, in most default configurations there aren’t any existing context menu options. In the Command Bar Item view, create a new row. Set its properties as follows:
      1. ItemType: Menu
      2. Name: Example_Menu_Option
      3. Action: Add
      4. Identity: World
  8. Right click the new row, and click Open
  9. Here, we have another set of properties to fill out. Click Edit to change them.
    1. The Label is what shows on the menu- set this to “Our Example”
    2. The Init Method is a method that runs when the menu opens. Leave this blank for the moment. This is often used for further precise configuration of when the option is visible: a method which ends with “return {'cui_disabled': true};” will not be available.
    3. The Click Method is what will happen if we click on it. Set this to a method of your choosing, perhaps a simple alert to confirm that it works.
    4. Click Done.
  10. Now our new Tree Grid View has a customized toolbar and a custom context menu.

These changes will only affect this specific Tree Grid View. It allows for targeted custom alterations and this is a useful way to go about making changes since many TGVs are designed for a single context. However, if you want to make a change to every tree grid in your instance, our next section will walk you through that. Making changes to every Tree Grid View in every instance everywhere requires you to work at Aras. We're hiring!

All Tree Grid Views

While the last section assumed you only wanted to change one TGV, it's also possible you have an idea for new functionality that you want to apply to every Tree Grid View in your solution. If that's the case, CUI still has what you need.

  1. Start by going to the table of contents and opening Administration-> Configuration -> Client Presentation
  2. Search the Client Presentation, and click on Global
  3. In the Command Bar Section, look for Location with TGV_ContextMenu and TGV_Toolbar. Right click and then open each of them.
  4. From here, this should look very familiar to steps five and seven from the first section.
  5. To change the toolbar, go to TGV_Toolbar.


    1. Add a new CommandBarItem as a new row. When you do, a dialog will open asking what kind of element we want to add.
    2. Click Button, then click Okay
    3. Set the Action to “Add”
    4. Set the name to a name of your choice. We'll call ours "labs_Synchronize"
    5. Hit Save.
    6. Now, right click our new row and click open.
    7. In the CommandBarButton window that results, set the properties as follows:
      1. Label: "Synchronize"
      2. Like with Toolbars, the Init Method can be used to decide whether or not to display our toolbar button. It's fine to leave it blank for now.
      3. Click Method: A method of your choice. In our case, we have one called "labs_Sync_With_External"
      4. Image: Choose an image of your choice.
    8. Hit done.
  6. Now if you go to any TGV in your system, you'll see your new icon resting their in the toolbar!
  7. Next we want to add an option to our context menu. Go back to the TGV_ContextMenu. 
    1. In the Command Bar Item view, create a new row. Set its properties as follows:
      1. ItemType: Menu
      2. Name: Second_Menu_Option
      3. Action: Add
      4. Identity: World
  8. Right click the new row, and click Open
  9. Here, we have another set of properties to fill out. Click Edit to change them.
    1. Label is what shows on the menu- set this to “Our Example”
    2. Init Method can be left blank for now.
    3. Click Method: A method of your choice.
    4. Click Done.

There you have it. These changes will be shown on every TGV in your system, to every user. That may not be what you want: it's reasonable to want to only show some options to some users, in which case change the For Identity and Identity fields to suit your needs. If you want more fine grained control- perhaps a toolbar button that only appears when a part is in a particular lifecycle state, or a context menu option that will only be shown when a part has a BOM- first start by applying it to every TGV. Then use an Init Method to control whether it displays. CUI is a powerful, customizable tool!

 Conclusions and Congratulations

If you’ve been following along, you now have a functional understanding of how Tree Grid Views and the Configurable User Interface interact. You can add actions to the context menu for a particular TGV or change how the toolbar will look for all TGVs, and what you’ve learned here will only help you when it comes to making other kinds of customizations. Remember, while you can make almost any change to how Aras Innovator operates by changing the underlying code, it’s much easier to use low-code configuration changes. Before you embark on a long development project, ask yourself if you can use the tools you already have at hand.

And, as always, please let us know in the comments below if you have questions or comments regarding this article! What changes have you made to your tree grids?