Display images in List (WCD and Working Preview Mode)

[compuaid]

Is it possible to display images in a List control of a UX component in the working preview or WCD mode? I'm filling the list with filenames based on a custom Xbasic function and setting the field type to raw. In the List field layout I've created a freeform layout and placed the <filename> tag inside an <img src={filename}> tag which works when I run under Live Preview or via WAS but not in WCD. I've modified the code in my Xbasic function to fill the list with relative path names when running under WAS or in Live Preview but with an absolute file path when running under WCD and working preview so my paths look like:

photos\photoname1.jpg under WAS and
C:\Users\Brad\Documents\Photos\photoname.jpg when in WCD or Working Preview.

Any thoughts?

[compuaid]

Re: Display images in List (WCD and Working Preview Mode)

Okay, here's how I got around this. Assuming you're using Windows 7 or later you can create a symbolic link to the photos directory under your A5webroot as well as your A5webroot\projectname and A5webroot\LivePreview directories. This way no matter where you're running the component you'll have access to the photos directory under the current root. Now when using a WCD you can refer to the physical path of the symbolic link directory under A5Webroot\projectname i.e. C:\A5Webroot\PVA\photos and you'll be displaying photos from the correct location. To change the physical location you just do a RMDIR photos and then recreate the link. To refer to the same location running under WAS or LivePreview just use the relative path Photos\filename.jpg.

IMPORTANT!!!! When creating the symbolic link always use the /D to make it a directory. Ex: mklink photos C:\Users\Documents\Myphotos /D

DOUBLY IMPORTANT!!!! If you decide to remove the link DO NOT simply delete it or you will actually delete all your photos. Instead from the command prompt use the RMDIR command i.e. RMDIR PHOTOS. This will delete the symbolic link but leave your photos in tact in their original directory.

Here's another cool thing about symbolic links - they can refer to UNC shares on other systems so the Photos directory could actually be linked as:

mklink photos \\OTHERCOMPUTER\SHARENAME\Photos /D

[compuaid]

Re: Display images in List (WCD and Working Preview Mode)

*THIS ONLY WORKS FOR ALPHA ANYWHERE BUILD 1548 OR LATER due to a bug that was discovered and fixed with Lists based on a single field. If you have an earlier version there is a work around or you can request the latest Pre-Release build from Alpha.

Okay, here's how to display photos in a list control from a directory regardless of the environment the UX component is running under. This will allow you to display photos using the equivalent of Image File Reference fields without having to actually store the filenames in a table. It looks up the filenames from the directory and then depending on whether your component is being run using WAS, LivePreview or as a WCD running on the desktop, populates the list control with the correct path and file names. This assumes you have a table called Settings that has a field called Photo_Directory that contains the physical path to your photos. I've found that it is best to use the method described in the previous post to setup a symbolic link under your A5WEBROOT\project directory and then refer to that directory in your Settings table to be sure that your application has permission to see the photos. Also, in your AutoExec using Xbasic DIM a global variable called InDesktop and set it to .T. We'll check for its existence in the Xbasic function to determine whether we are running in Desktop mode or using the WAS environment.

First, add your list control then under List Properties on the Data Source tab set the source to Custom.

Check the Define Xbasic in Control under the Advanced section and then add the following function by clicking on the ... next to the Xbasic code:

function getphotos as c (e as p)
	DIM files AS c ' Used to store the filenames in our directory
	Dim newfiles as c ' Used to prepend the correct physical or relative path
	Dim photodirectory as c ' Used to store the physical location of our photos directory

	'Retrieve the directory where the photos are located from the SQL Settings table
	'This assumes that a table is setup on the SQL server called Settings that has
	'a field called Photos_Directory and that a named AlphaDAO connection call ARPRO_SQL
	'points to this database.
	photodirectory = sql_lookup("::NAME::ARPRO_SQL","Settings","UID=1","Photos_Directory")

	' Test for runtime environment and use the data submitted if available
	' The following code is inserted only so that a default value will provide
	' a list of files to the list builder in design time.  By checking for the
	' e.datasubmitted collection we can determine if this function was called
	' during runtime or by the Alpha List Builder design component.
	if eval_valid("e.datasubmitted.map_no") then
		'Runtime mode so use the actual map n
		if len(alltrim(e.datasubmitted.map_no))>0 then
			'Set our filename search to the map_no field and append an *
			'so we can retrieve all photos in the sequence that start
			'with the specified map_no.
			curmap = alltrim(e.datasubmitted.map_no)+"*.jpg"
		else 
			curmap = "Nomapfound" ' Set to a bogus filename to return nothing and clear the list 		
		end if
	else
	' Otherwise use a valid default filename sequence to use with the the list builder designer
		curmap = "001-40-00*.jpg"
	end if
	
	' Retrieve list of matching files from our directory assigned above
	' Only the filenames are retrieved.  No path as we'll add the appropriate path
	' below depending on our runtime environment
	files = filefind.get(PhotoDirectory+curmap,FILE_FIND_NORMAL,"N")


	' Now determine whether to use the full file path or the relative web
	' path based on whether we're running on a WAS server or as a WCD component

	if eval_valid("IsDesktop") then ' Check to see if global variable exists (only in desktop)
		' Running in WCD so prepend complete physical file path
		' In order to work with a shared directory setup a symbolic linked directory
		' under the A5webroot\projectname directory:
		'      mklink photos \\servername\sharename /D
		' Then reference that directory in the Settings table
		newfiles = *for_each(currfile, photodirectory + currfile,files)
	else
		'Running on WAS server or in live preview so prepend relative path
		newfiles = *for_each(currFile, "photos\\"+currFile,files)
	end if

	' Assign our list including a field header Filenames of type C to our function return value
	getphotos = "Filenames=C"+crlf()+newfiles
end function

In the list component Click on the Fields tab set the Filename control type to RAW DATA. Now click on the List Layout tab and add the following to the Template:

<img src="{filenames}" height="200px"> (Of course you can modify the attributes such as height, width, etc to your liking)

Save your list and you should now see your photos.