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.


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.

Mike Lindner
  • Hi Roval,

    You can file any issues with this project on the GitHub page. When you create a new issue, it will ask you for some information about the bug that will help us test and fix it. Filing the issue there also improves it's visibility among other community members using the project which will ensure it gets resolved more quickly. 


  • Hi, this would be a good enhancement but it works not properly with 11SP12 and Chrome.
    My understanding of a database refresh is that the current item with its properties and relationships will be loaded into the current form.
    But i have seen that not all relationships will be updated.
    Only the current selected relationship tab in the form will be refreshed.
    The other relationship tabs in the form contain the old relationships after doing the refresh.
    Is this a bug or how is it possible to do a real database refresh?

  • Hi ,

    This is mily. I am glad to interact with you all on this topic. This CUI part is interesting to work on . I tried out adding removing few more menu buttons and its absolutely works fine.

    Recently i am working on assignment where i want to open a file dialog through which user can browse files from the system when click on button. Hopefully anyone has idea on this how it can be achieved please share.


  • Do we happen to have an example of "Changing or extending the functionality of standard CUI buttons" somewhere?

  • Hi Chris, Thanks for this nice example of CUI application.