Customizing the Aras Method Editor Theme

If you've ever wanted to change the theme of the Aras Method Editor, this is the post for you! With the following quick and easy tweak, you can change the colors and fonts used to display method code in the editor.

Six different themes in the Aras Method Editor: Textmate (default), Ambiance, GitHub, Idle Fingers, XCode, and Monokai.

Getting Started

For this customization we will be modifying a code tree file, so be sure to backup your code tree before making any changes to your Aras Innovator configuration. Backing up a code tree is as simple as zipping up the Innovator folder and saving it to another location. This will ensure that you can completely revert any changes you may make.

1. Choose the Theme

First, you need to select the theme that you want to use in the method editor. All 32 themes are defined in Innovator\Client\scripts\CodeEditor\javascript\src-min-noconflict\ and follow the theme-theme_name.js naming convention. For example, the Crimson Editor theme is defined in theme-crimson_editor.js.

If you want to preview the themes before choosing one to use in Aras, you can use this theme previewer for the Ace code editor.

2. Update the Editor

To change the theme of the method editor, we need to update Innovator\Client\scripts\CodeEditor\MethodEditor.html. As shown in the code snippet below, you will need to replace "textmate" with the name of your chosen theme.

Note: If your theme name includes spaces, replace the spaces with underscores. Ex: "Tomorrow Night Bright" becomes "tomorrow_night_bright".

Bonus: You can also set the font size and font family in the above editor.setOptions() call.

3. Refresh the Browser

Once you have saved your modification to MethodEditor.html, clear your browser cache and open up a Method Editor window. The editor now loads with your new theme applied.

My personal favorite theme, "Idle Fingers".

A Few Notes...

• This modification is suggested for development/non-production environments only.
• Modifying other parts of MethodEditor.html or other files in Innovator\Client\scripts\CodeEditor may result in unexpected results or negatively affect functionality.
• This modification may need to be reapplied after a major version upgrade of Aras Innovator.

LOOKING FOR MORE ARAS INSPIRATION?

Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.