Working with Toolbars and CUI
Configurable User Interface forms a remarkably complete package for customizing the layout of Aras Innovator, and in this article we’ll take a look at working with toolbars using CUI. The toolbars are present at the top of many pages and forms, providing functions and drop down menus from an accessible location. This article assumes you’re logged in as an administrator, and that you have a familiarity with Aras Innovator. Screenshots and directions will use version 12, service pack 10. Add a Button Starting with a basic example, lets say we wish to add a button to the Part item’s toolbar, one every user can access. Open the Part ItemType and select the Client Style relationship tab. Right click the entry in the grid and select Open to open the Presentation Configuration for the Part ItemType. Click the Edit button. Click the New button in the Command Bar Section grid to create a new section with the following properties: Classification: Data Model Name: Part_Custom_Buttons Location: ItemView.ItemCommandBar Sort Order: 256 For Identity: World Click the Save button. Right click the new Command Bar Section and select Open. Click the Edit button. Click the New button in the Command Bar Item grid, then select Button > OK in the dialog to create a new button with the following properties: Name: My_Button Sort Order: 2000 Action: Add For Identity: World Click Save. Right click the new Button and select Open. Click the Edit button. Set the following properties on the item form: Label: enter the label you want to appear on the button Click Method: choose a Method you want to execute when the button is clicked Image: choose an icon to display in the button Click Save. To see our work, open a Part item. You should see your new button in the toolbar up top, right as you see below. That’s the basic change to a toolbar, adding the options you need. What if you have the opposite issue, and want to remove something? Remove a Button Sometimes, a user or group of users don’t need some option. It overcomplicates their layout, requires explanation that wastes time, and invites mis-clicks. In this example, we’ll hide the Share button on the Part BOM relationship toolbar- but only for certain users, the ones who are members of an identity called All Suppliers. Open the Part BOM ItemType and click the Edit button. In the Client Style relationship tab, click the New button to create a new Presentation Configuration with the following properties: Name: Part_BOM Click the Save button. Right click the new Presentation Configuration and select Open. Click the Edit button. Click the New button in the Command Bar Section grid to create a new section with the following properties: Classification: Data Model Name: Part_BOM_Custom Location: ItemView.RelationshipsCommandBar Sort Order: 128 For Identity: All Suppliers Click the Save button. Right click the new Command Bar Section and select Open. Click the Edit button. Click the Add button in the Command Bar Item grid, then search for the commonitems.commandbar.sharemenu item. Click OK in the search dialog to add the item to the Command Bar Items grid. Set the following properties for the Command Bar Item: Action: Remove For Identity: All Suppliers Click Save. To test this, you’ll want to log out of Aras Innovator or open a new browser. Either way, log in as a member of the All Suppliers identity. Open a Part item to see that the Share button no longer appears in the Part BOM relationship toolbar. Now we can add, and we can remove. What if we want to take a quick shortcut and replace something, rather than going through adding it and taking it away? Replace a Button This is really just a fast way to swap a button in the toolbar with a new button of your own design. As an example, we'll replace the default New button with a custom button on the Part Search toolbar. Open the Part ItemType and select the Client Style relationship tab. Right click the entry in the grid and select Open to open the Presentation Configuration for the Part ItemType. Click the Edit button. Click the New button in the Command Bar Section grid to create a new section with the following properties: Classification: Data Model Name: Part_Search_Custom_Buttons Location: SearchView.CommandBar Sort Order: 512 For Identity: World Click the Save button. Right click the new Command Bar Section and select Open. Click the Edit button. Click the Add button in the Command Bar Item grid, then search for the searchview.commandbar.default.new item. Click OK in the search dialog to add the item to the Command Bar Items grid. Set the following properties for the Command Bar Item: Sort Order: 2000 Action: Replace For Identity: World Click Save. Right click the Button and select Open. Click the “…” button in the toolbar and select Create New Button to create a new Button with the following properties: Name: My_New_Button Label: New Tooltip Template: New {0} Init Method: cui_svcb_new_init Click Method: cui_ivicb_more_new_click Image: choose an icon to display in the button Click Save. Navigate back to the Part_Search_Custom_Buttons Command Bar Section tab. In the Alternate property of the searchview.commandbar.default.new Command Bar Item relationship, enter My_New_Button. Click Save. To see your change, open the Table of Contents then navigate to Design -> Parts to see the custom “New” button in the search toolbar. You should see it sitting proudly changed, easily altered and present for all future use. Toolbars are, in the end, a vehicle for the tools we put in them. Adjusting your toolbelt to the task at hand shouldn’t be hard, and in Aras Innovator, it isn’t. You can even add shark repellant! Conclusions and Congratulations Now you can add, remove, and swap things from your toolbars without needing to write your own interfaces. Reuse methods or functionality from elsewhere, or provide a prominent place for your own custom code. This just reinforces what we already know: CUI is a powerful, flexible tool to have in your arsenal. Everything can be connected, adjusted and customized to fit your needs. What’s the most used toolbar option in your organization? What’s something else you wish you had right next to it? Let us know that as well as what you’re using CUI for in the comments!
Customizing Item Menus with CUI
In previous blog posts, we've covered how to add custom menu items like buttons and shortcuts using the Configurable User Interface (CUI) data model introduced in 11.0 SP7. Using this same data model, it's also possible to add menu items that are specific to individual ItemTypes that you want to have special functionality.Working with Menus and CUI
The Configurable User Interface is the next step forward in low code, highly customizable processes for your organization. When you want to get something done, often the first place you go to is a menu. When you’ve added something new yourself, you want to put that in the most appropriate menu. In this article, we’re going to add a menu item, a submenu item, and then selectively disable a menu. Once you've done that, you should have a good handle on how to tweak the menus in Aras Innovator to better suit your needs. Screenshots will be taken from Aras Innovator SP10, and the steps given assume you’re logged in with an administrator account. Adding a Menu Item Actions make for the most common thing one might want to add to a menu. Perhaps you have an action which as an administrator you find yourself taking often, like referring an item into a queue for later correction. Being productive, busy people, administrators don’t want to forget about a small mistake they see, but might not prioritize the correction at the moment they see it. Assuming we already have our “Fix Later” action, how do we give it a place in a menu that will always be available? In the Table of Contents, go to Administration -> Configuration -> Client Presentation. Click the Search button. Click the Global item property. In the Command Bar Section grid, open the com.aras.innovator.cui_default.mwh_header_user_menu item with the MainWindowHeader location. Click the Edit button. Click the New button in the Command Bar Item grid. In the resulting dialog, select Menu Button and click OK to create a new menu button with the following properties: Name: Fix_Later_Action Sort Order: 3100 Action: Add For Identity: Administrators Right click the new button row and click Open. Give the new menu button the following properties: Label: Fix Later Parent Menu: com.aras.innovator.cui_default.mwh_user_menu Click Method: select a Method you want to run when the button is clicked Click the Save button and close the Menu Button tab. Click the Save button in the Command Bar Section tab. Log out of Aras Innovator and log back in as a member of the Administrators identity. Click the global user menu button in the top right corner of the window and select My Admin Action to run your custom action. Now, if you go to the global menu at the top right, you should be able to see your new menu item. Onward! And inward! Westward? One of those directions. Add a Submenu Item The ideal menu shows exactly the right array of options. Too few, and we don’t have the tools we need. Too many, and it becomes hard to find the option we want. Fortunately, in the Configurable User Interface we can nest menu options underneath each other, giving us all the tools with none of the clutter. As an example, lets store the Structure Browser and Where Used menu items under a new Navigation section in the main grid context menu. (That is, the menu you see when you right click a part from a search.) In the Table of Contents, go to Administration -> Configuration -> Client Presentation. Click the Search button. Click the Global item propert. In the Command Bar Section grid, open the com.aras.innovator.cui_default.popup_menu_for_item_grid item. Click the Edit button. Click the New button in the Command Bar Item grid. In the dialog, select Menu and then click OK to create a new menu button with the following properties: Name: My_Nav_Menu Init Method: initPopupItemInItemsGrid Sort Order: 1300 Action: Add For Identity: World Right click the new button row and then click Open. Set the following properties in the menu: Label: Navigation Click on the save button and then close the new Menu tab. To move the the Structure Browser action to the new submenu, use the following steps: On the Command Bar Section form, open the com.aras.innovator.cui_default.pmig_Structure Browser Menu from the Command Bar Item grid. Click the Edit button. Set the Parent Menu property to “My_Nav_Menu” Save and close the Structure Browser Menu item tab. Move the Where Used action to the new submenu: On the Command Bar Section form, open the com.aras.innovator.cui_default.pmig_Where Used Menu from the Command Bar Item grid. Click the Edit button. Set the Parent Menu property to My_Nav_Menu. Save and close the Where Used Menu item tab. Click the Save button for the Command Bar Section. To see your results, open up Parts (or any search grid) and run a basic search, then right click a row. You should see the “Navigation” submenu, and within, the familiar Structure Browser and Where Used options! Disable a Menu Last trick for now: Sometimes, you decide you really don’t want users making use of a certain menu for some reason. It could be that you want to link access to that menu to certain permissions, or to particular steps in the process. In our example, we’re going to disable the Share menu for items that haven’t been released yet. In the Table of Contents, go to Administration -> Configuration -> Client Presentation. Click the Search button Click the Global item property. In the Command Bar Section grid, open the itemview.itemcommandbar.default item. In the Command Bar Item grid, open the itemview.itemcommandbar.default.share item. Click the Edit button. Replace the normal Init Method with a custom Method that contains the following code: gist.github.com/.../8a7ab76c3da7d8d806a723da094ba038 Click Save, then close the Menu item. To see this in action, go to an unreleased item. You should see the Share button is present, but grayed out and disabled. Conclusions and Congratulations We created a menu item and a submenu item, allowing for quick access to the tools you need, where you need them. We also disabled a menu, to better control the process for your organization. We hope this has been a useful insight into the Configurable User Interface, and we’re curious what additions you find most helpful to your menus- let us know in the comments below what you’d want.Hiding Tabs Using CUI
The Hide Tabs community project is one of the more popular projects Aras Labs has published. It demonstrates how to hide a relationship tab on a specific item form by using a custom JavaScript method. This is useful when you want to limit the use of a specific relationship to only a handful of users. However, this approach comes with some downsides. If your ItemType uses several forms, you must add this same method to each individual form. Additionally, using a custom method at all requires some overhead and maintenance. As of 12.0 SP4, it is now possible to hide tabs without using any custom code at all. In this blog post, we'll cover this new approach that uses CUI in detail. You can also look at the most recent version of the Hide Tabs by Identity community project for an import containing all of the configuration changes we'll make in this post. In these examples, we'll be configuring the Part BOM and BOM Structure tabs of the Part ItemType to be only visible by members of the Administrators identity. Hide the Relationship Tab The original approach of using a custom method involved checking if the current user did not belong to a specific identity. In this case, the tab would then be hidden from that user. With the new approach of using purely CUI, this concept will be flipped entirely. We'll start by hiding the tab for everyone, and then configure the CUI of our ItemType to display the tab for only our Administrator users. Let's take the first step of hiding the relationship for everyone. Log in as admin Go to TOC > Administration > RelationshipTypes Hide the Part BOM relationship Search for and open Part BOM Edit this relationship and check the Hide for All flag In the item toolbar, click the button and select Properties Click Copy ID and store this somewhere as we'll need it later Repeat the steps above for the Part MultiLevel BOM relationship Use CUI to Display the Tab If we go and open a Part now, we can see that the Part BOM and BOM Structure relationship tabs are no longer visible. This is currently true for every user, so now let's re-enable these tabs for only our Administrators. To begin with, we'll need to add a CUI section to tell the Part ItemType that it's going to have custom tabs. Navigate to TOC > Administration > ItemTypes Search for and open the Part ItemType Select the Client Style relationship tab and open the item here This is the item that controls all of the ItemType-specific CUI for Part In this Presentation Configuration, select the cui_PresentConfigWinSection relationship tab Create a new related item here to indicate that the Part view will have custom CUI Classification - Data Model Name - labs.part.itemview Location - ItemView For Identity - World Open this new related item In the cui_WindowSectionControl tab, add a new item to represent the Part BOM relationship Type - Tab Element Control Name - labs.part_bom.tabelement Label - Part BOM This will be the label on the relationship tab Additional Data - {"relTypeId": "159C6D88795B4A86864420863466F728"} The ID here should be the same one you copied from the Part BOM RelationshipType earlier Parent - ItemView.RelationshipAccordionTabs Action - Add For Identity - Administrators This is the Identity that will be able to see this tab Repeat the same steps to add a new item for the BOM Structure relationship Type - Tab Element Control Name - labs.bom_structure.tabelement Label - BOM Structure Additional Data - {"relTypeId": "567E4149FBF74DACA0B0C4C9B1E79A3B"} This should be the same ID you copied from the Part MultiLevel BOM relationshiptype earlier Parent - ItemView.RelationshipAccordionTabs Action - Add For Identity - Administrators Save and close this item Save and close the Presentation Configuration After following these steps, it should look similar to the screenshot below. Confirm the Changes Since we're already signed in as admin, let's open a Part to check if we can see these tabs now. While we're at it, let's also make sure these tabs are hidden for a user who is not an Administrator. When we log in as this user and open a part, we indeed can no longer see the Part BOM or BOM Structure tabs. Conclusion CUI is a powerful tool to have at your disposal that is only growing in functionality and responsibility. If you're looking for more information on how to use CUI to configure other areas inside of Aras Innovator, please check out all of our blog posts on CUI.
