# Implementation

## Download

1. Download a sample application file from 👉 [sync-ap](https://drive.google.com/file/d/1fB2jqXFz9d_cRSgt7HTFSL0O4sz0aJt7/view?usp=sharing)[p.zip](https://drive.google.com/file/d/1fB2jqXFz9d_cRSgt7HTFSL0O4sz0aJt7/view?usp=sharing).
2. Extract it under your servlet container.
3. Download sample OZR files from 👉 [sync-ozr.zip](https://drive.google.com/file/d/1vgKYDBFlCFJEx2NejkOGoVNy0T981wGB/view?usp=sharing).
4. Extract it under your repository\_files.

## File Description

| File                           | Description                                                  |
| ------------------------------ | ------------------------------------------------------------ |
| js/jquery-3.3.1.min.js         | jQuery file                                                  |
| js/OZServiceHandler.js         | Synchronization service handler                              |
| js/ServiceManager.js           | Synchronization service manager                              |
| js/OZDataChannelManager.js     | Manage data channel between the agent and client             |
| js/ozviewer\_browers.js        | Open ActiveX viewer in the browser                           |
| js/ozviewer\_browers\_html5.js | Open HTML5 viewer in the browser                             |
| js/ozviewer\_browers\_toto.js  | Open HTML5 viewer in the OZ Mobile app                       |
| js/OZCommonParams.js           | OZ viewer parameter definitions for the agent and client     |
| js/ztransferx\_browers.js      | Download ActiveX viewer                                      |
| agent-activex.html             | A sample agent page for the ActiveX viewer                   |
| agent-html.html                | A sample agent page for the HTML5 viewer                     |
| client-activex.html            | A sample client page for the ActiveX viewer                  |
| client-html.html               | A sample client page for the HTML5 viewer                    |
| client-toto.html               | A sample client page for the OZ Mobile App                   |
| toto.manifest.js               | Define the client page to be accessed from the OZ Mobile App |

## Customization

### js/ozviewer\_browers\_html5.js

Change "html5viewer" to your own HTML5 viewer path.

```javascript
OZViewerBrowers.Start_OZViewer = function(ozhandler, ozviewerDiv, param, delimiter,callback) {
    window["SetOZParamters_"+OZViewerBrowers.objOZViewerInfo.id] = function () {
        OZViewerBrowers.AddParams(ozhandler, ozviewerDiv, param, delimiter);
        return true;
    };
    var path = "/html5viewer/";
```

### agent-html.html

Change "html5viewer" to your own HTML5 viewer path.

```javascript
<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>
<script type="text/javascript" src="/html5viewer/pdf_js/web/compatibility.js"></script>
<script type="text/javascript" src="/html5viewer/pdf_js/build/pdf.js"></script>
```

Change OZ server servlet URL and OZR file path. You can add more OZR files.

```javascript
    var commonParam = {
        "connection.servlet": "http://oz.ozeform.io/oz/server",
        "connection.reportname": "edu/sync/card-application.ozr",
        "viewer.childcount": "1", // increase when you add more ozr files below
        "child1.connection.servlet": "http://oz.ozeform.io/oz/server",
        "child1.connection.reportname": "edu/sync/loan-application-jp.ozr",
```

Change the port number "14127" to your Sync Server (EPG) port number.

```javascript
        function handlerInit() {
                var serverAddr = location.protocol + "//" + location.hostname + ":14127";
```

### agent-activex.html

Change OZ server servlet URL and OZR file path. You can add more OZR files.

```javascript
     var commonParam = {
        "connection.servlet": "http://oz.ozeform.io/oz/server",
        "connection.reportname": "edu/sync/card-application.ozr",
        "viewer.childcount": "1", // increase when you add more ozr files below
        "child1.connection.servlet": "http://oz.ozeform.io/oz/server",
        "child1.connection.reportname": "edu/sync/loan-application-jp.ozr",
```

Change Sync Server port number.

```javascript
    function handlerInit() {
        var serverAddr = location.protocol + "//" + location.hostname + ":14127";
```

Change ActiveX viewer download path, port, and the namespace.

```javascript
    function requestInstallOZViewer() { 
        if(IsNeedSha1_ZT())
            Initialize_ZT("ZTransferX", "CLSID:C7C7225A-9476-47AC-B0B0-FF3B79D55E67", "0", "0", "http://oz.ozeform.io/oz/ActiveXviewer/ZTransferX_2,2,6,0_SHA1.cab#version=2,2,6,0", "application/OZTransferX_1029");
        else
            Initialize_ZT("ZTransferX", "CLSID:C7C7225A-9476-47AC-B0B0-FF3B79D55E67", "0", "0", "http://oz.ozeform.io/oz/ActiveXviewer/ZTransferX_2,2,6,0.cab#version=2,2,6,0", "application/OZTransferX_1029");
        Insert_ZT_Param("download.server", "http://oz.ozeform.io/ActiveXviewer");
        Insert_ZT_Param("download.port", "80");
        Insert_ZT_Param("download.instruction", "ozrviewer.idf");
        Insert_ZT_Param("install.base", "<PROGRAMS>/Forcs");
        Insert_ZT_Param("install.namespace", "OZSyncViewer");
```

### client-html.html

Change all occurrences of "oz/HTML5viewer" to your own HTML5 viewer path.

```javascript
<link rel='stylesheet' href='/oz/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>
<script type="text/javascript" src="/html5viewer/pdf_js/web/compatibility.js"></script>
<script type="text/javascript" src="/html5viewer/pdf_js/build/pdf.js"></script>
```

Change Sync Server port number.

```javascript
    function handlerInit() {
        var serverAddr = location.protocol + "//" + location.hostname + ":14127";
```

### client-activex.html

Change Sync Server port number.

```javascript
    function handlerInit() {
        var serverAddr = location.protocol + "//" + location.hostname + ":14127";
```

Change ActiveX viewer download path, port, and the namespace.

```javascript
    function requestInstallOZViewer() { 
        if(IsNeedSha1_ZT())
            Initialize_ZT("ZTransferX", "CLSID:C7C7225A-9476-47AC-B0B0-FF3B79D55E67", "0", "0", "http://oz.ozeform.io/oz/ActiveXviewer/ZTransferX_2,2,6,0_SHA1.cab#version=2,2,6,0", "application/OZTransferX_1029");
        else
            Initialize_ZT("ZTransferX", "CLSID:C7C7225A-9476-47AC-B0B0-FF3B79D55E67", "0", "0", "http://oz.ozeform.io/oz/ActiveXviewer/ZTransferX_2,2,6,0.cab#version=2,2,6,0", "application/OZTransferX_1029");
        Insert_ZT_Param("download.server", "http://oz.ozeform.io/ActiveXviewer");
        Insert_ZT_Param("download.port", "80");
        Insert_ZT_Param("download.instruction", "ozrviewer.idf");
        Insert_ZT_Param("install.base", "<PROGRAMS>/Forcs");
        Insert_ZT_Param("install.namespace", "OZSyncViewer");
```

### client-toto.html

Change Sync Server port number.

```javascript
    function handlerInit() {
        var serverAddr = location.protocol + "//" + location.hostname + ":14127";
```

### toto.manifest.js

If you want to change the name of **`client-toto.html`**, make sure to change the file name in **`toto.manifest.html`** to the same one.

```markup
{
    "home" : {
        "online" : "client-toto.html",
        "offline" : null
    },
    "navigator" : {
        "visible" : true
    }
}
```


---

# 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/server-developer/sync-server/implementation.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.