Add icons to regular Action elements
This article shows a little trick to improve the lock&feel of your Innovator. We will also demonstrate that it’s always worth to question OOTB features. They often can be extended quite easily. You just have to dare to do it!
The ItemType Action can be used to build custom user interaction elements. Actions items are a bit like COM or CRT ports that you may still find on some desktop PCs. A little bit antique, but easy to use and reliable.
The modern variant of Actions are CUI elements. These offer much more flexibility as well as improved design and permission options. But you also need more knowledge to use them.
When Actions are your PCs COM-port, CUI elements represent the USB3.1 interface. While you will try to use USB3.1 whenever possible, some of your DIY tech projects may be a lot easier to realize with a good old COM-port.
This project shows a way to remove at least the optical border between Actions and CUI elements by adding icons to Actions.
Concept
Newer Innovator versions use an interesting concept. Actions are automatically rebuild as CUI elements by a couple of Methods.
If we stay at the COM port / USB3.1 example used at the beginning: Your PC may not longer provide real native COM ports, but has built-in USB-to-COM converter.
Newer Aras versions do exactly the same. The Action-to-CUI converter in Aras is realized with three Methods. We can use them as anchor to integrate custom icons without resource loss.
This concept will only work for Innovator versions that support CUI elements. I am unsure about Innovator 11 service pack 9/10, but all newer version (>11SP11) should work.
In this example we will add an icon to the OOTB Action Manual Release. I actually don’t like the Manual Release Action because it does the same as Promote. If you want to use both release options you will notice that you have to maintain two different Methods in parallel. But that’s a different story…
Step #1: Add Image property to ItemType ‘Action’
Tip: Don’t hide your icon property! So you can see the Icon in the Actions tab in your ItemType definition!
Step #2: Add image selector to Form ‘Action’
Step #3: Modify Action ‘PE_Manual Release’
Tip: Store custom icons in the codetree customer folder and use svg icons whenever possible.
Step #4: Modify Method ‘CuiMainWindowMainMenuActions’
Add the image property to the select statement in line 6:
Do the same in line 22:
Add the highlighted two lines of code:
In the code above I forgot to enter //comments in the code. I recommend that you add some to highlight that this was a change applied from yourself and is not part of the default Method.
Step #5: Change other relevant Actions
There are 3 positions, where Actions are transformed to CUI elements. The above code shows just one of them.
Apply similar changes to the following Methods:
- CuiMainWindowContextMenuActions
- CuiTearOffWindowMainMenuActions
This will ensure, that your icon is displayed in the
- Main Window (main menu in grid)
- Tearoff Window (main menu of opened part)
- and Main Window Context (right click window in grid).
At first glance, this tech tip seems to be very complicated, since you have to adjust many components. But you will notice that the changes themselves are very simple.
It’s really a fast modification when you are a bit familiar with programming in Innovator.
Step #6: Result
Your Manual Release Action should now show the icon, just like a CUI element:
Step #7 (optional): Improve CSS
Adding an icon might enlarge your menus. In the result picture you can see, that the distance between two Actions is increased. We can resolve this one by adding a height limitation to the following code tree stylesheet file: ../client/styles/controls/menu.css
You may need to change additional CSS files in the codetree to find the perfect styling for your system. The browser debugger will lead the way!
Step #8 (optional): Do the same for Reports
What´s possible for Actions is also possible for Reports. You can adjust them in the same way by modifying the following Methods:
- CuiMainWindowContextMenuReports
- CuiMainWindowMainMenuReports
- CuiTearOffWindowMainMenuReports
Step #9: Write down your chances
We chanced a lot of OOTB elements in the previous steps. In summary, we changed the following:
- ItemType Action
- Form Action
- Various Methods
- Codetree CSS files
It´s not unlikely that especially your changes in the default Methods will be overwritten when you do an Aras upgrade. The upgrade team may rely on an automated process so most of your customization will not get lost. But it’s impossible that they will know about every detail in your specific system and how YOU expect it to work.
Therefore, it’s your task to describe your environment! Image them as tank drivers. If you have ever had the opportunity to sit in a tank, you will have noticed that the driver´s view is surprisingly good, but limited through understandable circumstances: Just a couple of mirrors show a partial image of the surrounding world. If you don’t tell them about your environment, they will hardly notice that they are about to level your garden, the bird house, neighbors cat and your lovely crafted Action icons.
Regarding the example shown here, documentation is probably more work than the change itself. But I want to mention it explicitly. A little bit of documentation will always save time later.
Built with Innovator 11 SP12 free version. Successfully tested with Innovator 11 SP15. Use at your own risk.