Item Views with CUI

Item Views with CUI

The Configurable User Interface (CUI) is one of the many ways Aras Innovator continues to make itself adjustable and customizable. You don’t need long development cycles to tweak how things are laid out in your environment, and rearranging things can be done without any coding experience at all. Much of this is done through Aras Innovator’s unique approach to data organization- to whit, everything is an item- and that means you spend a lot of time viewing items. Today, we’re combining those: we’ll walk you through how to use CUI to change the item views.

Screenshots will be taken from Aras Innovator version 12, service pack 18. The steps we give assume that you have an administrator account.

Add a Tab

Open up any item. You’ll see the name of the item up top, the command bar beneath that, and then the majority of the actual data held in two “accordion” views. Generally, the first accordion shows the information of the specific item, and the lower accordion shows the relationships that item has. This is a general rule- some items are arranged differently. How? Follow along to see how to move a relationship tab to the top accordion.

We’ll use Parts as our item and the Part BOM relationship as our relationship to move, but this basic process should work on most items and relationships.

  1. Open the Part ItemType.
  2. Select the Client Style relationship tab.
  3. Right click the entry in the grid and click Open.
  4. Click the Edit button.
  5. Select the cui_PresentConfigWinSection tab.
  6. Click the New button in the toolbar.
    1. Set the Classification to Data Model.
    2. Set the Name to Accordion1.
    3. Set the Location to ItemView.
    4. Set the For Identity to World.
  7. Click the Save button
  8. Right click the new window section.
  9. Select Open. 
  10. Click Edit
  11. Click the New button in the toolbar.
    1. Set the Type to Tab Element Control
    2. Set the Name to ACC1_BOM_Tab
    3. Set the Label to Part BOM
    4. Set the Additional Data to {“relTypeId”: “159C6D88795B4A86864420863466F728”}
    5. Set the Parent to ItemView.FormAccordionTabs
    6. Set the Sort Order to 1024
    7. Set the Action to Add
    8. Set the For Identity to World.
  12. Click Save.

Now if you open a Part, you should see the Part BOM tab is showing in the first accordion. This lets you see the Part BOM and relationships at the same time, and makes it easier to find the Part BOM relationship.

Hide a Tab

Of course, now we have the Part BOM tab in two places- the top accordion and the bottom. While there’s nothing inherently wrong with that, and it may actually be useful if you want to be able to compare a relationship against any other tab, it’s usually not how we do things. What we give, we can take away, like so:

  1. In the table of contents, navigate to Administration-> RelationshipTypes
  2. Search for Part BOM and open it.
  3. Click Edit
  4. Check the Hide In All box.
  5. Click Save

Now it won’t show in any relationship accordions. Since that’s the second set of tabs, when you combine these two procedures you’ll have effectively moved the Part BOM from the bottom to the top. Keep in mind that it hasn’t “moved” really- you made a new one, and hid the old one- but that won’t matter in most cases.

Add a Third Accordion

Okay, but why are there two accordions anyway? Since you can collapse an accordion menu easily (just click the arrow in the top right) you could have three or four without impeding access to the information. While we at Aras counsel restraint and simplicity in design, if your heart compels you to more and more, far be it for us to stop you.

To make your dream a reality, follow the following steps:

  1. In the table of contents, navigate to Administration -> ItemType
  2. Search for the Part ItemType and open it.
  3. Select the Client Style relationship tab.
  4. Right click the entry in the grid and select Open.
  5. Click the Edit button.
  6. Select the cui_PresentConfigWinSection tab
  7. Click the New button
    1. Set the Classification to Data Model
    2. Set the Name to Accordion3
    3. Set the Location to ItemView
    4. Set the For Identity to World
  8. Click the Save button.
  9. Right click the new window section and click Open
  10. Click the Edit button
  11. Click the New button in the grid toolbar.
    1. Set the Type to Accordion Element Control
    2. Set the Name to Acc3_Container
    3. Set the Additional Data to {"cssClass": "aras-item-view__relationship-accordion"}
    4. Set the Sort Order to 2000
    5. Set the Action to Add
    6. Set the For Identity to World
  12. Click Save
  13. Click the New button in the grid toolbar.
    1. Set the Type to Tab Container Control
    2. Set the Name to Doc_Tab_Container
    3. Set the Additional Data to {"attributes" : {"slot": "header"}}
    4. Set the Parent to Acc3_Container
    5. Set the Sort Order to 2050
    6. Set the Action to Add
    7. Set the For identity to World
  14. Click Save
  15. Click the New button in the grid toolbar again.
    1. Set the Type to Tab Element Control
    2. Set the Name to Document_Tab
    3. Set the Label to Documents
    4. Set the Additional Data to
    5. Set the Parent to Doc_Tab_Container
    6. Set the Sort Order to 3000
    7. Set the Action to Add
    8. Set the For Identity to World.
  16. Click Save

You can repeat step fifteen, adding as many Tab Element Controls as you wish, adding tabs to the third accordion. You can also repeat step seven to add as many accordions as you wish, if you think you need more accordions. Shine on, accordion lover. Don’t let the world take away your dreams.

Now, there are good design reasons not to have every tab in its own accordion. In practice, four is the most we'd generally suggest. If you have a use case for more though, Aras Innovator has your back.  Now, what's the collective noun for accordions? Is it an orchestra of accordions, an assemblage of accordions, a cacophony of accordions? Sadly, Aras Labs does not have this answer for you.

Conclusions and Congratulations

Now you know how to add tabs, remove tabs, and add entire new accordion menus. Item views are so easy to adjust once you have the trick of it. Plus, each new piece of CUI you understand makes the entire edifice more adjustable, and makes Aras Innovator ever more tailored to your needs. What changes would you make to your most common Item views? What about the uncommon ones? Let us know in the comments below!