Custom Widgets: Display an Image


#1

Hi,

Me again. New question… :grinning:

I’m building a custom widget. The lack of documentation is a challenge, but I’m making some progress. It runs, and displays record data - so far, so good.

But, I would like to display an image in the widget. The image is housed in a data record in a field of type Image. If I put it in a standard Information Widget it displays quite nicely. In the custom widget, no such luck.

I have this code (main.js) retrieving all of the fields from the data record I want to display:

return{
	//
	// fetch the data and prepare the variables for the template
	//
	get_template_data: function()
		{// get_template_data
			mats.log('*** get_template_data called()')

			//
			// let's get the employee record associated with the widget
				mats.log('Base record id = ' + widget.get_base_record_id());
				var er = mats.record(widget.get_base_record_id());
				var ed = er.get([':id', 'FRED_fld_compliance_pct', 'FRED_fld_compliance_status', 'FRED_fld_email', 'FRED_fld_headshot', 
								 'FRED_fld_name', 'FRED_fld_phone']);

			mats.log('Photo = ' + typeof ed.FRED_fld_headshot + ' value = ' + ed.FRED_fld_headshot);
			mats.log('Name  = ' + ed.FRED_fld_name);
			return	{// return properties that will be used by the widget
						emp_email	: ed.FRED_fld_email,
						emp_photo	: ed.FRED_fld_headshot,
						emp_name	: ed.FRED_fld_name,
						emp_phone	: ed.FRED_fld_phone,
						emp_pct		: ed.FRED_fld_compliance_pct,
						emp_status	: ed.FRED_fld_compliance_status
					}// return properties that will be used by the widget
		}// get_template)data
}    indent preformatted text by 4 spaces

All of the data is returned correctly, except for the image: ‘FRED_fld_headshot’.

The logfile shows the “typeof” the image is a number with a value of 5. Not quite what I’m after. What do I need to do to get a value I can hand to Vue to display the image? It should plug into this HTML:

<img v-bind:src= “{{ emp_photo }}” />

where emp_photo is the property to which the image value is assigned.

Thanks as always,

Randy Oswald


#2

Hi Randy

You’re very close already. Just add one line, so:

var er = mats.record(widget.get_base_record_id());
var ed = er.get([
   ':id', 
   'FRED_fld_compliance_pct', 
   'FRED_fld_compliance_status', 
   'FRED_fld_email', 
   'FRED_fld_headshot', 
   'FRED_fld_name', 
   'FRED_fld_phone'
]);
let image_url = mats.record_field_file_url(ed.FRED_fld_headshot);

and now pass image_url to the template in the same way as your other template data.
The ID (5) that you see is an internal record file ID, and record_field_file_url will swap it out for something useful.


Mark


#3

Works a treat, thanks!