# e-Form Scripting Guide

## Overview

* **Components raise various events** **at runtime** according to their component type and processing steps.
* **Write scripts in events**.
* When an event is raised at runtime, the **event script is executed**.
* **e-Form API methods** are used in the event script to **control appearances and behaviors at runtime.**

## Events

**Report event** ( Rendering components / Binding data )

* Events that are raised during the process of opening e-Form - starting and initializing the e-Form template, rendering components, and binding component with data, 
* OnStartUp, OnInitialize, OnStartBind, OnBind, OnEndBind, etc.

**e-Form event** ( Value change / User action )

* Events that are raised when the user has changed the value of the input components or has done some action on the input components.
* OnClick, OnValueChanged, OnFocus, OnCheckValidity, etc. 

**Key events by component**

![](/files/-MjDMU2dWCnVZsa0JUDj)

<table><thead><tr><th width="223.66811170034237">Event</th><th width="512.4313183815373">Description</th></tr></thead><tbody><tr><td>OnStartUp</td><td>Put viewer parameters to control component properties</td></tr><tr><td>OnInitialize</td><td>Component created</td></tr><tr><td>OnStartBind</td><td>Binding began</td></tr><tr><td>OnBind</td><td>Get data, bind it to component, set properties</td></tr><tr><td>OnEndBind</td><td>Get the page number, Get the component value.</td></tr><tr><td>OnFocus</td><td>Get focus</td></tr><tr><td>OnValueChanged</td><td>Data input or change</td></tr><tr><td>OnKillFocus</td><td>Loose focus</td></tr><tr><td>Functions</td><td>Contain global functions</td></tr><tr><td>OnCheckValidity</td><td>Form input validtion logic</td></tr></tbody></table>

## Writing Script

#### Editor settings **(Options dialog > Editor)**

* Use help tooltip
* Tab size

#### Writing scripts in JavaScript Editor

* Select a Component and Event

## Component Identifier

Name and FormID must be unique.

#### Name

* The default name consists of a component type and serial number.
* Cannot contain the dot(.) character.

#### FormID

* Used for some Input features (ex: make Lable work as Textbox)
* Required for DialogueFlow
* Allow dot(".") characters to represent array items (parent and child)
* Take precedence over Name.

## Referencing Component Object

### **Current component - This**

* The reserved word **This** references the current component object.
* When typing in "This.", available functions for the chosen event are listed.

![](/files/-MjDMU2fllXumpGZ5unT)

{% hint style="info" %}
The <**F1**> key opens the manual page for the current function.
{% endhint %}

### **Other components -This.GetComponentByName()**

Get the object of other components by its Name.

```javascript
// OnInitialize of the Dummy band containing a label
var obj = This.GetComponentByName("label");
obj.SetBackgroundColor("lightgreen"); 
```

### **Other input components - This.GetInputComponent()**

Get the object of other Input components by FormID or Name (FormID takes precedence)

```javascript
// OnClick of a Button 
var obj = This.GetInputComponent("button");
obj.SetVisible(false); 
```

## Methods

### Global Methods

* Not specific to any event and can be used globally
* Start with an underscore('\_').

**Frequently used methods for debug:**

* \_MessageBox
* \_TraceLn

### Component Methods

* Control property or data

**Frequently used methods:**

* GetComponentByName
* GetInputComponent&#x20;
* GetText&#x20;
* SetText&#x20;
* GetInputValue&#x20;
* SetInputValue&#x20;
* SetChecked&#x20;
* IsChecked&#x20;
* SetEnable&#x20;
* SetVisible&#x20;
* GetDatasetValue

## Viewer Parameters

* Viewer parameters control e-Form rendering options or viewer features.
* Viewer parameters can be set both in the e-Form or from the application (HTML)
  * Set the default or invariable parameter values in the e-Form
  * Variable parameter values can be set from the application (HTML).
* Use **SetReportOption()** in **OnStartUp** event of the ReportTemplate component.&#x20;

```javascript
// OnStartUp event of the ReportTemplate
This.SetReportOption("viewer.viewmode", "fittoframe"); // fit form into frame
This.SetReportOption("viewer.pagedisplay", "continuous"); // allow scroll down
This.SetReportOption("viewer.showthumbnail", "true"); // show thumbnail pages on the left pane
This.SetReportOption("eform.signpad_type", "dialog");  // dialog or direct
This.SetReportOption("comment.all", "true"); // enable highlighter pen
This.SetReportOption("information.debug", "true"); // show viewer console information on the web
This.SetReportOption("connection.alternativereportname", "forcs/common/company-header.ozr"); // path to the ozr file to be imported
```

## Review and Edit Whole Scripts

1. Right-click the ReportTemplate.
2. Choose **Preview Script**.

## Debugging

#### Opening Viewer Console

1. Point anywhere on your e-Form opened by previewing or by the application.
2. Hit the shortcut key <**Ctrl+Shift+Z**>.&#x20;

#### Information provided

<table><thead><tr><th width="150">Tab</th><th width="564.2615557389079">Description</th></tr></thead><tbody><tr><td>Information</td><td>General information such as product versions</td></tr><tr><td>Debug</td><td>Debugging information such as Viewer execution environments and tracing log messages by <strong>_TraceLn()</strong> function.</td></tr><tr><td>Error</td><td>Errors occurred while running the e-Form.</td></tr><tr><td>All</td><td>Above all information is merged in the tab</td></tr></tbody></table>

{% hint style="info" %}
For details on e-Form API, refer [here](https://www.forcs.com/en/documentation-designer/index.html?script_api.htm) or help manual by hitting the \<h1> key.
{% 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-2/eform-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.