Adding an image to a form

[eutslerb]

Good Morning,

I have a situation calling for a user to select from one of two images on a form. So far what i have is a check box for each and i have been trying to append an image to that check box element so that there will be a graphical representation above the element. I have tried an on load script using document.getElementByID with no solution so far. I have been reading the forums and found a similar situation with adding an image to a checkbox in a catalog item however this does not work for me in a standard form. I will attach an image that shows what i am looking for in my end vision.

Thank You~
Bryan Eutsler

[harikrish_v]

Hi Bryan,

There is a much simpler way to do it, ServiceNow provides a field type called "Image". You can create 2 fields with this type and add them to the form. then do a form layout split and arrange them side by side to achieve the required look. The image field by default provides option to [Update] and [Delete], if you make the field read only after adding the image, it will hide those options.

I took the liberty and did it in one of the demo instances, PFA the screenshot of the same. If required you can get the element id of the image field labels[Blue Theme Preview and White theme Preview] and hide those, however your customer wants it.

Hope this helped 🙂

Regards,

Harikrishnan Vijayan
[img=180x60]http://analyticsindiamag.com/wp-content/uploads/2013/02/ibm_logo.jpg[/img]
ServiceNow Certified System Admin | ITIL V3 Foundation Certified

[ssb]

Doing it that way means that (for example) every record in the table would have to have the image fields?

Or are you suggesting adding the fields to enable easy display of image content on the form, then not actually letting the user populate the image fields?

_A_nother way to do it would be:
- Add an annotation (text) to the form, place it where you want it
- Place a span in the annotation, e.g.
- Create an onLoad script to update the contents of the span tag with an image (something like):
$('myImage1').update('');

HTH,
Scott

[Adrien7]

Hello everyone, 

I found an easier way to achieve this, let me know if it helps.

To start, go to images and upload the image there, then copy the code as highligthed on the screenshot

Then, go to the form layout you want to add the picture on.

Add an Annotation field as Text HTML and paste the code you copied form the image.

You can edit the code to change the image size

Save and the image will display on your form

Please mark if the solution help you guys

[Daniel50]

Adrien, you're awesome! Really a very cool solution! Thank for that!