This document describes how to add dynamic images to e-point. This is a simple combination of a couple of standard techniques and can be achieved in minutes.
Images can be used to jazz up those rather flat e-point screens. The screen shot below from a recent demo for estate agents.
The XML for adding an image to the screen in e-point is
<img
src=”images/mypicture.jpg”></img>
where you have added a jpeg picture (mypicture.jpg ), in your images directory. Any web browser will support .jpg and .gif images (at least). Photographs are best stored as jpegs and gifs are best for icons and any type of drawings. Gifs can also be animated, imagine changing a boring choice of setting a lead as hot or cold to an animated roaring fire or shivering polar bear (maybe not!).
The next problem is constructing the XML for an image in e-point. There are three basic approaches. The most simple approach is to put the XML in a prompt. That works and is a good basic way to check the layout etc.
The other two approaches are used for dynamic images where the image is based on the contents of the database. The core method is the standard MERGECODE command.
If you enter a database record containing the correct XML, i.e.
Property.image = <img
src=”images/mypicture.jpg”></img>
Then you can display the image in e-point using
<MERGECODE VARIABLE=”Property”
FIELD=”Image”/>
in a standard prompt.
The alternative is to store the name of the image in the database and then construct the XML in POP.
This means the database holds just the image name, i.e.
Property.image = images/mypicture.jpg
The propery demo used EvaluateCodeBlock to build the image using the following code block
@(ImageName)
{begin
local
myXML="<img src='" + ImageName + "'></img>";
return
(myXML);
end}
The image name from the database was passed as a parameter and the destination was a variable svImageName so the image was displayed using
<MERGECODE
VARIABLE=”svImageName”/>
NOTE: Construct the image in a node before the display node to avoid the post processing problem.
ANOTHER NOTE: You can also use this method to convert text fields into pictures, for example, to show an image for the Contact Type. Just create images with the same names as your Contact Types
Prospect images/ContactType/Prospect.gif
Customer images/ContactType/Customer.gif
Etc
Now change the code block to build the appropriate names passing the Contact Type as a parameter
@(ContactType)
{begin
local
myXML="<img src='images/ContactType/" + ContactType +
".gif'></img>";
return
(myXML);
end}
|