Creating a Custom Refresh Button Using CUI

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.