I noticed many people wanted to represent their entire Program on one page in a tree, but getting set up with existing apps like Portfolio and Structure could be time consuming and confusing.

I was inspired to create a way to track and your manage your Program which retained the flexibility of Portfolio and Structure but was much easier to use and set up.

What it does

It lets you create a Progam which can be represented on a single page. You can use JQL to create groupings, like Projects, Releases, Teams, sprints and assignees of unlimited depth. It also rolls up story point and time tracking estimates to each level so you can tack the progress of each level at a glance.

How I built it

I built it using ACE and Next.js. I used a boilerplate I created which lets you build ACE apps fast using modern frontend tools like React.js and Styled Components. It has a bunch of bundled features such as automatic license validation, cancellation page, loading components, Sentry integration, and some functions to make API calls from the frontend or backend much simpler.

Challenges I ran into

Making a drag and drop interface in a tree structure was difficult, but essential for a seamless user experience. There were a number of drag and drop packages but none for drag and drop in a nested tree list. I had to develop a system of indexing each item and tracking how far the mouse moved on the horizontal axis of the screen to determine where to add the dropped item.

I also needed to develop a way to recursively get an issue's children or parent/s, regardless of whether in a next-gen or classic project, and which worked with the new higher level issue types created in Program Tree. This took some trial and error to eventually get right.

Accomplishments that I'm proud of

I'm proud to develop a working app, which makes creating and visualising your Program a breeze. There are almost no buttons on the UI. It's a truly zen experience. When creating your program, you can drag and drop different segments in a way which is hard to beat in terms of simplicity.

What I learned

I learned that accommodations needed to be made for different project types. Next-gen projects connect issues to Epics with a Parent field, classic projects link with an Epic Link. Portfolio created issue types use Parent Link and Program Tree uses Parent Issues.

I learned how to develop a drag and drop interface in a tree structure. It requires a different way of indexing each issue and the functions for moving issues around on drop are very different.

What's next for Program Tree

I plan to release it in the Atlassian Marketplace. I still have some tidying up to do to make the experience even better:

  • add jql validations to make sure a query is a valid jql query, and there's not too many issues in the segment
  • ability to edit a program once created. I ran out of time before I could implement this

Built With

Share this project: