Accessing the JavaScript object properties/methods

Using dot notation

After associating a PowerBuilder object with a JavaScript object, you can access the JavaScript object properties and methods using dot notation (.).

Regarding the return value, only when the method uses a callback function, the method's return value will be returned as a string. If the method uses no callback function, no value will be returned; if you want to get the return value, you can execute the JavaScript code.

To access a JavaScript method:

JavaScript code:

navigator.contacts.find (fields, onSuccess, onError);

The corresponding PowerBuilder code:

//creates and connects the PB OLEObject with AppeonMobile.cordovaPlugin. Scripts are omitted here.
//associates this PB object with a JS object
oleobject.AssociateJSwithPB ("navigator.contacts", this)
//executes the find method. The method parameter will be described in detail later.
//ls_Return is a JSON-format string. The string contains the information of the found contacts including name, phone number, address etc.
ls_Return = oleobject.find (fields, "@", "@")

To access a JavaScript property:

JavaScript code:

//create the object
var optionsreturn = new ContactFindOptions();
//sets the property value
optionsreturn.filter = "Bob"; //property value is a string
//obtains the property value
var filtervalue = optionsreturn.filter;

The corresponding PowerBuilder code:

String filtervalue
//creates the object
oleobject.ExecJavaScript ("var optionsreturn = new ContactFindOptions();")
//associates the object
oleobject.AssociateJSwithPB ("optionsreturn", this)
//accesses the property
//sets the property value
oleobject.filter ="~"Bob~"" //string data type, included in quotation marks
//obtains the property value
filtervalue = oleobject.filter

Using a JSON string

You can use a JSON string as the parameter to set the object property. You will first need to know the JSON format and the data type of the property values. For example,

Suppose there is an "options" object parameter in the JavaScript method:

navigator.contacts.find (fields, onSuccess, onError, options);

You can set the value for the "options" object parameter using a JSON string in PowerBuilder code like this:

ls_Return = oleobject.find (fields, "@", "@", '{"filter":"Bob"}')

Here is another example:

JavaScript code:

var options = new ContactFindOptions();
options.filter = "Bob";

The corresponding PowerBuilder code (sets the object property using a JSON string when creating the object):

oleobject.ExecJavaScript('var options = new ContactFindOptions({"filter":"Bob"});')

Using ExecJavaScript/ExecJavaScriptWithReturn function

You can call the ExecJavaScript/ExecJavaScriptWithReturn function of AppeonMobile.CordovaPlugin object to execute the JavaScript code that sets the object properties, for example,

//creates the object
ls_Return = oleobject.ExecJavaScript ("var optionsreturn = new ContactFindOptions();")
//sets the value of the object property
ls_Return = oleobject.ExecJavaScriptWithReturn ("optionsreturn.filter=~"test1~"")
//obtains the property value and stores in a variable
oleobject.ExecJavaScript("var testfilter = optionsreturn.filter")
//gets the variable value and returns the value
ls_Return = oleobject.ExecJavaScriptWithReturn ("testfilter")

Using eon_cjsonnode/eon_cjsonnodearray object

eon_cjsonnode and eon_cjsonnodearray objects are provided in the Appeon Workarounds PBL for handling the JSON-format strings. These two objects can be used to access the JS object properties if the object property structure are complex, as it may be very difficult to get the value from the returned string which is long and complex. You can determine which object to use according to the brace/bracket used in the string:

  • values in braces ({}), node type, use eon_cjsonnode

  • values in brackets ([]), array type, use eon_cjsonnodearray

Here is an example that shows how to obtain all of the phone numbers from the following JSON string:

JSONstring = {"displayName":"test1", "phoneNumbers":[{"type":"work", "value":"212-555-1234", "pref":"false"}, {"type":"mobile", "value":"917-555-5432", "true":"false"}, {"type":"home", "value":"203-555-7890", "pref":"false"}]}

Use eon_cjsonnode, as the string is in a node (in {}):

Integer li_count //store the total amount of phone numbers
Eon_cjsonnode returnnode //store the returned string
returnnode = create Eon_cjsonnode // create the JSON node object
//formatize the string in the JSON object
returnnode.of_load (JSONstring)
//phoneNumbers is an array, so use Eon_cjsonnodearray to receive values
//You can also use of_gettypebykey to determine the node type.
Eon_cjsonnodearray phoneNumberarray //phoneNumbers is the node value, containing multiple phone numbers
phoneNumberarray = create Eon_cjsonnodearray
phoneNumberarray = returnnode.of_ valuearray ("phoneNumbers")
li_count = phoneNumberarray.of_size()
Eon_cjsonnode phoneNumber //store the returned string
phoneNumber = create Eon_cjsonnode
For li_for = 1 to li_Count
 phoneNumber = phoneNumberarray.Of_getnodebyinex (li_For)
 messagebox ('phonenumber', phoneNumber.of_valuestring (value)) //export the obtained phone numbers
Next

Code example

Here is a step-by-step guide with code examples that shows how to use different ways to set a JavaScript property.

Step 1: Create the PowerBuilder OLEObject object, connect with the AppeonMobile.CordovaPlugin object, and associate the PowerBuilder object with the JavaScript object (navigator.contacts).

Oleobject lole_cordova
lole_cordova = Create OleObject
li_Return = lole_cordova.connecttonewobject ("AppeonMobile.CordovaPlugin")
lole_cordova.AssociateJSwithPB ("navigator.contacts", this)

Step 2: Add the properties and values for the options object.

Using a JSON string:

  1. Create the iec_option object from the eon_cjsonnode object.

    eon_cjsonnode iec_option
    iec_option = Create eon_cjsonnode
  2. Call the iec_option's function to add the property and value for the options object.

    iec_option.of_addkeyvalue ("filter","test")
    iec_option.of_addkeyvalue ("multiple",true)
    iec_option.of_addkeyvalue ("hasPhoneNumber",false)
  3. Call the iec_option's function to return the JSON string.

    ls_Return = iole_contact.find (["name"], "@", "@", iec_option.of_ToString() )

Using dot notation:

  1. Create the options object.

    lole_cordova.ExecJavaScript ("var options = new ContactFindOptions();")
    ls_Return = lole_cordova.ExecJavaScriptWithReturn ("options")
  2. Associate the PowerBuilder object with the options object.

    lole_cordova.AssociateJSwithPB ("options", This)
  3. Set the values of the filter, multiple and hasPhoneNumber properties for the options object.

    //string must be in double quotes
    lole_cordova.filter = "~"test~""  //'"test"' is also valid
    lole_cordova.multiple = true
    lole_cordova.hasPhoneNumber = false
    ls_Return = lole_cordova.ExecJavaScriptWithReturn ("options")
  4. Associate the PowerBuilder object with the navigator.contacts object again.

    lole_cordova.AssociateJSwithPB ("navigator.contacts", this)
    ls_Return = lole_cordova.find (sle_1.Text, "@", "@", "options" )

Using ExecJavaScript/ExecJavaScriptWithReturn function:

  1. Create the options object.

    lole_cordova.ExecJavaScript ("var options = new ContactFindOptions();")
    ls_Return = lole_cordova.ExecJavaScriptWithReturn ("options")
  2. Associate the PowerBuilder object with the options object.

    lole_cordova.AssociateJSwithPB ("options", This)
  3. Set the values of the filter, multiple and hasPhoneNumber properties for the options object.

    lole_cordova.ExecJavaScript ("options.filter=~"tes~t"")
    lole_cordova.ExecJavaScript ("options.multiple=true")
    lole_cordova.ExecJavaScript ("options.hasPhoneNumber=true")
    ls_Return = lole_cordova.ExecJavaScriptWithReturn ("options")
  4. Associate the PowerBuilder object with the navigator.contacts object again.

    lole_cordova.AssociateJSwithPB ("navigator.contacts", this)
    ls_Return = lole_cordova.find (sle_1.Text, "@", "@", "options")