Grid with Icons in UCI

Few prominent icons are added to the column for a better user interface which is also shown in UCI.

Firstly, I dug into SDK, and found displayIconToolTip method which consists of two parameters-rowData and userLCID (Note: LCID is not taken.) as English is the default language of the organization.

Implementation:

Step 1: Take any three pictures of 16X16 .png files and create Web Resource of .png format. If picture exceeds 16X16, it will automatically shrink to 16X16.

Step 2: Navigation: Settings>>Customize the System. In the left panel,Click on Web Resources .Then click on New in right panel.

Step 3: Fill Name, Display Name, Description of Web Resource, choose type as PNG format and upload the image as below.

Note: Repeat above mentioned Steps 1 to 3 for rest of the two .png Web Resources.

Step 4: Create JavaScript Web Resource and paste the following code: (Replace imgName as per your wish)

Step 5: Now,Call this function in your respective Views, I have chosen the Active Cases view and selected the priority column.

Step: 6 Click on Change Properties and call your JavaScript Web Resource function as shown below.

Output:

  • On UCI, it will be shown as
    1. SubGrid of Case on Contact:
  • 2.Case Sub grid:
  • On Web Client, it will be shown as

Hope it helps!

2 thoughts on “Grid with Icons in UCI

  1. Hi Sawti,
    Thanks for sharing this.
    Does this work in UCI online environment ? i tried it on PSA 3.4 online however the script itself is not loading.
    Thanks,
    Javed Jamali

    Like

    1. Hello Javed,
      I have done it for CE. I will check for PSA 3.4 whenever I will get time. If by any chance you dug it before than me and finds that it is working fine for PSA 3.4 Please let me know also 🙂
      Regards,
      Swati

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s