Custom Item Search UI

The HTML content editor contains a toolbar button that launches the "Insert/edit course link" popup window, from which you can choose an item in the current course to link to in the HTML content. That window, by default, has a tree control that lets the end-user browse items in the current course. You can extend that popup window with a custom search UI to let the end-user search for items in the current course. Your custom search UI appears in a tab adjacent to the browsable tree-control. You can host the custom search UI on an external server.


Specify the URL to your custom search UI in the <customitemsearch> tag of your domain customization.

<customitemsearch url=""/>

Because the custom search UI can be hosted on an external server, any communication between the custom search 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 search 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: {

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 ItemSearchState object as its parameter. The second one gets called on error with the error message as its parameter.

socket.init(function(state) {
  //TODO: Initialize connection to DLAP to search for 
  //  course items using state.courseId, state.enrollmentId.
  //TODO: Set current selection based on state.selectedId and state.selectedTitle
}, function(error) {
  alert('error:' + error);
Setting the Selected Item

After the user has searched for and selected the content item, call the "setSelected" method on the connection. This method takes a ItemDetails object as its single parameter.

//TODO: Call this function in response to an event in the UI
//  to pass information about the selected item to the
//  containing BrainHoney component.
function setSelectedItem(itemId, newTitle, oldTitle) {
    id: itemId, 
    newTitle: newTitle, 
    oldTitle: oldTitle
See Also
<customitemsearch> ItemSearchState ItemDetails