Viewer In HTML

Learn how to integrate the OZ viewer in the application and open e-Form.

Viewer Types

Embedding HTML5JS Viewer in Your HTML

1. Create a file customer.html under webapps/training/company_id/user_id/.

2. Import js and CSS files needed for the HTML5JS Viewer.

<!DOCTYPE html>
<html style="height:100%">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- HTML5 Viewer references-->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" type="text/css"/>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/html5viewer/ui.dynatree.css" type="text/css"/>
<script type="text/javascript" src="/html5viewer/jquery.dynatree.js" charset="utf-8"></script>
<script type="text/javascript" src="/html5viewer/OZJSViewer.js" charset="utf-8"></script>
</head>

3. Declare an OZ Viewer object using the <div> tag.

<body style="width:98%;height:94%">
<h4 style="text-align: center;">OZ e-Form in HTML page</h4>
<!-- Divison for OZ Viewer -->
<div id="OZViewer" style="width:98%;height:98%"></div>

4. Set parameters for server connection and OZR file location with SetOZParamters_OZViewer().

5. Sart the viewer with start_ozjs().

<script type="text/javascript" >
var url = "http://" + location.host;
function SetOZParamters_OZViewer(){ // prepare viewer parameters
    // get the object from the "OZViewer" <div>
    var oz = document.getElementById("OZViewer");
    // oz server url(path)
    oz.sendToActionScript("connection.servlet", url + "/training/server");
    // eform file path (relative to the repository server)
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer.ozr");
    return true;
}
start_ozjs("OZViewer", url + "/html5viewer/"); // run HTML5 JS viewer
</script>
</body>
</html>

Make sure to use the div id OZViewer as below. They must be the same.

6. Save the file and open it with a browser.

http://localhost:8080/training/forcs/john.kim/customer.html

Using PDF

If you imported PDF documents or attached PDF files to the report, add code lines below.

<!-- When using a PDF document or attaching a PDF file to a report, load files below.-->
<script type="text/javascript" src="/html5viewer/pdf_js/web/compatibility.js" charset="utf-8"></script>
<script type="text/javascript" src="/html5viewer/pdf_js/build/pdf.js" charset="utf-8"></script>

Example

Mobile UX

For mobile devices, you can use jQuery mobile. Just add references below.

<!-- for Mobile UX -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"/>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<link rel="stylesheet" href="/html5viewer/ui.dynatree.css" type="text/css"/>
<script type="text/javascript" src="/html5viewer/jquery.dynatree.js" charset="utf-8"></script>
<script src="/html5viewer/jquery.mouseSwipe.js" type="text/javascript"></script>

And the function start_ozjs() must be called with the 3rd argument.

start_ozjs("OZViewer","/html5viewer/", true); // true for mobile

Example

PreviousServer Deployment NextViewer APIs

Last updated 9 months ago

Was this helpful?