Adding Charts to D2 Part 2

Part 2 describes how to send a message to D2 to load the doclist widget


After creating the graph in Part 1, we want to make the graph clickable and send a message to the D2 interface to update the Doclist widget with the documents that the user clicked on.

This helps me itemize the specifics of each pie piece or bar chart:

  • Why do we have so many draft documents?
  • Which documents are taking so long in the workflow?
  • Which items are in an error state?

Now, because the results in the doc list, I can do standard Documentum D2 actions:

  • View, Edit, Check in, or double check the results
  • Delete old draft documents that never got started
  • Start a workflow or terminate an existing workflow and restart
  • Email the owner and ask a question

So how do we do this in D2?

1. Capture the click

In the Google chart documentation, we can add a selectHandler:, 'select', selectHandler);

function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    var value = data.getValue(selectedItem.row, 0);
    var param_name = "<%=sParamName%>";

2.Send a message to D2

There are a couple good resources for learning D2 Widgets:

And it is good to look for some examples too.

For our project, we need to configure a standard D2 Query Form ahead of timethat will define the search. Then the updateDoclist() function will post a D2_ACTION_EXECUTE message.

Our Message will be created like this:

function updateDoclist(param_name,param_value,queryFormConfigName) {

//To update the doclist a new OpenAjax message will be build to be posted in the Hub using // the D2-OAH API
 var messageToSend = new OpenAjaxMessage();

//In the message, we need to define what properties will be sent. Here a_status and // r_object_type
 messageToSend.put("list", param_name);

//We set the a_status value
 messageToSend.put(param_name, param_value);

//set the query form config name which will be used to update the doclist
 messageToSend.put("config", queryFormConfigName);

//Then we define what service and what method in the service will be called. We call the //Search service and the runQueryFormSearch method.
//Calling this service will update the user's last search object
 messageToSend.put("eService", "Search");
 messageToSend.put("eMethod", "runQueryFormSearch");

//When the service call will be finished, we can define what action will be executed. Here, //an event will be posted.
 messageToSend.put("rType", "EVENT");
 //As the last search has been updated by the web service call, we will post the D2_ACTION_SEARCH_DOCUMENT event to display the search results

//The message is now ready, it can be posted in the Hub
 d2OpenAjaxHub.sendMessage("D2_ACTION_EXECUTE", messageToSend);

The message will then tell the doclist widget to run the query form with the right parameter (such as lifecycle state).

In Part 3, I provide a link to the code on github and provide some more discussion on some of the glue between the widget and D2.




2 thoughts on “Adding Charts to D2 Part 2”

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