Loading the JavaScript API
Custom HTML views developed against JavaScript API 1.2 or earlier used the RequireJS module system to import the JavaScript API into each view.
Since
Xpress Insight 3.2 the API that no longer uses RequireJS. Include the JavaScript API directly:
<script src="$distrib/insight-4.5.js"></script>
This import defines a global variable, insight, which is the top-level namespace object for the API.
Your JavaScript code still needs to be wrapped in a function that will be executed when the API is ready, but instead of using the require function, call
insight.ready:
This is no longer the case, and you should
remove all arguments to any callback function that is passed to the
insight.ready function, to avoid the global insight variable being shadowed by a local argument variable with the same name. You may find that the old argument had a different name, such as Insight, in which case, any references to it will need to be renamed.
insight.ready(function () {
// Your view code here
});
|
Note In earlier versions, the insight API object was made available to you via an argument that you defined in your callback function, like this:
require('insight-api-1.2', function(insight) {
// The API used to be available via local variable insight
});
|
As in previous releases, the latest JavaScript API ships with several third-party libraries, including jQuery. Once you have imported insight-4.5.js, these libraries are available for use in your custom view without having to explicitly include them. Any other libraries that you need in addition to these should be included after insight-4.5.js. In previous releases, you may have used RequireJS to do this, but starting with the 2.0 API you include them using a simple <script src="..."> tag.
Here is a complete example of how to import the API, also demonstrating that jQuery is available without being explicitly imported.
|
|
Note The path to the
Xpress Insight stylesheet has changed slightly too:
|
<html>
<head>
<link type="text/css" rel="stylesheet" href="$distrib/insight-4.5.css"/>
<script src="$distrib/insight-4.7.js"></script>
<script>
insight.ready(function () {
var view = insight.getView();
// etc...
});
</script>
</head>
<body>
etc...
</body>
</html>