This HowTo describes how to display database blob values as jpg or gif images in ActiveGrid. The following screen shot shows an example of a form showing a jpg image:

Image basics

In HTML, it is not possible to put a binary image inline into a page. Therefore we have to create a standalone action in ActiveGrid (basically a lightweight REST web service), that the page can call when it wants to display an image. The value returned by the ActiveGrid service is the image itself. 

The URL address for a stand-alone action in ActiveGrid follows a specific pattern. Here is an example:

http://localhost:8090/forms_howto?service=forms_howto&operation=getImage&imageName=312-33-1323

This URL has 4 elements:

·        Address of the application: in this case, that is http://localhost:8090/forms_howto

·        Name of the service: usually, this is the same as the application, so service=forms_howto

·        Name of the operation: the name of the operation is getImage

·        Name of input variables: the variable imageName has the primary key of the record holding the blob value we want to display

Displaying a database blob as an image

This shows how to display an image in an ActiveGrid form. The same technique would also work for displaying videos or audio files. The application, image_howto shows an example of this approach. 

2.3.1 note: make sure to change the logging options setting for activegrid.data. dataservice.result to CRITICAL, otherwise the logger will croak trying to print the blob to the logging file.

1.      Create a new standalone bpel action. This action will take in a primary key, look up the record associated with that key, then return an image/blob from that record.

2.      Create action. Right click the canvas in the bpel editor and select Insert Action -> Standalone to bring up the Insert Standalone Action Wizard. Enter Action Name = getImage and press next.

3.      Define an input variable for the primary key of the record you want to look up. Press the plus button to add an Input Message part. Enter Message Part name = socsec and Type = string, then press next, then finish.

4.      Edit the standalone action. In the bpel editor, double click the getImage rectangle to bring up the bpel action editor.

5.      Add a variable to the action to hold the record with the blob to display. Right click the action editor and select Add Variable. Under Variable details, set Name = selectedRecord, Type = testmysql.xsd:manycolumns and press finish.

6.      Set new variable to hold result of database query. Right click the action editor and select Add Set. In the popup window, select Set = selectedRecord and press the Database Query button. Set Query returns = single item. In the Filter area, enter Column = socsec, operator = “=” and Variable = message/socsec. The resulting expression should look like this:

 socsec = ${message/socsec} 

7.      Set the message header to indicate the return value is an image. By default, ActiveGrid will interpret the result of an action as XML. You need to tell ActiveGrid that the resulting type is not XML. Right click the equals icon in the action editor and select Add Set. In the popup window, select Set = message/sys/headers/contentType  and Variable = 'image/gif' (note that you need to include the single quotes).

8.      Set the return value from the standalone action. Right click the equals icon and select Add Set. In the popup window, select Set = getImageResponseMsgVar/image using the reference picker. Set the value to selectedRecord/picture.

9.      Return from the standalone action. Right click the last equals icon and select Add Reply and set the Reply Variable = image.

10.  Call getimage action to display image on a page. Open the page where you want to display an image. Right click on an xform element and select Insert Output Field->Other->Parameterized Image. Using the reference picker, select the row containing the blob attribute, in this case the variable manycolumns. Next, double click the parameterized image xform element to bring up the Layout editor. Set the image URL equal to:

image_howto?service=image_howto&operation=getImage&socsec={socsec} 

This will cause ActiveGrid to invoke the getimage operation with an input parameter of /manycolumns/socsec

Tricks and Tips

·        Standalone actions can be tricky to debug. If the image does not show up where you expect it, right click on the “X” where the image should be to inspect the properties. Copy the url listed in the picture properties and then paste it into a browser to see the error message the ActiveGrid produces when that service is called..