Referencing an Image Stored in Caspio Bridge

 

You can create a reference to an image saved in the Files section of Caspio Bridge.  This way you can include images dynamically in HTML Blocks, Headers and Footers, etc.  This article shows you how to add an image to an HTML Block in the details page of a Report.

Image Referenced in an HTML Block to Add Border

Steps to referencing an image saved in the Files section of Caspio Bridge:

1. Enable Advanced Options and Parameters

This solution will require the use of parameters.  Be sure they are enabled for this DataPage.

2. Include the image in the results page

Images stored in the Caspio Bridge Files section are not accessible unless they are already being displayed through Caspio Bridge somewhere in a DataPage.  In other words, the image field must be included in the selected fields of a DataPage, but it doesn’t matter if the image field is included on the results page or details page (it can then be referenced in both).  Once you have included the image in the selected fields, you can hide the image field.  In this example, we will include the image field and display the image in the results page and then use a reference in the details page.

Include the Image in the Results Page

3. Insert an HTML Block

Open the DataPage wizard by clicking the Edit button.  Proceed to the Configure Details Page Fields screen.  Click on the Insert button at the lower right-hand corner of the DataPage Elements panel.  Select the HTML Block option to insert this element.

Inserting an HTML Block

4. Create the image tag

Create the HTML image tag using the sample tag below.  To fill in the data you will have to open the Deploy wizard by pressing the Deploy button and copying some information from the Direct From Caspio deployment method.

<img src="BridgeServer/dpimages.asp?appkey=APPKEY&file=FILENAME"/>

1. The Caspio Bridge Server is the first portion of the Direct from Caspio deploy code.
Bridge Server Location in the Deploy Code

2. The AppKey of your DataPage is the long string of numbers and letters included at the end of the deploy code.

App Key Location in the Deploy Code

3. Now open the DataPage wizard again and proceed to the Configure Details Page Fields Screen.  Select the HTML Block and add the Bridge Server and App Key to the URL.

4. The filename of your image can be inserted using parameters.  Use the HTML block’s Insert button located at the bottom right-hand corner of the HTML panel.  Select your image field from the first dropdown field and choose string from the second dropdown field.  If you do not see an Insert button, it is likely that parameters have not been enabled.

Insert the Filename Parameter in the HTML Block

Make sure that the entire address of your image is in quotation marks.  Once this image reference is created it can be used in other DataPages or even in a regular webpage as well.

Sample Image Tag

Testing and Formatting

You should be able to see your image if you open the DataPage in Caspio Bridge.  You can apply any valid HTML formatting to this image tag.

If you do not see your image, ask yourself:

  • Does the image tag match the example?  Pay close attention to capitalization.
  • Are parameters enabled?
  • Does the Caspio Bridge Server name match the server in my account title bar?
  • Do image file names contain only ASCII characters? Double-byte characters such as Chinese are not supported.