Custom Activity UI

You can specify a custom authoring UI to be used for custom activities. This custom UI can be hosted on an external server.


Specify information, including the URL, for your custom authoring UI in the <customactivitytypes> tag of your domain customization.

<customactivitytype id="mycustom1" name="My Custom Type" icon="customtype.png" editurl=""/>

Because the custom authoring UI can be hosted on an external server, any communication between the custom authoring UI and the containing BrainHoney UI component must use a cross-domain communication mechanism. BrainHoney uses the open source easyXDM library for cross domain communication.

Including easyXDM

Download easyXDM from Include easyXDM in your custom authoring UI by adding something similar to the following in the head of your HTML document:

<script type="text/javascript" language="javascript" src="easyXDM.min.js"/>
<script type="text/javascript" language="javascript">
Initializing Communication

BrainHoney uses the RPC mechanism of easyXDM for communication. To set up the initial communication with the containing BrainHoney component, you first need to create the connection. Most likely, you will want to do this in the "onload" event of your page.

var socket = new easyXDM.Rpc({}, {
  remote: {
  local: {
    doSave: function() {
      //TODO: Add functionality to capture and save your 
      //      current state (see below)
      return true;

After the connection has been created, you need to call the "init" method on the connection. You will most likely also want to do this in the "onload" event of your page. This method takes two optional callback parameters. The first one gets called on successful initialization with a CustomActivityData object as its parameter. The second one gets called on error with the error message as its parameter.

socket.init(function(data) {
  //TODO: Set current state of the authoring tool based on data.url, etc.
}, function(error) {
  alert('error:' + error);
Setting the Custom Activity Data

When the "doSave" method is called, capture the current data and call the "save" method on the connection. This method takes a CustomActivityData object as its single parameter.

//This is an example implementation of the "doSave" function above
local: {
  doSave: function() {
    //TODO: Fill these with the values from your UI
    var customData1; 
    var customData2;{
      url: '',
      blti: true,
      sco: false,
      flags: 0,
      params: {
        custom1: customData1,
        custom2: customData2
    //Return true on success, 
    //false on validation errors
    return true;

See Also
<customactivitytypes> CustomActivityData