We use JIRA Software not only to manage our software projects, but also as part of our class sales process. To help capture leads, we had a form on our website that collected potential student information into a Google Sheet, which we then transcribed into JIRA items. This was fine at first, but as the frequency of inquiries increased, it began to consume more and more time. To solve this, we wanted to create a form that would directly create the item in JIRA. Once we had that figured out, we realised that we would want to add this capability to our other web properties. To accomplish this, we created a separate project that our various web sites could use to create integrate more closely with JIRA: the JIRA Item Form library.

The JIRA Item Form library is broken up into three parts: A simple php proxy, an AngularJS directive, and an AngularJS service.

We include the php proxy because the JIRA API by default does not serve Cross Origin Resource Sharing headers. The proxy reroutes the requests made by the browser to JIRA. In order for this to work, you will have to enable anonymous issue creation in the target project. The proxy we provide will only relay requests to create issues, and only to one whitelisted JIRA instance, but there is nothing about this proxy that requires you to use it with our library. If you want to open up more features of the JIRA API through a proxy, or talk to more than one at once, you can set up your own proxy, and configure the client side form to send its requests there instead.

The AngularJS directive is intended to be useable in a non-Angular environment. If Angular has not been bootstrapped on the page, the library will search the page for places where the directive is used, and bootstrap an AngularJS app there. Some of our websites are static, so we didn’t want to have to turn them into AngularJS apps just to use one directive.

Recreating all possible HTML forms with config file is not something that we want to do, so for sites that already have Angular on the page, we separated out an AngularJS service that exposes the interface that the directive uses to create items. Pages that use this service can create their own forms, and then use that information with the service to create JIRA items.

You can get this library through either NPM or Bower by searching for web-forms-for-jira.