JD_Jinesta Outstanding Contributor.
Outstanding Contributor.

(SM) Support Tip: How to add an icon/image for a custom transition in Process Designer Web Client

In order to add an icon or image for a new custom transition or existent custom transition that does not display an icon in the toolbar, please follow these steps:


1- Create a .png file with 16 x 16 pixels of size that will be used for the custom transition.

2- Look for the Workflow under Process Designer where it’s necessary to add a new custom transition or where the existent one already exist.

3- Click custom transition once added or if already existed. Under Transition info locate Command Name.

4- Based on the command name, icon/image name for this custom transition will be the first 7 letters of it. It doesn’t matter if it’s a single word or multiple words. If the word is smaller than 7 letters then it will be just those letters.

Examples => Enhancement: tenhance.png / Fermer: tfermer.png / Reject: treject.png / Leave: tleave.png

5- Once command name is properly set, rename icon/image from step 1 to the proper name and copy it to web client root folder inside BOTH images/toolbar and images/obj16 folders.

6- Restart web client.

7- Login into web client, go to the appropriate format for the Workflow previously modified and check custom transition will display custom icon/image.


Now, if the image is not there, it’s possible to confirm by enabling trace soap parameter in the web client what exactly file name the web client is looking for.


In order to check, please do this:


1- Add this parameter to the web client URL => ?tracesoap=true --- For example => https://mywebclientserver/sm/index.do?tracesoap=true

2- Login to SM and access the format where the icon/image should be display.

3- Now, there is a sm.log file created under web application server root folder. This file contents the XML data received by web client to display all objects in the format.

4- Search for the caption of the button that doesn’t display the icon, e.g. Fermer .

5- You will see something like this:


   <option img="tfermer" value="62">






6- As you can tell, properly img tells web client the name of the file. SM automatically adds .png extension


This will help to confirm names of files in case images/icons are not displayed.

SM Support Engineer

Thank you for using the Micro Focus Community. If you find that this or any post resolves your issue, please be sure to mark it as an "accept as solution".
Labels (1)
The opinions expressed above are the personal opinions of the authors, not of Micro Focus. By using this site, you accept the Terms of Use and Rules of Participation. Certain versions of content ("Material") accessible here may contain branding from Hewlett-Packard Company (now HP Inc.) and Hewlett Packard Enterprise Company. As of September 1, 2017, the Material is now offered by Micro Focus, a separately owned and operated company. Any reference to the HP and Hewlett Packard Enterprise/HPE marks is historical in nature, and the HP and Hewlett Packard Enterprise/HPE marks are the property of their respective owners.