Creating a Custom Refresh Button Using CUI

With the introduction of CUI in Aras Innovator 11.0 SP7, you can now manage the appearance and functionality of the User Interface directly through the Aras Innovator client. In this post, we will learn how to use CUI to add a custom refresh button to item tearoff windows. This custom button will allow users to refresh an item based on the information stored in the database.

Getting Started

You can find all of the code and files for this example on the Aras Labs GitHub page in the refresh-from-database project. If you want to install the finished product, the project page includes all of the instructions for installing the import package.

ArasLabs/refresh-from-database

Note: This project will should only be used with Aras 11 SP7 and later. The necessary CUI capabilities were not yet implemented in versions earlier than 11.0 SP7.

Create the Click Method

  1. Create a new JavaScript method in Aras called “RefreshFromDatabase”
    • This will be the method that will run when users click your custom button
  2. Copy and paste the code from the editor below into the new method.
  3. Save, unlock, and close the new RefreshFromDatabase Method.

Adding the Button

  1. Navigate to “Administration->Configuration->Client Presentation” and click the hyperlink highlighted below to open up the Global Presentation Configuration

    • Changes made to the Global Presentation Configuration will be applied to all items. It is possible to make ItemType-specific UI changes which we will explore in a later post
  2. In the Command Bar Section relationship tab search for the item below

    • Classification: Data Model
    • Name: com.aras.innovator.cui_default.twt_normal
    • Location: Tearoff Window Toolbar
  3. Open this item
  4. In the Command Bar Item relationship tab, create a new item with the following information

    • ItemType: Button
    • Name: aras_labs.twt_refresh_from_database
    • Sort Order: 161
      • This will place your custom button next to the default refresh button
    • Action: Add
    • For Identity […]: World
      • This is the Identity or Group Identity that will be able to see this custom button
  5. Open this new button in a separate tearoff window
  6. Fill in the following information
    • Label: Refresh from DB
    • Tooltip Template: Refresh from DB
    • Click Method: RefreshFromDatabase
    • Image: RefreshFromDatabase.svg
      • Alternatively, you can use a standard icon or your own custom icon
  7. Save, unlock, and close this Button
  8. Save, unlock, and close the Command Bar Section

This button will be visible the next time that you log into Aras Innovator. To confirm that this works, open any item and confirm that you can see an additional button from the toolbar. If you use the icon provided in the project on GitHub, the tearoff window toolbar should look similar to the one below.

To try out what you’ve learned, try to add the same functionality to a button in the Tearoff Window Main Menu.

Other Uses of CUI

CUI is a very powerful tool that will allow you to create a User Interface specific to your needs. Some other examples of customers using CUI include:

  • Making buttons visible only to a set group of users
  • Adding and removing buttons from certain ItemTypes
  • Changing or extending the functionality of standard CUI buttons

Feel free to share your own customizations in the comment section below.

2 thoughts on “Creating a Custom Refresh Button Using CUI

  1. Angela

    We have been using this extension for a month now and I can only recommend it. Especially when creating a new Revision manually you see the difference to the normal “Refresh”.
    But I have still a few questions:
    1. Is it possible to add CUI elements in the relationship tabs? I searched for the “Redline” button element, but didn´t find any corresponding CUI element.
    2. Do you have a document that describes the different abbreviation used in the Client Presentation? (twt, mwmm, twmm,…). And what does CUI actually mean? “Custom user interface” would fit, but you really didn´t mention it anywhere 🙂

  2. Christopher Gillis Post author

    Hi Angela,

    Thank you for the kind words and the great questions!

    To answer your first question, the functionality of the relationship grid toolbar has not yet been migrated into CUI.

    Secondly, while there is no document that outlines the abbreviations used in the Presentation Configuration, the prefixes that you find are shortened versions of the locations those UI elements appear in. For your convenience, I’ll include a list of some of the abbreviations used below.

    CUI – Configurable User Interface
    twt – Tearoff Window Toolbar
    twmm – Tearoff Window Main Menu
    mwt – Main Window Toolbar
    mwmm – Main Window Main Menu

    Thank you again for the feedback. If you still have any questions, please let me know.

Leave a Reply