Basic Javascript API Implementation

Once the Javascript API is installed and configured, enabled functions can be called in Javascript to create, modify and retrieve content within the system.

The functions and options available on the Javascript API will be listed in the API’s .js file, as shown in the figure below.

Excerpt from the Javacript API's .js file

You can access this file on the Frontend of the Javascript API.

Setting the API Key

In order for the Javascript API to work correctly, the setApiKey() function must be called. This will set your API Key as a global variable within the system.

Please note that the API key will be different for each system. For more information, please refer to the Javascript API chapter of this manual.

Standard Mode

When using the Javacript API in Standard Mode, the setApiKey() function is defined as follows.

function setApiKey(api_key); 
{
  // Make this into a global variable
  window.api_key = api_key; 
}//end setApiKey 

The API key listed on the Details screen of the Javascript API must be used within this function. In the below example, the API key 0123456789 has been set.

   setApiKey(0123456789);

Enhanced Mode

When using the Javacript API in Enhanced Mode, the Squiz_Matrix_API construct is defined as follows.

var options = new Array();
options['key'] = 'api_key';
var js_api = new Squiz_Matrix_API(options);

The API key listed on the Details screen of the Javascript API must be used within this function. In the below example, the API key 0123456789 has been set.

   options['key'] = '0123456789';

AJAX Requests

Functions that have been enabled on the Javascript API can be called using AJAX requests. An example structure for a createAsset Javascript call is shown below for both Standard and Enhanced modes.

Standard Mode

<script type="text/javascript" src="http://SYSTEM_ROOT_URL/_web_services/javascript-api.js">
</script>
<script type="text/javascript">
setApiKey(0123456789);
function printObject(object) {
  var msg = varDump(object, object, 1);
  var content = document.getElementById("asset_area");
  content.innerHTML = '<pre>'+msg+'</pre>';
}
function matrixCreateAsset() {
  var parent = document.getElementById("newrent").value;
  var type = document.getElementById("newtype").value;
  var name = document.getElementById("newname").value;
  var val  = document.getElementById("newvalu").value;
  createAsset(parent, type, name, 1, val, -1, 0, 0, 0, 0,  printObject);
} </script>
Parent: <input type="text" name="newrent" id="newrent" value="Parent ID" /><br>
Type:   <input type="text" name="newtype" id="newtype" value="page_standard" /><br> 
Name:   <input type="text" name="newname" id="newname" value="New Page" /><br>
Value:  <input type="text" name="newvalu" id="newvalu" value="Value" /><br>
<button name="createAsset" onclick="matrixCreateAsset();return true;">Create Asset</button></div>
function varDump(object, parent, pad) {     var msg = '';
  for (var i in object) {
    for (j=0; j<pad; j=j+1) {
      msg += '\t';
    }
    msg += i + " => " + object[i] + "\n";
    if (typeof object[i] == 'object') {
      msg += varDump(object[i], i, pad+1);
    }
  }
  return msg;
}

Enhanced Mode

<script type="text/javascript" src="http://SYSTEM_ROOT_URL/_web_services/javascript-api.js">
</script>
<script type="text/javascript">
var options = new Array();
options['key'] = '4767689380';
var js_api = new Squiz_Matrix_API(options);

function varDump(object, parent, pad) {     var msg = '';
  for (var i in object) {
    for (j=0; j<pad; j=j+1) {
      msg += '\t';
    }
    msg += i + " => " + object[i] + "\n";
    if (typeof object[i] == 'object') {
      msg += varDump(object[i], i, pad+1);
    }
  }
  return msg;
}

function printObject(object) {
  var msg = varDump(object, object, 1);
  var content = document.getElementById("asset_area");
  content.innerHTML = '<pre>'+msg+'</pre>';
}

function matrixCreateAsset() {
  var parent = document.getElementById("newrent").value;
  var type = document.getElementById("newtype").value;
  var name = document.getElementById("newname").value;
  var val  = document.getElementById("newvalu").value;

js_api.createAsset(
    {
        parent_id: parent, 
        type_code: type,
        asset_name: name,
        link_type: 1,
        link_value: val,
        sort_order: -1,
        is_dependant: 0,
        is_exclusive: 0,
        extra_attributes: 0,
        attributes: 0,
        dataCallback: printObject
    }
)
} </script>
Parent: <input type="text" name="newrent" id="newrent" value="Parent ID" /><br>
Type:   <input type="text" name="newtype" id="newtype" value="page_standard" /><br> 
Name:   <input type="text" name="newname" id="newname" value="New Page" /><br>
Value:  <input type="text" name="newvalu" id="newvalu" value="Value" /><br>
<button name="createAsset" onclick="matrixCreateAsset();return true;">Create Asset</button></div>
 

This operation will allow the creation of a Standard Page asset. This AJAX request is used as the content of an asset, such as a Standard Page, creating fields to input the createAsset parameters and a button to send the request, as shown in the figure below.

CreateAsset parameter fields and Create Asset button

When this button is clicked, the AJAX request will be sent and a new asset will be created as configured in the parameter fields. For more information on the createAsset operation, refer to the Javascript API chapter in this manual.

PreviousNext