Take a look at this post for the correct setup for making this work with a catalog item. Towards the bottom you’ll find an example.
https://servicenowguru.com/system-ui/ui-macros/add-me-ui-macro-user-group-fields/

My question is how come the icon is placed under the field and not actually beside it.

Kevin, would you be able to share how you accomplished the UI Macro/Formatter combination to add the image?

My end goal is to have a specific choice on a choice list show an image next to it, that is a button that would bring up a GlideWindow creating a new record on another table. The issue is that everything involved is in a scoped app, and the script at the top keeps catching an error.

That’s a really useful tip! We’ve managed to work around the problem using UI Macros and Formatters instead of a client script. I got the image back that I wanted, now I just need to figure out how to make the Jelly code reference the current record.

Cheers,
Kevin

Welcome to the wild world of scoped apps! :) I’ve found out that in general, they’re not all they’re cracked up to be. I try to avoid them wherever possible. For this situation, there is a workaround. Fuji restricts certain client-side script calls but allows you an app-by-app override if you want. To opt out of this setting create the following property in your application scope and set it to false.
glide.script.block.client.globals

Relatively new to scripting in ServiceNow, so hopefully this isn’t a dumb question… We’ve been trying to adapt this method to bring back some images in a scoped application that we’ve created post-Fuji – we’re finding that the code works in the core Incident module as a client script, but that for some reason it doesn’t work in the scoped application. We’re not entirely sure why they should work differently, except that some scripting resources aren’t available in scoped apps. We can’t se a specific reason why your code shouldn’t work in the scoped app.

Any thoughts would be appreciated!
Kevin

Thanks Mark, was reasonably easy in the end.

You can, but that’s really just client-side javascript if you’ve got your macro already in place. You would just need to update the ‘src’ attribute on your image tag. If you’ve created your macro, just make sure your image tag has an ID you can target, then you can use a client script to change the image on change of something else.

I can use macro’s in a wizard and can get the images to hide/show using UI Policies but formatting in the panel screen for 15/20 images to be hidden is not good. So just want to try and use 1 field and populate that field with an image dependent on the previous being selected.

Thanks

I figured it out for the record producer variables.

Change line to:

var field = ‘IO:sysID’; // where sysID is the sysid of the catalog variable which can be found by inspecting the element.
example: var field = ‘IO:7ba2f43d49ac8d00502a8447d8a49ab0’;

and remove the line:

field = g_form.tableName + ‘.’ + field;