# Viewer APIs

## Viewer Integration

#### Example: [**Hide toolbar** ](<http://oz.ozeform.io/oz/edu/eformdev/customer-notoolbar.html >)

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

## Key Viewer Functions

### **sendToActionScript()**

Initialize Viewer environments and set viewer feature options.

```javascript
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 <mark style="color:red;">design time</mark>
* When the parameter option values never change

**Setting Viewer parameters in HTML (sendToActionScript())**

* At <mark style="color:red;">runtime</mark>
* When parameter option values change by condition (user, device, business rule)
* Settings in OZR take precedence over settings in HTML.

{% hint style="warning" %}
When the same parameter was given in both the OZR and HTML with different values,

<mark style="color:red;">the value given in the OZR overrides the one in HTML</mark>.
{% endhint %}

**Importing external JS and OZR** - [Example](http://oz.ozeform.io/oz/edu/eformdev/customer-import.html)

{% hint style="info" %}
For details on Viewer parameters, refer to [here](https://www.forcs.com/en/documentation-rv_dev/index.html?rv_parameter.htm).
{% endhint %}

### **Script()**

Run an <mark style="color:red;">OZ viewer toolbar command</mark> without parameter values

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

{% hint style="warning" %}
Viewer functions are methods of the Viewer object which is referenced by the **div** id <mark style="color:red;">**OZViewer**</mark> in this example.
{% endhint %}

### **ScriptEx()**&#x20;

Run an <mark style="color:red;">OZ viewer toolbar command</mark> with parameter values

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

### **GetInformation()**&#x20;

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

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

{% hint style="info" %}
For details on Viewer functions, refer to [here](https://www.forcs.com/en/documentation-rv_dev/index.html?rv_method.htm).
{% endhint %}

## Key Viewer Events

### OZEFormInputEventCommand

* The application can catch input events sent 👈 from the Viewer.
* Set the **eform.inputeventcommand** option to true.

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

{% code title="HTML" %}

```javascript
// 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");
    ...
}
```

{% endcode %}

{% hint style="warning" %}
Event function names end with the postfix - the **div** id <mark style="color:red;">**OZViewer**</mark>.
{% endhint %}

### OZUserEvent

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

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

{% code title="OZR" %}

```javascript
// 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);
} 
```

{% endcode %}

{% code title="HTML" %}

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

{% endcode %}

### TriggerExternalEvent

* The application can send events 👉 to the Viewer (trigger external events of the OZR).
* Set the **eform.inputeventcommand** option to true

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

{% code title="HTML" %}

```javascript
// 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");
   }
}
```

{% endcode %}

{% code title="OZR" %}

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

{% endcode %}

{% hint style="info" %}
For details on Viewer events, refer to [here](https://www.forcs.com/en/documentation-rv_dev/index.html?rv_event.htm)
{% endhint %}


---

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