How to add images to catalog item check box variables.

Balaram1 · ‎08-03-2021

Hi all,

We have a requirement to add images above check boxes for user to select the required option for the users.

For laptop replacement request display the below images with checkboxes.

Lenovo Think Pad

Dell Inspiron

Hp pavilion x360

Please help me on how to achieve this type of requirement.

Thank you,

Balaram.

Ankur Bawiskar · ‎08-03-2021

If you are on version below Paris then that variable is not present

Only way is UI macro and widget

1) UI macro for native and widget for portal

2) create UI macro variable and link the macro and widget in that variable

Example

UI Macro variable 1- 100

Checkbox 1 - 200

UI Macro variable 2- 300

Checkbox 2 - 400

Now how to add image in UI macro and widget; refer below link for solution from me; I have showed on how to show link; there you can use image

You can create UI macro and 1 Widget and link it to Macro type of variable for your catalog item

Need to implement catalog URL Macro with the help of Jelly script

Since you require images then do this

1) go to images table;

2) open the image you want

3) pick the html code and use it

Example:

<img src="book-icon.png" width="48" height="48"/>

UI Macro Code: HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<p>Book Icon</p>
<img src="book-icon.png" width="48" height="48"/>
</j:jelly>

Same HTML to be added in widget as well

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

Ankur Bawiskar · ‎08-03-2021

Hi,

not possible with checkbox variable

you can use Rich Text variable which helps adding image

Then add the checkbox variable

Example

Rich Text variable - 100

Checkbox 1 - 200

Rich Text variable - 300

Checkbox 2 - 400

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Ankur Bawiskar · ‎08-03-2021

Hi,

example

In the Rich Text add the image

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

Balaram1 · ‎08-03-2021

Hi Ankur,

Thanks for your response, It worked fine in My PDI.

And it is helpful for me.

But coming to my Organization instance, we dont have variable type as Rich Text as variable.

Please help me with any other way we can insert images.

Thank you,

Balaram.

Ankur Bawiskar · ‎08-03-2021

Glad to help.

If my response helped you please mark it correct to close the question so that it benefits future readers as well.

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader