You could embed a variety of documents in your details pages similar to the way you can embed an image. With this method you can embed the following file types at this time:

  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)

This method requires the files to be outside of the database. If your files are not sensitive in nature, you can utilize Caspio’s High Usage FileStor to have your uploaded files automatically moved to a web space.

In this example we setup a table with two Text-255 fields, one for the link to the file and the other for its description.

Tech_tip_embed_documents_in_DataPages_1

  1. On the sidebar menu, click DataPages tab, and click New DataPage.
  2.  Select Reports on the left menu and click Details.

Tech_tip_embed_documents_in_DataPages_2

3.  On the DataPage DataSource screen, select the table you have just created as the data source. Go next and enable search form and set up your search any way you want.

4.  On the Configure Search Fields screen, the Description field has been changed to a listbox. See the image below for reference on how this field has been configured:

Tech_tip_embed_documents_in_DataPages_4

5.  And finally we get to the details page where we embed our PDF files. Here we insert an HTML block and paste the code below into the HTML block. This code uses Google Doc Viewer. The only modification necessary is the field name. Change the highlighted filename “Attachment” to whatever your field name that contains the URLs is called. You could also change the height and width of your embedded viewer.

<iframe src="https://docs.google.com/gview?url=[@field:Attachment]&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Tech_tip_embed_documents_in_DataPages_5

6.  Now deploy your DataPage on your website. It should appear like this.