How to add images to catalog item check box variables.

[Balaram1]

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 · Accepted solution]

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

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

Regards
Ankur