Utilizing Image Fields in UI Pages

[eric_szonyi]

I'm not sure how often you come across this or utilize Image Fields outside of a form but I needed to recently.

When you add an Image Field to a form you are provided with an Add dialog first time and later you can Update or Delete the image. When you display the form, the image will display next to the field label.

But, what if you need to display the image in a UI page or somewhere else ?

Unlike the Images module, Image Fields do not store the images in the db_image table. These images are stored in the sys_attachment table. The sample code below can be utilized to grab the image name for the correct record. We will use the photo field from the user record as an example:

//declare a variable to hold the image name
var imageName = '';
//get the record for the attachment table
var a = new GlideRecord('sys_attachment');
a.addQuery('table_name','ZZ_YYsys_user'); //the ZZ_YY is the prefix we use
a.addQuery('file_name','photo'); //this is really the name of the image field
if (a.get('table_sys_id',gs.getUserID())) { //this is the sys_id of the actual record in our table which has the Image Field
       imageName = a.sys_id + '.iix'; //this is the extension we append for the image itself
}
imageName;

The full sample UI page would look as follows:

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


<g:evaluate var="jvar_user_photo_path" jelly="true">
//declare a variable to hold the image name
var imageName = '';
//get the record for the attachment table
var a = new GlideRecord('sys_attachment');
a.addQuery('table_name','ZZ_YYsys_user'); //the ZZ_YY is the prefix we use
a.addQuery('file_name','photo'); //this is really the name of the image field
if (a.get('table_sys_id',gs.getUserID())) { //this is the sys_id of the actual record in our table which has the Image Field
       imageName = a.sys_id + '.iix'; //this is the extension we append for the image itself
}
imageName;
</g:evaluate>


<div>
<img src="${jvar_user_photo_path}"></img>
</div>


</j:jelly>

Hope this helps !