Viewer APIs

Learn about Viewer API to control the OZ viewer in the application. Viewer API consists of viewer parameters, functions, and events.

Viewer Integration

Example: Hide toolbar

Key Viewer Functions

sendToActionScript()

Initialize Viewer environments and set viewer feature options.

var oz = document.getElementById("OZViewer");
// required 
oz.sendToActionScript("connection.servlet", "/training/server");
oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer.ozr");
// optional
oz.sendToActionScript("viewer.viewmode", "fittoframe"); // fit form into the frame
oz.sendToActionScript("viewer.showthumbnail", "true"); // show thumbnail pages on the left pane
oz.sendToActionScript("comment.all", "true"); // enable highlighter pen
oz.sendToActionScript("eform.signpad_type", "dialog");  // dialog or direct
oz.sendToActionScript("information.debug", "true"); // show viewer console information on the web
oz.sendToActionScript("viewer.usetoolbar", false); // hide viewer toolbar
oz.sendToActionScript("global.language", "en_US"); // system locale language by default
oz.sendToActionScript("eform.inputeventcommand", "true"); // allow to use viewer events
// import the js file containing global functions
oz.sendToActionScript("viewer.external_functions_path", "ozp://forcs/common/common.js");
// import the OZR containing reusable bands
oz.sendToActionScript("connection.alternativereportname", "forcs/common/common.ozr");

Setting Viewer parameters in OZR (OnStartUp of the ReportTemplate)

• At design time

• When the parameter option values never change

Setting Viewer parameters in HTML (sendToActionScript())

• At runtime

• When parameter option values change by condition (user, device, business rule)

• Settings in OZR take precedence over settings in HTML.

When the same parameter was given in both the OZR and HTML with different values,

the value given in the OZR overrides the one in HTML.

Importing external JS and OZR - Example

For details on Viewer parameters, refer to here.

Script()

Run an OZ viewer toolbar command without parameter values

OZViewer.Script("showthumbnail"); // show page thumnails in the tree view 
OZViewer.Script("prev"); // back to the previous page
OZViewer.Script("next"); // go to the next page

Viewer functions are methods of the Viewer object which is referenced by the div id OZViewer in this example.

ScriptEx()

Run an OZ viewer toolbar command with parameter values

// export and save the form as a PDF file on the client.
OZViewer.ScriptEx("save", "export.applyformat=pdf; pdf.filename=sample.pdf", ";");

GetInformation()

Get various information on the OZR from the viewer such as datasets, parameters, input data, page index, number of pages, etc.

// This code block is used to submit the form to the server
if (OZViewer.GetInformation("INPUT_CHECK_VALIDITY") == 'valid') { // OnCheckValidity event returns 'true'
    var inputdata = OZViewer.GetInformation("INPUT_JSON_ALL"); // Extract all input values in JSON
}

For details on Viewer functions, refer to here.

Key Viewer Events

OZEFormInputEventCommand

• The application can catch input events sent 👈 from the Viewer.

• Set the eform.inputeventcommand option to true.

Example

HTML

// catch all occurrences of the OnValueChanged event
function OZEFormInputEventCommand_OZViewer(docindex, formid, eventname, mainscreen) {
    console.log(docindex + ", " + formid + ", " + eventname + ", " + mainscreen); // do something you want
    if(eventname == "OnKeyReturn") {
        console.log(OZViewer.GetInformation("INPUT_JSON_ALL"));
    }
}

function SetOZParamters_OZViewer(){
    ...
    // enable OZEFormInputEventCommand
    oz.sendToActionScript("eform.inputeventcommand", "true");
    ...
}

Event function names end with the postfix - the div id OZViewer.

OZUserEvent

• The application can catch user-defined events sent 👈 from the Viewer.

Example

OZR

// OnValueChanged of the ComboBox "country"
var obj = This.GetInputComponent("country_other");
if (This.GetInputValue("country") == "Others") {
    // send a UserEvent "Country_Others"
    _TriggerOCXUserEvent("Country_Others","OZR: Selected Others from Country","");
    obj.SetVisible(true);
    obj.SetFocus();
} else {
    obj.SetVisible(false);
} 

HTML

// Catch the UserEvent "Country_Others"
function OZUserEvent_OZViewer(arg0, arg1, arg2) {
   if(arg0 == "Country_Others") {
      alert(arg1);
   }
}

TriggerExternalEvent

• The application can send events 👉 to the Viewer (trigger external events of the OZR).

• Set the eform.inputeventcommand option to true

Example

HTML

// send ExternalEvent to OZR when selecting Month form Birthdate
function OZUserEvent_OZViewer(arg0, arg1, arg2) {
   if(arg0 == "Country_Others") {
      console.log(arg1);
      OZViewer.Document_TriggerExternalEvent("country_other", "Korea", "lightgreen");
   }
}

OZR

// OnExternalEvent of ReportTemplate
if(ozarg_1 == "country_other"){ // catch event from HTML
    GetInputComponent(ozarg_1).SetValue(ozarg_2);
    GetInputComponent(ozarg_1).SetBackgroundColor(ozarg_3);
}

For details on Viewer events, refer to here