i2b2 Web Client
Space shortcuts
Space Tools

Versions Compared

Old Version 2

changes.mady.by.user Janice Donahoe

Saved on

compared with

New Version 3

changes.mady.by.user Janice Donahoe

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This document was created as a walk-through tutorial on how to create custom plug-in modules that extend the functionality of the base i2b2 Web Client.

The author(s) assume that the reader is an experienced software developer or architect who has some experience programming JavaScript and some knowledge of advanced JavaScript topics such as JSON, AJAX, and using JavaScript toolkit (APIs). Anchor_GoBack_GoBack

Plug-In Example #1 – Hello World

...

Your deployment of the i2b2 web client will have a directory which contains all the JavaScript code related to the i2b2 web client Framework. The default location of this directory is /js-i2b2.

This directory contains the Framework configuration file (i2b2_loader.js) and two directories (cells and hive). Within the cells directory are the directories for the core cells in addition to the plug-ins folder. Within the plug-ins folder we will create a new folder to hold our examples called "examples".

Within the examples folder create a new folder called ExampHello. We will be using the string "ExampHello" as the code that will be used to uniquely identify the plug-in from other plug-ins and cells. For our example we chose to use the abbreviation code "ExampHello" for our aptly-named "Hello World" example plug-in.
Within every plug-in directory there is an assets directory to contain all multimedia assets that are used by the plug-in. All CSS, HTML and image files are contained within this directory.

Create the directory "/js-i2b2/cells/plugins/examples"
Create the directory "/js-i2b2/cells/plugins/examples/ExampHello"
Create the directory "/js-i2b2/cells/plugins/examples/ExampHello/assets"

...

For the Framework to be aware of our new plug-in, we must add an entry to the module loader configuration file. Within the file /js-i2b2/i2b2_loader.js is a section containing JSON-based configuration information which has the following structure:

// THESE ARE ALL THE CELLS THAT ARE INSTALLED ONTO THE SERVER
i2b2.hive.tempCellsList = [
   { code: "PM",
forceLoading    forceLoading: true // <------- this must be set to true for the PM cell!
   },
   { code: "ONT" } ,
   { code: "CRC" } ,
   { code: "PLUGINMGR" ,
forceLoading    forceLoading: true,
forceConfigMsg    forceConfigMsg: {
      params

Wiki Markup
:  \[\]

   }
  }
];



This JSON structure is used to register a list of cells and plug-in modules that the framework will attempt to load if the authenticated user has been authorized to use them (via the data returned from the PM cell during successful login). The above example code listing has information for registering the following cells/plug-ins (in order):

...

<html>
<body>
<div id="ExampTabs-mainDiv">
<div id="ExampTabs-TABS" class="yui-navset">

<!--{-}Define the tabs -->
<ul class="yui-nav">
<li id="ExampTabs-TAB0">
<a href="#ExampTabs-TAB0"><em>Specify Data</em></a>
</ul>
<li id="ExampTabs-TAB1">
<a href="#ExampTabs-TAB1"><em>View Results</em></a>
</ul>
<li id="ExampTabs-TAB2">
<a href="#ExampTabs-TAB2"><em>Plugin Help</em></a>
</ul>
</ul>

<!--{-}Define the tabs sub-screens -->
<div class="yui-content" id="ExampTabs-CONTENT">
<div>This "Hello World" demonstration text shows up on Tab #1</div>
<div>This "Hello World" demonstration text shows up on Tab #2</div>
<div>This "Hello World" demonstration text shows up on Tab #3</div>
</div>

</div>
</div>
</body>
</html>

...

<\!--{-}Define the tabs \–

<html>
<body>
<div id="ExampTabs-mainDiv">
<div id="ExampTabs-TABS" class="yui-navset">

Wiki Markup
unmigrated-wiki-markup
>      \[removed in this example\]


<!--{-}Define the tabs sub-screens -–>
<div class="yui-content" id="ExampTabs-CONTENT">
<div>
<div class=" ExampTabs-MainContent">
<div class=" ExampTabs-MainContentPad">
<div>Drop an i2b2 object such as a search term or query onto the input box below, and then click the "View Results" tab for information about that object.
</div>
<div class="droptrgtlbl">i2b2 Object:</div>
<div class="droptrgt SDX-PRS" id="ExampTabs-DROPTRGT">
Drop an object here
</div>
</div>
</div>
</div>
<div>This "Hello World" demonstration text shows up on Tab #2</div>
<div>This "Hello World" demonstration text shows up on Tab #3</div>
</div>

</div>
</div>
</body>
</html>

...

<\!--{-}Define the tabs \–

<html>
<body>
<div id="ExampTabs-mainDiv">
<div id="ExampTabs-TABS" class="yui-navset">

Wiki Markup
unmigrated-wiki-markup
>      \[removed in this example\]


<!--{-}Define the tabs sub-screens -–>
<div class="yui-content" id="ExampTabs-CONTENT">
<div>
Wiki Markup
\[TAB 1's screen removed in this example\]
</div>
<div>
<div class="ExampTabs-MainContent">
<div class="results-directions">
You must first provide an i2b2 object. Please return to the "Specify Data" tab then drag and drop an i2b2 object onto the input box.
</div>
<div class="results-finished" style="display:none;">
<div class="results-text">
The following information was passed to the plugin in the i2b2 object:
</div>
<div id="ExampTabs-InfoSDX">
<table>
<tr>
<th>Display Name</th>
<td class="sdxDisplayName"></td>
</tr>
<tr>
<th>SDX Datatype Code</th>
<td class="sdxType"></td>
</tr>
<tr>
<th>Controlling Cell</th>
<td class="sdxControlCell"></td>
</tr>
<tr>
<th>Primary Key Column</th>
<td class="sdxKeyName"></td>
</tr>
<tr>
<th>Primary Key Value</th>
<td class="sdxKeyValue"></td>
</tr>
<tr>
<th>Original XML Data</th>
<td class="sdxOriginalXML">
<div class="sdxOriginalXML"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div>This "Hello World" demonstration text shows up on Tab #3</div>
</div>
</div>
</div>
</body>
</html>

...