Barcode Widget for D2

Now that I have D2 v4.5 installed and working, I have started to explore writing External Widgets.  As my first experiment, I created this little barcode generator.  As far as External D2 Widgets go, this one is super simple, but it was an instructive exercise.  So, what does the barcode generator do?  When you click on an object in the Document List or Repository Browser widget, the selected object’s r_object_id and object_name are transmitted to the Barcode widget.  The Barcode widget sends the r_object_id to an Internet service that produces the barcode as a GIF.

Here’s how I put it all together:

  •  First, I created a single HTML/JavaScript page that parses the r_object_id and object_name out of the URL parameters.  The r_object_id is inserted into a new URL that calls the barcode generator; the object_name is simply displayed with the barcode (see source code below).
<!DOCTYPE html>
<!-- Barcode D2 External widget             -->
<!-- (c) 2015 MSRoth - -->

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
<p align='center'>

<!-- parse url parameters -->
function getUrlVars() {
  var vars = {};
  var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
  function(m,key,value) {
      vars[key] = value;
  return vars;

<!-- get the r_object_id and object_name passed in on URL -->
var id = getUrlVars()["id"];
var name = getUrlVars()["name"];

<!-- make sure that an object was selected -->
if (id == null || id == "") {
  document.write("Please select an object.");

  <!-- determine object type selected -->
} else {
  if (id.lastIndexOf("0b") == 0) {
      document.write("Object type: 'dm_folder' &nbsp;&nbsp; Name: '" + name + "'");
  } else if (id.lastIndexOf("0c") == 0) {
      document.write("Object type: 'dm_cabinet' &nbsp;&nbsp; Name: '" + name + "'");
  } else if (id.lastIndexOf("09") == 0) {
      document.write("Object type: 'dm_document' &nbsp;&nbsp; Name: '" + name + "'");
  } else if (id.lastIndexOf("08") == 0) {
      document.write("Object type: 'dm_sysobject' &nbsp;&nbsp; Name: '" + name + "'");
  } else {
  <!-- generate bar code -->
  document.write("<br/><br/><img src='" + id + "&dpi=96&imagetype=gif&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm' alt='" + id + "' />");
  document.write("<br/><center>Barcode by <a href='' target='_blank'>TEC-IT.COM</a></center>");
  • Next, I put this file in my Tomcat’s /webapps/ROOT directory so it could be served as a web page.  This page can be easily tested using a URL like h ttp://localhost/barcode.html?id=1234&name=test.
  • In D2-Config, I created a new widget named Barcode of type ExternalWidget.  For the URL I provided h ttp://localhost:8080/Barcode.html?id=$value(r_object_id)&name=$value(object_name).  The $value(r_object_id) tells D2 to substitute the selected object’s r_object_id in the URL.  The same is true for the object’s object_name value.
  • Then I selected D2_EVENT_SELECT_OBJECT in the Focus Events and Communication Channel panes to make sure the widget listened for the correct messages to update itself (see image below).


  • The final step was to include the widget in a workspace and configure it for visibility in the D2 configuration matrix.  The result is below.


Like I said, this External Widget is super simple.  Now, to create an External Widget that uses bi-directional communication to communicate with D2 and the repository…


About Scott
I have been implementing Documentum solutions since 1997. In 2005, I published a book about developing Documentum solutions for the Documentum Desktop Client (ISBN 0595339689). In 2010, I began this blog as a record of interesting and (hopefully) helpful bits of information related to Documentum, and as a creative outlet.

2 Responses to Barcode Widget for D2

  1. Pingback: D2 v4.5 DQL Editor Widget – Part 1 | dm_misc: Miscellaneous Documentum Information

  2. Aline Pereira de Souza says:

    Simple and efficient code. Congrats.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: