question Re: How to display a field of type Image on a widget? in ITSM forum

How to display a field of type Image on a widget?

Jordan Dehneh — Wed, 18 Aug 2021 08:53:18 GMT

Hello,

I have a field of type 'Image' which can take an image. I want to display this image on a widget I have. I tried showing it on the widget but it gives me a sys_id instead. How can I show it ?

Thanks

Re: How to display a field of type Image on a widget?

Ujjawal Vishnoi — Wed, 18 Aug 2021 08:57:37 GMT

Hi,

Please refer the below link.

https://community.servicenow.com/community?id=community_question&sys_id=d9c603a5db1cdbc01dcaf3231f9619bf

Hope it helps.

Regards,

Ujjawal

Re: How to display a field of type Image on a widget?

Anil Lande — Wed, 18 Aug 2021 09:03:41 GMT

Hi,

If you have a image field on record then follow below steps:

In server side script where you have written glideRecord to get image use below logic:

data.picture = grRec.u_image;

and to display image in use below login in Widget HTML script:

<img ng-src="{{::data.picture}}"/>

Thanks,
Anil Lande

Re: How to display a field of type Image on a widget?

Jordan Dehneh — Wed, 18 Aug 2021 09:06:20 GMT

Hello Ujjawal,

I am trying to implement a list in the service portal. This list contains the list of all articles of category News. I want to show an image for each article. So in the list there will be rows and each row has an image. But when I display it, it gives me just the sys id even though the field Thumbnail has the image inserted/uploaded.

Thanks

Re: How to display a field of type Image on a widget?

Ujjawal Vishnoi — Wed, 18 Aug 2021 09:06:52 GMT

Also, You can take reference from below widget.

https://instanceName.service-now.com/sp_config?id=widget_editor&sys_id=6e6ac664d710120023c84f80de610318

They are using below code

 <div class="sub-avatar mia" ng-style="avatarPicture">

and ng-style is being set in client script using below code.

$scope.avatarPicture = {
				'background-image': "url('" + response.sys_id + ".iix')",
				'color': 'transparent'
			};

Hope it helps.

Regards,

Ujjawal

Re: How to display a field of type Image on a widget?

Anil Lande — Wed, 18 Aug 2021 09:21:12 GMT

Hi Jordan,

You can take a help of OOB widget 'SC Category Page'.

This widget has a logic to get All items details and display as list/card. You can implement same logic to display data and images as per your requirement.

Thanks,
Anil Lande

Re: How to display a field of type Image on a widget?

Jordan Dehneh — Wed, 18 Aug 2021 09:22:04 GMT

Thank you Anil. I have implemented the same solution you suggested but it shows an empty braces brackets in the src field. If I also did data.picture = grRec.getValue(u_image); it will show a sys_id instead. What do you suggest?

Re: How to display a field of type Image on a widget?

Anil Lande — Wed, 18 Aug 2021 09:29:55 GMT

Not sure if it is typo in community reply, but your need to correct below line

data.picture = grRec.getValue(u_image);

it should be:

data.picture = grRec.getValue('u_image');

Thanks,

Anil Lande

Re: How to display a field of type Image on a widget?

Jordan Dehneh — Wed, 18 Aug 2021 10:18:02 GMT

Hello Anil,

No worries, I got it solved now. it should be

and in server script:

data.picture = grRec.getValue('u_image');

Thank you for the help Anil 🙂