When you're coding the SCRIPT for a component, you'll need to know syntax specific to the domain your working in (Javascript, R, or Python). This article covers some of the most commonly used API functions for building Javascript components. There are others documented in the Javascript Value API article for manipulating data in javascript components.


You'll need this stuff for creating the functions that process data coming in and going out of your component. You'll also need it for debugging - creating warnings, errors, and logs. 


(For a primer on what it's like working with Javascript in the Exaptive Studio, check out the Javascript in General article and the other javascript framework articles in our Working with Your Favorite Technology section.)



The Javascript component API is accessible through the api property of the component context. It is denoted by this.apiIt need not be denoted as this, however. 


inputState          this.api.inputState          Type: Value

This represents the component's current input values. It is an object of type value. You can either export() it to convert it into a native JavaScript object and work with it that way or use the value type API to manipulate it directly. 

 

// Suppose the component has two inputs called 'x' and 'y'.
var state = this.api.inputState.export();
var x = state.x;
var y = state.y;

 

layoutElement          this.api.layoutElement          Type: DOM element

This is the component's layout element, if it has a layout element defined in its SPEC. This provides the user with the DOM element that will contain your component's inner HTML.

  

// In the spec
"layout": "html", 
"layoutSpec": {
  "element": "div",
  "innerHtml": "Hello"
}

   

var div = this.api.layoutElement;
var content = div.textContent;   // "Hello" 

 

imports          this.api.imports          Type: Object

This provides access to third party modules and user assets that have been declared in the SPEC


// In the spec
"dependencies": {
  "file": [
    {"path": "https://code.jquery.com/jquery-2.2.3.min.js", "type": "js", "name": "$"}
  ]
}

   

// In the component
var div = this.api.imports.$("div"); 

  

log          this.api.log( msg, value )          Type: Function

Log messages are displayed in the dataflow console and can be viewed within the log messages tab. This function takes two arguments, msg and value. The msg argument must be a string. Consider msg to be the title of the message that is logged to the console. The value argument accepts various types including strings, json and lists.


warning          this.api.warning( msg, value )           Type: Function

Warning messages are highlighted yellow in the dataflow console and can be viewed within the warning messages tab. This function takes two arguments, msg and value. The msg argument must be a string. Consider msg to be the title of the message that is logged to the console. The value argument accepts various types including strings, json and lists.


error          this.api.error( msg, value )           Type: Function

Error messages are highlighted red in the dataflow console and can be viewed within the error messages tab.

 

output          this.api.output( name, value )           Type: Function

Sends a value to a component output port with the given name. This function is used to return data from a component. It takes two arguments, name and value. The name must match the corresponding output port. The value must match the value that is required by the output port.


value          this.api.value           Type: Value API

This is a factory for instantiating value type objects. 


var v1 = this.api.value.import([1,2]);
var v2 = this.api.value.integer(1); 

  

setLayout          this.api.dataflow.setLayout( layoutSpec )           Type: Function

This dynamically modifies the layout of the component. This function take one argument, layoutSpec, which is an object containing properties specific to the new component layout. 


// Modify only inner html. 
this.api.dataflow.setLayout({
  innerHtml: "<p>This is a new paragraph</p>"
});
// Modify inner html and reset css.
this.api.dataflow.setLayout({
  innerHtml: "<p>This is a new paragraph</p>",
  css: ""
})