0

I am trying to set a toolbar button image. I have found various ways of defining button images, but none seem to work consistently.

Here are the ways I have found (either in documentation or on SO):

  • In code (doesn't work at all for me [for toolbar buttons])

     public PXAction<DAC> action;
 [PXButton(CommitChanges = true, ImageKey = PX.Web.UI.Sprite.Main.ArrowRight)]
 [PXUIField(DisplayName = "Action")]
 protected virtual void Action()

  • In ASPX, in Base Properties > Images > Normal of the screen editor

    • Normal | main@ArrowRight

  • In ASPX, in Ext Properties > ImageKey and ImageSet of the screen editor

    • ImageKey | main
    • ImageSet | ArrowRight

The ASPX options work for the main ArrowRight icon, but there are various other icons in the same sprite that I would like to use that do NOT work. For instance, intellisense in VS suggests that Relation and RelationF are also in the main sprite, but these display as blank images.

What am I doing wrong, and how can I access something other than arrows?

Deetz
  • 329
  • 1
  • 16

1 Answers1

1

The web font is contained in the fonts folder of the Acumatica web site on the web server. Install a local Acumatica web site if necessary.

Font folder example: C:\AcumaticaSites\YourWebsite\fonts

Open one of the fonts file. The file acumatica-font-v1.svg can be opened in a text editor.

You will notice Relation / RelationF are missing and main-ArrowRight is declared in the file:

<glyph unicode="&#xe90a;" glyph-name="main-ArrowRight, ac-arrow_forward" d="M448 134.4l262.4 262.4h-582.4v96h582.4l-262.4 275.2 64 64 384-384-384-384-64 70.4z" />

Check the mapping between the constant and the Unicode icon in Content\font-awesome.css CSS file:

.main-ArrowRight:before {
  content: "\e90a";
}

You can also open the true type font ttf from the fonts folder and install it to view the icons in a font viewer.

enter image description here

Hugues Beauséjour
  • 8,067
  • 1
  • 9
  • 22
  • Is there a way to see the character name in Character Map? – Deetz Oct 23 '20 at 18:20
  • 1
    No, use other font viewers and try the other font formats for more options. With CharMap, look up Unicode value in the bottom status bar. Encode Unicode value and look it up in SVG file, U+F01D encoded as  – Hugues Beauséjour Oct 23 '20 at 18:24
  • Are all the ways I documented in my post still viable ways of setting icons, or has something changed? Is there a recommended way? – Deetz Oct 23 '20 at 18:25
  • I usually just search the ASPX and CS files for ImageKey, copy examples, test them and select the first one that achieves the desired result. My answer was more about why some constants aren't mapped to actual icons. – Hugues Beauséjour Oct 23 '20 at 18:29
  • ImageSet is just an alternative syntax, adding the set in the ImageKey property should achieve the same result. So it's really only one way to do it in that regard. You can also set custom images. – Hugues Beauséjour Oct 23 '20 at 18:32
  • The last piece is mapping between icon Unicode character and the constant in CSS file 'Content\font-awesome.css'. I updated my answer with that. – Hugues Beauséjour Oct 23 '20 at 20:26