Implementation

Download

1. Download a sample application file from 👉 sync-app.zip.

2. Extract it under your servlet container.

3. Download sample OZR files from 👉 sync-ozr.zip.

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.

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.

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

    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.

        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.

     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.

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

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

    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.

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

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

client-activex.html

Change Sync Server port number.

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

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

    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.

    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.

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