Would you like to have a Document Viewer embedded right into your Dynaforms? Part 2
By Arturo Robles | March 15, 2011 | DynaForm, ProcessMaker
So, last week I showed you how to convert a PDF or TIFF file document into a SWF file right inside ProcessMaker, now we’ll cover:
Displaying the SWF file document into an embedded Flash File Viewer within a Dynaform.
In order to achieve this, we’re going to install Zviewer’s components into our ProcessMaker directory and then create a sample Dynaform with 1 subtitle field, 1 hidden field, and title field for the Flash File Viewer itself and 2 JavaScript fields: the first one will call the @@flashFile variable’s stored path for the SWF file and will load that file into the Zviewer Flash File Viewer through an included JavaScript script file; the second one will embed the Zviewer Flash File Viewer into a Dynaform’s field for displaying.
Step 1. Installing Zviewer:
First, we need to download Zviewer from http://swfviewer.blogspot.com and uncompress the downloaded .zip file into a working directory.
Create the directory /opt/processmaker/workflow/public_html/WemagOnlineDocumentViewer/swfobject and copy here the files expressInstall.swf and swfobject.js from the Zviewer working directory.
Create the directory /opt/processmaker/workflow/public_html/WemagOnlineDocumentViewer/pdf2swf/swfs and copy here the zviewer.swf file from the Zviewer working directory.
Create a symbolic link in /opt/processmaker/gulliver/js to the file swfobject.js by issuing the following command:
ln -s /opt/processmaker/workflow/public_html/WemagOnlineDocumentViewer/swfobject/swfobject.js swfobject.js
Create a symbolic link in /opt/processmaker/gulliver to the WemagOnlineDocumentViewer directory by issuing the following command:
ln -s /opt/processmaker/workflow/public_html/WemagOnlineDocumentViewer WemagOnlineDocumentViewer
Step 2. Adding the Zviewer Flash File Viewer to a Dynaform:
In order to do this, we have to add the following fields to either a new Dynaform or an existing one. If you’re using an existing Dynaform, you can insert these fields into any part or section of it, just make sure to keep the order in which the fields are placed. The Subtitle field is optional and only for labeling purposes.
Open the new or existing Dynaform for editing, go to the XML tab and paste these fields right into the section of the Dynaform where you want the Flash document file to be displayed:
<subtitle type="subtitle">
<en>Flash File Document</en>
</subtitle>
<loadPDF type="javascript" btn_cancel="Cancel" required="0" readonly="0" savelabel="0"><![CDATA[function loadPDF(file)
{
var flashvars = {
doc_url: file
};
var params = {
menu: "false",
bgcolor: '#efefef',
allowFullScreen: 'true'
};
var attributes = {
id: 'website'
};
swfobject.embedSWF('/WemagOnlineDocumentViewer/pdf2swf/swfs/zviewer.swf',
'website', '100%', '800', '9.0.45',
'/WemagOnlineDocumentViewer/swfobject/expressInstall.swf',
flashvars,
params,
attributes
);
}]]></loadPDF>
<LETTER type="title" enablehtml="1">
<en><![CDATA[<div id="website" style="height: 500px;">
<p class="style1" align="center">You need Flash Player 9 in order to view this document.</p>
<p align="center">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"> </a>
</p>
</div>
]]></en>
</LETTER>
<flashFile type="hidden" defaultvalue="imagen" mode="edit">
</flashFile>
<callflash type="javascript" btn_cancel="Cancel" required="0" readonly="0" savelabel="0"><![CDATA[leimnud.event.add(window, 'load', function()
{
loadPDF(document.getElementById('form[flashFile]').value);
}
);]]></callflash>
After having added the fields to the Dynaform, go to the Preview tab in order to apply the changes to the Dynaform and Save it.
Then, open the Dynaform for editing again, go to the HTML tab, check the “Enable HTML Editing” checkbox and insert the following lines into the “HTML Code” panel at the beginning of the HTML code:
<script src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
After adding the 2 script lines, click on the “Refresh View” button in order to have them inserted into the HTML code for the Dynaform and save it again.
If you need to make changes to the Dynaform’s layout or fields, go to the HTML tab again, click on the “Restore Original HTML” button in order to have the changes loaded. This will cause the removal of the 2 lines of script code from above, so insert them again at the beginning of the HTML code and click on the “Refresh View” and save the Dynaform.
The flashFile hidden field will store the value of the @@flashFile variable which actually stores the path for the SWF File document.
The LETTER title field will display a notice and a link for downloading Adobe’s Flash Player in case the user’s browser doesn’t have it already installed.
The loadPDF JavaScript function will call the SWF file path from the flashFile field and will load it into the Zviewer Flash File Viewer through the included swfobject.js JavaScript function.
Finally, the callflash JavaScript field will actually load and display the Zviewer Flash File Viewer into the Dynaform.
And that’s it.
Congratulations, now you got yourself a brand new embedded document viewer right into your Dynaform which you can use to show off with your friends, girlfriend and boss.
