An Overview of CUI Locations

An Overview of CUI Locations

We have a number of articles on the Configurable User Interface (CUI) available, but each of them is very focused on one particular aspect or use case. This is a good way to teaching how to use the features of CUI, but today we'd like to take a moment to put lots of options on one page to show what's possible. Therefore, this article will endeavor to give a quick overview of all the sections of Aras Innovator you can configure with CUI.

Screenshots are taken from Aras Innovator Version 12 SP15. 

While we won't be taking a deep dive into exactly how to configure all of these in this article, keep an eye out for links to other articles that do have that detail. In general, you can find these settings in one of two places. For something that applies to multiple itemtypes, follow the below steps:

  1. From the table of contents, go to Administration-> Configuration -> Client Presentation and search.
  2. Click on "Global" in the results.
  3. Under the Command Bar Section, you should see the current elements set up using CUI.

For something that only applies to one itemtype, follow these steps instead.

  1. Start by opening the relevant itemtype.
  2. Select the Client Style relationship tab.
  3. You’ll see a grid under Present Configuration. Right click the row there, and click Open.
  4. You should see, in the Command Bar Section, any current elements set up with CUI.

Where it makes sense we'll aslo be giving the location name in bold. That's what you'll specify when setting up CUI, but please note that the location names are current as of Aras Innovator 12SP15 as well. For more precise examples or instructions, take a look at many of our other CUI articles. For now, on with the overview!

Headers

Lets start from the top. The main window header bar is the top of most Aras Innovator displays, always available and omnipresent. Tweaks to the header allow you to place buttons that are available anywhere in your Aras Innovator instance, and are best used for new actions that aren’t dependent on where you are. An in-depth overview of how to use CUI with headers can be found here. The location name for this is the MainWindowHeader.

Title Bars

Just below the header in visual prominence is the title bar. Placed under tabs, above the focus of most screens, the title bar is context dependent but easy to find. You should use title bar changes for things you expect your users to need often, but not tied to a specific item. While this area has a lot of visual space, it’s easy to make it crowded. This location is the SearchView.TitleBar.

Generally, buttons here do something to what’s beneath them like claiming an item for use for use, or showing the itemtype description for the itemtype you’re searching on. We recommend keeping to that design language: this is a place for actions, specifically actions that relate to what’s beneath the title bar.

Item Views

Now we get to the options that are only available when you have an item open. The item views show forms or grids full of information that pertain to one item. Here, you can add tabs to the top or bottom sections, or even add a third segment to the item view. There are many locations applicable here, each starting with ItemView. and continuing with the specific example, such as ItemView.RelationshipsCommandBar

The usual design pattern that Aras follows is to have the item form itself visible at the top (and if you want to change the item form, we have another article for that! It's here) and to have relationships in the bottom segment, with each relationship having its own tab. That isn’t a design pattern that you have to stay with however. If there’s a specific relationship that you feel deserves to be broken out into its own segment, this can allow a user to compare information from two places much easier. We do recommend not using too many segments since it requires a user to scroll up and down between them. Two segments is about as many as most users will be able to see simultaneously, though they can minimize and expand segments at a click.

Toolbars

Toolbars are often seen on relationship views, giving options for interacting with what you see. Some change individual relationships, while others act on all the options you see. Of course, Aras Innovator prides itself on being configurable, so you can add buttons that do all sorts of things here, but it’s best to remember what information is close at hand. Nothing stops you from adding interactions to affect the item itself, but it would be unintuitive. For a closer look at how CUI and toolbars work, take a look at our article here. Like ItemViews, toolbars have many formal locations. You can see most of them by searching "*toolbar*" in any locations search.

Toolbars aren’t only seen here of course, and the same approach will work wherever you need to add the toolbar. At its heart, a toolbar is a like a toolbelt, an array of tools for you to make use of. They’re kept close together just like your hammer and your wrench are often close at hand. Make use of separators to keep categories of tools distinct.

Sidebars

Having exhausted the options going straight down, lets look to the side! Sidebars generally appear next to an item, and don’t move when you scroll up and down on that item. Add something to the sidebar when you want to display something a little outside Aras Innovator’s usual approach. Toolbars, item views, and headers are all general purpose tools that you’ll see repeated whether the item is a part or an incident report or a project. Within sidebars, you’ll find attached files viewed right in Aras Innovator, or three dimensional views of CAD parts. By clearing the screen of other information, you can put whatever it is you need to see front and center, and always go back the same way you got there- the sidebar. The location name for this is ItemWindowSidebar.

Of course, a sidebar is ultimately a place to put a button. The common design practice at Aras is to put different displays or pages here, and we suggest you stick to that. If you want to take an action on the item, put it in a toolbar. If you want to show information relating to the item, a sidebar can be a good place. Still, if you want to see some examples of sidebars in CUI please read our previous article here.

Table of Contents

Going further to the side, we find the table of contents. Altering the table of contents is generally done for labeling or presentational purposes, and it’s important to remember that, say, adding an item to the table of contents isn’t CUI at all but is done through the relationships of that itemtype. Still, you can change the labels of things in the table of contents through CUI.

Menus

There are lots of menus in Aras Innovator. From search grids to navigation to the big user menu at the top right, the ability to alter menus means the ability to add or gate a lot of capability. It’s hard to give general advice for menus, because they come in so many varieties. Fortunately, menus are where you can give the most detail and description: a menu doesn’t need to be an icon, but can be written words. Further, menu options show up alongside each other, meaning they can give each other context as well as be informed by where the menu shows up. After all, if you right click an item from a search grid, “open” and “promote” obviously refer to the item you clicked on, and a user would similarly understand “share” would work the same way. You can read more about CUI and menus here, and we encourage you to do so: menus are one of the more common places to add functionality to Aras Innovator.

 Keyboard Shortcuts

Last stop! CUI adds official support for adding keyboard shortcuts to Aras Innovator. This is the least obvious change, since your users will never see a visual indication that there’s an option for this. It also runs the risk of accidental usage, either because your user happened to hit several nearby keys together or because you made a keyboard shortcut use the same key combination as other programs. (Hint: Do not use ctrl+c. Your users probably have a clear expectation of what that does already.) Keyboard shortcuts are good for power users and actions that are taken very often. It’s also good for looking like a wizard as you speed through your daily process, views appearing and disappearing as if by magic.

It’s always a good day when you can make an onlooker say “wait, how did you do that, that was awesome!” This article is a couple of years old, but here's an example of this from Aras Innovator 11SP7.

Conclusions and Congratulations

You made it to the end! While this was a quick overview of the options CUI provides, we didn’t go into technical detail. There’s just too much to cover to make that practical! However, we’ve linked liberally to other articles with more depth on each topic, and you’re encouraged to look at them in greater depth if there’s a particular approach that you think might be useful at your organization.

As always, we’d love to hear how you’re using CUI in your system. Is there a keyboard shortcut you couldn’t live without? A combination of item views that’s particularly useful? Let us know in the comments below!

Sean Coleman
  • Short remark: I think in my sample the "Font" isn´t the main problem, even Aras seems to use standard fonts like Roboto and Arial. But there are some tiny details in coloring, weight and spacing that make Aras standard text look a bit better than. This details would be nice to know :)

  • Hi Skyler,

    many thanks for this article! Really helps to get a better understanding of how Aras names things.

    Cause from my POV is the naming is the most important thing to know. Here I can also share one CUI tip: If you don´t know were to start, search for an existing Aras CUI element that already contains the position, look&feel and behavior of the element that you want to create by yourself. Existing Aras element often contain extra logic done by Method which is easy reusable. E.g. I made button based on the "Promote" button in the Part tear-off menu. This one uses a nice logic in case user select just one or multiple items. By reusing existing elements you can build more intelligent buttons by yourself.

    I also discovered, that I can reuse the stylesheets used for CUI for my own custom form buttons. This way custom buttons in Form blend in to the layout much better. This one would lead to my question:

    Is it possible for the Aras Labs team, to write an article that just highlights a couple of the default styles used in Innovator? E.g. which are the main colors and fonts that are used? I today designed a custom Form which uses a html element that contains a custom header and helptext. But the fonts used by default for this elements is 'Arial' so everything looks a bit dated. I wasn´t able to detect the fonts used in Innovator. Tried to analyze the TOC font. Thought it would be "Roboto", but with this one my text still uses the same outdated Arial-design. It´s definitely different to the font used by standard Innovator elements. I would love when it would be possible to reuse standard Innovator 12 fonts and colors in custom Forms.

    So a few hints to the used styles in Innovator would help users to build more beautiful customizations by themselves!

    Thanks again!

    Angela