# Viewer In HTML

## Viewer Types

<table><thead><tr><th width="150">Category</th><th width="150">Type</th><th width="428.6690647482014">Description</th></tr></thead><tbody><tr><td>Desktop</td><td>ActiveX</td><td>The viewer for IE browser. Downloaded and updated on the client automatically.</td></tr><tr><td>Desktop or Mobile</td><td><strong>HTML5JS</strong> (Canvas)</td><td><p>Downloaded in the Temporary Internet Files folder on the client.</p><p>eForm is rendered by the client.</p><p>For details refer to <a href="https://forcs.gitbook.io/tech-guide/tech-guide/html5-viewer/types-of-html5-viewers">HTML5 Viewer Types</a></p></td></tr><tr><td></td><td>HTML5SVG</td><td><p>Downloaded in the Temporary Internet Files folder on the client.</p><p>eForm is rendered at the server-side by OZ Server and OZ Scheduler.</p><p>For details refer to <a href="https://forcs.gitbook.io/tech-guide/tech-guide/html5-viewer/types-of-html5-viewers">HTML5 Viewer Types</a></p></td></tr><tr><td>Mobile</td><td>Android</td><td>Viewer library to be embedded in the Android project</td></tr><tr><td></td><td>iOS</td><td>Viewer library to be embedded in the Xcode project</td></tr><tr><td></td><td>UWP</td><td>Viewer library to be embedded in the Visual Studio, C#, C++ project</td></tr></tbody></table>

## 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.

```javascript
<!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.&#x20;

```javascript
<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()**.

```javascript
<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>
```

{% hint style="warning" %}
Make sure to use the div id <mark style="color:red;">**OZViewer**</mark> as below. They must be the same.
{% endhint %}

<div align="left"><img src="/files/-MjDMNxXYdkmprb03F81" alt=""></div>

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

[*`http://localhost:8080/training/forcs/john.kim/customer.html`*](http://localhost:8080/training/forcs/john.kim/customer.html)

## Using PDF

{% hint style="warning" %}
If you imported PDF documents or attached PDF files to the report, add code lines below.
{% endhint %}

```javascript
<!-- 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](http://oz.ozeform.io/oz/edu/eformdev/customer-pdf.html)

## Mobile UX

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

```javascript
<!-- 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.

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

[Example](http://oz.ozeform.io/oz/edu/eformdev/customer-mobileux.html)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://edu.ozeform.io/e-form-developer/day-3/viewer-in-html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
