Ajax variables in Atlassian Bonfire for JIRA to access session state

If you didn’t know already, you can insert variables into your issues with Bonfire. It comes with four default variables: cookies, useragent, title, url. You insert them into your issue summary like so {useragent}, and Bonfire will replace it with something like this:

*Mozilla/5.0 (Windows NT 6.1; WOW64)….*

Or for the pictorially inclined:

You can read more about it [here](http://confluence.atlassian.com/display/BONFIRE/Templates+and+Variables). What I’m more interested in is creating custom variables. These vanilla variables are fine indeed, but often you need more debugging information before you can proceed to fix the issue. After the break I will show you how to create your own Ajax requests *in Bonfire* to get more complex information about your users (in particular **session** variables!)

The first bit of useful information is that Bonfire lets us write Javascript to generate content in these variables. To create a variable start up Bonfire in whatever browser you like, go to the Templates tab, open up *Variables*, and click “Add variable”. We can create a variable called “activeMenuItem” and assign it the following Javascript: `document.getElementById(‘activeMenuItem’).innerHTML`. I know … ugly old Javascript and no access to beautiful jQuery selectors. The reason the developers left out jQuery is because they don’t want it interfering with actual page execution. So in Chrome you are without a paddle going up you-know-what creek. In Firefox and IE because they don’t isolate extensions, you can just include jQuery in your executing page and it will be available to Bonfire. However you can’t trust yourself to be consistent all the time, so I really want a solution that uses plain Javascript. What is a boy to do?

![Bonfire custom variables](http://mikemurko.com/wp-content/uploads/2011/12/bonfireajax1.png)

Now I could just output the session variables server-side to a div at the bottom of the page and then just use the aforementioned example to get the content. We would be done, but the application would be incredibly insecure (“Does my DOM look fat to you?”) … well, you know what I mean. So I wanted to request the data from an AJAX request. To be honest, I had to do a Google to figure out how to write an Ajax request in plain Javascript. Once that was done I realized I had to wrap the whole request and return it as a string/literal so that Bonfire didn’t throw a fit. I used a self-executing anonymous function (essentially it declares itself and automatically runs itself where the return value will get sent to Bonfire). Here is the code:

1
2
3
4
5
6
(function() {
	xmlhttp=new XMLHttpRequest();
	xmlhttp.open("GET","http://YourDomainName.com/ajax_get_session.php",false);
	xmlhttp.send(null);
	return xmlhttp.responseText;
})();

Going through this line by line:

1. Declares the self-executing anonymous function (SEAF)

2. Creates XMLHttp (ajax) object

3. Opens a **synchronous** GET request to some page. The last parameter “false” makes it synchronous. Otherwise Bonfire won’t stop to wait for your AJAX to come back with your pretty little session variables.

4. Obvious. Not sure if the null is needed. Keep it for good measure.

5. Waits and gets for the response text and returns it to the SEAF, and therefore will be sent to Bonfire

6. Closes off the function, and then the last two () are really important because that’s what makes the function execute itself. Omit these at your own peril!

Copy that code and paste it as the “selector” from the image above. Give your variable a name and you should be good to go. Obviously you need to code that requesting page. In this case ajax_get_Session.php. If you’ve gotten this far I will assume you know how to print out your session variables (or whatever else you want to use this for). The only other caveat I would add is that you should put some security on that AJAX request such as a querystring that only gets sent from Bonfire (i.e. *xmlhttp.open(“GET”,”http://localhost/ajax_get_session.php?secret=key”,false);* ). That way other users can’t happen upon this useful little script.

I hope this will help some other development team, as I find it really valuable. Now quit reading and go fix some bugs.

  • http://www.atlassian.com/software/bonfire/overview Andrew Prentice

    Mike, that’s awesome. We could lose some DOM fat with this at Atlassian :-)

  • Anonymous

    Haha glad someone read this. I hope it comes in handy to boost your DOM’s self-esteem.