Execute EachScape Custom Script from JavaScript
 Access native OS functions.


Introduction

In EachScape, you can create Custom Scripts to group a set of Actions.
These Actions give access to all native OS functions: GPS, camera, video play etc.. 

 

This Tutorial explains how to 
Run an EachScape Custom Script from JavaScript

 

 

ES.API

To call a Custom Script from a JS running in an HTML Block you will use the EachScape JavaScript library : ES.API 


ES.API allow
  • The execution of a Custom Script from an HTML Block
  • Set the value of an EachScape variable.
Benefits
  • Access iOS and Android native functions( GPS, Camera, Proximity Fence, Beacons)  from JS
 

ES.API library provides communication methods to access: 

  • Data
  • EachScape Actions
  • Pass variables

 

ES.API features only 2 methods:
  • ES.API.initialize()
  • ES.API.requestScript

Example
We created a Tutorial App to illustrate how to use ES.API.

The Tutorial App use JavaScript to implement a set of Checkboxes

 

Review the HTML CheckBoxes Tutorial App
 

How to include ES.API

 

ES.API does not depends on framework libraries such as jQuery
yet we automatically include JQuery in the app payload 
(you still need to include it in your JS code) using the HTML Block.

 

In this section describes how to prepare your HTML Block to include ES.API: 
 

  • The Studio includes ES.API in any app using and HTML Block but you do need to include the library in your JS code. The actual library name is: es_js_api.min.js, to access ES.API from your JS you still need to reference it:
  • You must include the Javascript library: es_js_api.min.js
    •   <script type="text/javascript" src="es_js_api.min.js"></script>
  • If you want to use jQuery, you need to include it as well:
    •  <script type="text/javascript" src="es-jquery-1.7.min.js"></script>
 
Create a Custom Script
  • ES.API calls an Custom Script containing the series of EachScape Actions to execute.
  • You MUST create the Custom Script(s) referenced by your JS code.

 Running the API 
  • In your script, initialize the API
    •   ES.API.initialize()
        In this example, we use jQuery().ready:
  jQuery(document).ready(function(){
ES.API.initialize();
    });
  • To excute the custom script, use: 
    • ES.API.requestScript
    • Here is the example we use in the HTML CheckBoxes Tutorial App:
ES.API.requestScript("sendrequest", { items: arrItems.join(",") } );


 

API Methods
ES.API.initialize()

Initializes ES.API library

 

ES.API.requestScript()

Set the variables, and call CustomScript.

Parameters:

Name

Type

Description

name

String

Name of the customscript

variables

Hash

Key value pair of variable name and variable type.
I.e. 
{
  name: “John”,
  user_id: “123”
}
When you are executing custom script, you can refer by calling [[var:name]], [[var:user_id]].

Returns:

null
 

Code Overview


This is an extract of the code is in the HTML Block of the HTML CheckBoxes Tutorial App


<!DOCTYPE html>

<html>
<head>
  <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">

  <script type="text/javascript" src="es-jquery-1.7.min.js"></script>
  <script type="text/javascript" src="es_js_api.min.js"></script>
  <script>

    jQuery(document).ready(function(){
      ES.API.initialize();
    });
    function submitRequest(e){
      var form     = jQuery('form');
      var arr      = form.serializeArray();
      var arrItems = [];
      for( var i = 0; i < arr.length; i++ ){
        arrItems.push( arr[i].value );
      }
      if( arrItems.length > 0 )
      {
        ES.API.requestScript("sendrequest", { items: arrItems.join(",") } );
      }
      else
      {
        alert("please enter your choice");
      }
      return false;
    }
  </script>
  <title></title>
</head>

To see the entire code, please review the HTML CheckBoxes Tutorial App

Learn More
 

- HTML Variables : This App Tutorial shows how to pass variables between EachScape and a JS running in your app