How To: Custom Toolbar Icons

Knowledge sharing, so other folks don’t have to struggle as long as I did to figure this out.

If you took the extended ed for app studio, there was a section where you can add a custom tool. In the lab, it has you enter “mdi mdi-van-utility” into the icon property. That’s all well and good, but what if you want something else?

~~I could not find a resource folder of sorts in the server folder, so on a whim I tried Google and found this website: https://iconify.design/icon-sets/mdi/~~

Epicor linked me to the website that they use internally. These should all work!
https://pictogrammers.github.io/@mdi/font/3.9.97/

You can search for an icon and use the name.
image

From what I can tell, it’s been hit-or-miss, but at least some of them are there!
Until I can get a defined list from Epicor, this will be my go-to.

So, to add the toolbar icon:

  1. On a panel grid (or wherever), find the “Action Data” section. Sometimes it’s in “Advanced” sometimes not.
  2. Enter an ID and description.
  3. For the icon, enter “mdi” followed by the name of the mdi from the website. For example: “mdi mdi-note-outline”
  4. Check the “Add to Primary Toolbar”
  5. Save and test!
  • There’s no On-Click behavior *yet*, so you’ll have to wire up the event manually, using a trigger, hook, and referencing the control ID.

image

8 Likes

Alternate note, if you want it by the save tool, go to the Detail page, click the header, and add it from there.

image

And then create a rule to hide it from the landing page (if you need).

1 Like

image
All your base are belong to us.

image

4 Likes

Thank you so much for sharing!

1 Like

This is a nice find! You can also add hover text:

image

1 Like

Is it possible to hide custom Tool using widget i.e. property-set? DataRules sometimes are not enough.
(Asking because for me it doesn’t work via property-set)

I can’t seem to get it to work.

Even THIS doesn’t work?! #SoSad

You have to keep searching for correct property name :stuck_out_tongue: