Progress Bar for Confluence

Example usecase
Edit screen

Inspiration

Content formatting and management are increasing requirements within the Confluence space. There are lots of great options currently available on DC and Server in the Marketplace, whether it's a solution that offers a suite of functionality as a bundle or one that offer a single individual functionality (the former are typically more expensive). The availability of these solutions however are less abundant on Cloud, understandable as Confluence Cloud is still growing. We therefore wanted to create a solution on Cloud that allows users to manage their content better and improve engagement. One of these is Progress Bar for Confluence, it allows the user to document and visualise the stages of processes in Confluence.

What it does

Progress Bar for Confluence lets you provide visualisation and context for processes in Confluence. Making it easy for readers to see all the stages and view the associated content as a styled progress bar

How I built it

We initially built a base Confluence Cloud App before building the macros on top. These in general took a few days due to its complex functionalities. We also followed the provided Atlassian documentation https://developer.atlassian.com/cloud/confluence/getting-started/#step-4--create-a-basic-app.

Challenges I ran into

In general to develop a macro we faced the same issues. Each macro is self isolated in an iframe, so it is difficult to interact with the other macros and with the page itself: https://en.wikipedia.org/wiki/HTML_element#Frames In particular for Progress Bar the main challenge was to link and align all the different steps present in the page. Because they don't know each other (iframe problem), we had to use an event mechanism to make them work together.

What I learned

Better understanding of the Cloud infrastructure. Learned how iframes work and how to handle them. New frameworks learned: Typescript, React, Redux, Webpack, Jest