OZ e-Form Developer
  • OZ e-Form Concepts
  • 🌈e-Form DEVELOPER
    • Day 1: Welcome On Board
      • About Course
      • Preparations
      • OZ e-Form Overview
    • Day 2: e-Form Design
      • Designer Environments
      • e-Form Layout Structure
      • e-Form Components
      • e-Form From Documents
      • Preview / Export / Save
      • Hands-on Practice
    • Day 3: Dynamic e-Form
      • e-Form Scripting Guide
      • Hands-on Practice
      • Advanced Features
    • Day 4: e-Form Application
      • Server Deployment
      • Viewer In HTML
      • Viewer APIs
      • Prefilling e-Form
      • Submitting e-Form
      • Sending MemoryStream
    • Get Your Certificate
    • Design Guide
      • Dialogue Flow
        • Overview
        • Creating Dialogue Flow
        • Uploading e-Form to Server
        • Running Dialogue Flow
        • Group and Statement
        • Custom Styling
      • Multilingual e-Form
      • Miscellaneous
      • Videosign
        • Videosign User Guide
      • OZ Verifier
        • OZ Verifier Introduction
        • Implementation and Use
        • Requirements
      • HTML5 Editor
        • HTML5 Editor Introduction
        • HTML Editor
        • Requirements and Sample
    • Day 5. Server & Reporting
  • 🌈Server Developer
    • OZ Server Console
    • OZ Scheduler
      • Features
      • Installing OZ Scheduler
      • Scheduler Task
    • Binding & Exporting
      • Overview
      • Export API Example
        • Extract Input Data
        • Export with OZ Server
        • Export with Scheduler
        • Export with Scheduler Task
    • Repository Server
    • Sync Server
      • Overview
      • Installing Sync-Server
        • SSL configration
      • Sample Application
      • Implementation
    • QR Link Mobile Sign
  • 🌈Report Developer
    • Overview
      • About Course
      • Preparation
      • Report Designer Overview
    • Query Design
      • Database Connection
      • Designer Environment
      • Dataset Design
    • Report Design
      • Designer Environment
      • Components
      • Table
      • Master-Detail
      • ODI Parameter
      • CrossTab
      • Chart
  • 🌈MOBILE DEVELOPER
    • Android Native
    • iOS Native
    • TOTO Framework
      • TOTO Overview
      • Sample App Overview
      • Server Application
      • Android Project
  • ⬇️Product Downloads
  • 📚 Product Documentation
  • 📕Technical Guide
  • ⚛️ ReactJS Integration
Powered by GitBook
On this page
  • Using Form Parameter
  • Using INPUTJSON viewer option
  • Using JSON Dataset
  • JSON Dataset from URL
  • Using ODI Dataset

Was this helpful?

  1. e-Form DEVELOPER
  2. Day 4: e-Form Application

Prefilling e-Form

Learn how to pass data to e-Form and pre-fill components with data.

PreviousViewer APIsNextSubmitting e-Form

Last updated 1 year ago

Was this helpful?

Using Form Parameter

  • Pass values to OZFormParam parameters in e-Form.

  • Use viewer options connection.pcount and connection.args

customer-formparam.ozr

  1. Open customer.ozr and save it as customer-formparam.ozr.

  2. Add an OZFormParam name.

  3. Bind the parameter name with the TextBox name.

customer-formparam.html

  1. Open customer.html and save it as customer-formparam.html.

  2. Pass values for the parameter name and smoker as below:

customer-formparam.html
<script type="text/javascript" >
var name = "John Kim";
var smoker = "Yes";
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-formparam.ozr");
    // pass values for form parameters
    oz.sendToActionScript("connection.pcount", "2"); // the number of paramters
    oz.sendToActionScript("connection.args1", "name=" + name); // for the parameter "name"
    oz.sendToActionScript("connection.args2", "smoker=" + smoker); // for the parameter "smoker"
}
start_ozjs("OZViewer", "/html5viewer/");
</script>

Using INPUTJSON viewer option

  • Send a JSON data string to your e-Form with the viewer option connection.inputjson.

  • All item values in JSON will be put into the corresponding components in the e-Form automatically.✨

Prepare data string in JSON to fill in customer.ozr

  1. Open customer.ozr.

  2. Set AllowSending (of input components that you don't want to use) to False.

  3. Preview

  4. Enter field values as you prefer.

  5. Right-click the Hamberger icon on the top-right of the Viewer.

  6. Select Copy input data (json) from the menu list.

  7. Save the copied JSON string as jsondata.txt

customer-inputjson.html

  1. Open customer.html and save it as customer-inputjson.html.

  2. Add a variable data and assign its value from the clipboard.

  3. The JSON string must be wrapped with single quotes.

  4. Assign the variable data to the connection.inputjson option.

  5. Get the value of smoker field from the JSON string.

customer-inputjson.html
<script type="text/javascript" >
var data = '{"name":"John Kim","n1":"A","n2":"1","n3":"2","n4":"3","n5":"4","n6":"5","n7":"6","n8":"7","n9":"Z","gender":"Male","birth_dd":"05","birth_mm":"09","birth_yyyy":"2000","phone":"+65 1234-5678","email":"john.kim@forcs.com","country":"Others","country_other":"Korea","address":"Seoul","smoker":"Yes","height":"170","weight":"65","index":"22.49"}';
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer.ozr");
    oz.sendToActionScript("connection.inputjson", data); // pass json data
    oz.sendToActionScript("connection.pcount", "1"); 
    oz.sendToActionScript("connection.args1", "smoker=" + JSON.parse(data).smoker);
    return true;
}
start_ozjs("OZViewer", "/html5viewer/");

customer.ozr

  1. No need to add a parameter to get the JSON string from HTML.

  2. Show if country_other got a value.

// OnEndBind
if (This.GetValue()) {
    This.SetVisible(true);
}

Item names in JSON string must be the same as the Name or FormID of corresponding components in the e-Form.

Using JSON Dataset

customer-jsondataset.ozr

  1. Open customer.ozr and save it as customer-jsondataset.ozr.

  2. Add a JSON Dataset customer. (refer to the video clip above)

  3. Assign dataset fields to input components.

  4. Add a form parameter jsondata.

  5. Set the Runtime Dataset of the dataset customer to the Parameter(data).

customer-jsondataset.html

  1. Open customer.html and save it as customer-jsondataset.html.

  2. Send a JSON string to the parameter jsondata

<script type="text/javascript" >
var data = '{"name":"John Kim","n1":"A","n2":"1","n3":"2","n4":"3","n5":"4","n6":"5","n7":"6","n8":"7","n9":"Z","gender":"Male","birth_dd":"05","birth_mm":"09","birth_yyyy":"2000","phone":"+65 1234-5678","email":"john.kim@forcs.com","country":"Others","country_other":"Korea","address":"Seoul","smoker":"Yes","height":"170","weight":"65","index":"22.49"}';
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-jsondataset.ozr");
    oz.sendToActionScript("connection.pcount", "1");
    oz.sendToActionScript("connection.args1", "jsondata=" + data);
    return true;
}
start_ozjs("OZViewer", "/ozviewer/");
</script>

customer-jsondataset.ozr

  1. Tick male or female of the Gender using customer.gender.

  2. Tick Yes or No of the Smoker using customer.smoker.

  3. Show the bmi_band using customer.gender instead of OZFormParam.smoker.

// OnBind
if (This.GetDataSetValue("customer.gender") == "Male") {
    This.SetChecked(true);
}
// OnBind
if (This.GetDataSetValue("customer.gender") == "Female") {
    This.SetChecked(true);
}
// OnBind
if (This.GetDataSetValue("customer.smoker") == "Yes") {
    This.SetChecked(true);
}
// OnBind
if (This.GetDataSetValue("customer.smoker") == "No") {
    This.SetChecked(true);
}
// OnBind of the BMI band
if(This.GetDataSetValue("customer.smoker") == "Yes"){
    This.SetEnable(true);
}else{
    This.SetEnable(false);
}

JSON Dataset from URL

  1. customer-jsondataset-url.ozr

    • Set the Runtime Dataset of the dataset customer to the Parameter(URL).

Using ODI Dataset

Prefill data in OZR from the database using ODI.

  • Create customer-odidataset.odi

  • Import customer-odidataset.odi into customer-odidataset.ozr

<script type="text/javascript" >
function SetOZParamters_OZViewer(){
    var oz = document.getElementById("OZViewer");
    oz.sendToActionScript("connection.servlet", "/training/server");
    oz.sendToActionScript("connection.reportname","/forcs/john.kim/customer-odidataset.ozr");
    oz.sendToActionScript("odi.odinames","customer-odidataset");
    return true;
}
start_ozjs("OZViewer", "/ozviewer/");
  • customer-odidataset.ozr

  • customer-odidataset.odi

For detailed information on ODI, refer to: Query Design

Prepare the URL of the .

🌈
Example
Example
Example
How-to video
Example
jsondata.txt
Example