D2 v4.5 Inbox Widget — Part 2
December 15, 2015 3 Comments
In my previous post, I provided an overview of my D2 Inbox widget design. In this post I will discuss the JavaScript code required to maintain the freshness of the login ticket. The JavaScript and OpenAjaxHub for the Inbox widget work essentially the same as they did for the D2 DQL Editor widget, with the exceptions discussed below.
As with the D2 DQL Editor widget, a ticket is generated when the JSP page initially loads. This ticket is consumed by the query that immediately updates the page with the list of notifications in the user’s Inbox. When a user clicks the subject of a notification to view its details, another query is generated to retrieve those details from the Docbase. This means another ticket is required to login to the Docbase and run the query, which means the JavaScript must publish another D2_ACTION_DM_TICKET_GENERATE
message. Recall that the callback function for the message subscription event is onNewTicket()
. In the D2 DQL Editor widget, this function immediately called the servlet to run the query. With the D2 Inbox widget, a set of states are defined (INIT, UPDATE, DETAILS
) that determine how the onNewTicket()
responds once it has received the new ticket. See the code snippet below.
function onNewTicket(event, oMessage) { ticket = oMessage.get("ticket"); if (inBoxState === INIT) { inBoxEvent = ""; updateInbox(); } if (inBoxState === UPDATE) { inBoxEvent = ""; updateInbox(); } if (inBoxState === DETAILS) { inBoxEvent = ""; doShowItemDetail(); } }
The INIT
state is set when the page first loads. The result of this state is that the page of Inbox notifications is built. The UPDATE
state is set upon the closing of the Inbox Notification Details pop-up window. When the pop-up closes, the Inbox notifications list is refreshed — one could have been deleted from the Details page. The DETAILS
state is set when a user clicks a link to view the details of a notification. When the onNewTicket()
function identifies a DETAILS
state, it calls doShowItemDetail()
to display the notification’s details. More of the JavaScript is displayed below.
updateInbox()
The updateInbox()
function calls the D2QueryInboxServlet
servlet to run the query to display the Inbox notifications. It inserts the username, ticket, and Docbase name into a URL string and uses AJAX to call the servlet. Here is the most interesting snippet of that code.
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // do AJAX xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { document.getElementById("InboxTable").innerHTML = xmlhttp.responseText; } }; xmlhttp.open("POST", "D2InboxQueryServlet", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("user=" + user + "&docbase=" + docbase + "&ticket=" + ticket);
showItemDetail()
The showItemDetail()
function is called when a user clicks on the subject of an Inbox notification. The URL built for each notification on the page, calls this function and passes the r_object_id
of the corresponding dmi_queue_item
. You can see the function sets the inBoxState
variable to DETAILS
and requests a new ticket. Once the new ticket is received by the onNewTicket()
function, the doShowItemDetail()
method is called to present the pop-up.
function showItemDetail(objId) { objectId = objId; inBoxState = DETAILS; publishNewTicketRequest(); }
doShowItemDetail()
The doShowItemDetail()
function pops open the window containing the details for the selected Inbox item. Clicking the link opens the InboxDetail.jsp
page, which uses Java and AJAX.
function doShowItemDetail() { var url = "InboxDetail.jsp?itemId=" + objectId + "&user=" + user + "&docbase=" + docbase + "&ticket=" + ticket; window.open(url, 'newwindow', config = 'height=400,width=500, toolbar=no, menubar=no, scrollbars=yes, resizable=no,location=no, directories=no, status=no'); objectId = ""; }
onDetailsClose()
This function is called when the Details pop-up window closes. It sets the inBoxState
to UPDATE
and requests a new ticket. When a new ticket is received, the list of Inbox notifications is refreshed.
function on_DetailsClose() { inBoxState = UPDATE; publishNewTicketRequest(); }
In summary, this isn’t a very complicated widget. The primary difference between this widget and the D2 Query Editor widget is the necessity to refresh the tickets and to react differently depending upon the inBoxState
state variable. I hope you find this widget useful and use it as a foundation for building your own D2 external widgets.
You can download the D2 Inbox WAR file here.