Inspiration
Jira is a great tool for project management and requirement creation. Sometimes, however, it lacks flexibility when creating requirements. This happens when creating tasks, where the fields are permanently set on the screen.
We were inspired to create Dynamic Forms with interactive forms. Especially those used for scientific research. They allow the appearance of the form to depend on the choices made by the user. Thanks to this, they do not overwhelm the user with unnecessary information and lead him by the hand to the end of the process. This gave us the basis for creating the Server and DC versions of our application, which we also wanted to implement in the Cloud. Finally, we had that chance thanks to Forge.
What it does
The application allows you to control Create Screen behaviour by adding dynamic behaviour to fields. Thanks to this, users see the form filled according to the rules set under the project and adapted to the user context. Those behaviours are based on the user's previous selections. For this purpose, we have created two functionalities - Visibility Rules and Set Value.
Visibility rules allow you to control the visibility of fields on the form and display them depending on the choices made by the user at an earlier stage. Only the fields that are needed in a given context will be shown to him, thus reducing the effort needed to complete the entire form and saving time for the entire team.
Set Value allows you to automate the form and minimize the risk of human error. In this functionality, we can define the conditions for which the field will take the selected value, depending on choices the user already made in the other field. The value can later be changed by the user or made read-only if that is only one that is correct for that combination of selections.
How we built it
Dynamic Forms was built on the Forge platform using Custom UI and Custom UI Bridge for secure integration with Jira. We built the frontend relying on Custom UI and we used Atlaskit components. For storing data we used App Storage.
The app consists of a backend part where we communicate with Jira and Forge Storage. We also use UIM Data Storage from UI Modification. The data in UIM data is correlated with the project and issue type, i.e. when a specific project and issue type is selected on the Create Issue Screen, UIM will retrieve data from UIM Data for them, on the basis of which we can hide, set fields for reading and set value for them.\ All views are built in React. The information is passed to the backend using Forge Bridge.
Challenges we ran into
One of the biggest challenges is Forge magazine itself. Searching for information in it is not easy, and the data model must be perfectly made to fit the entire configuration. This is something that will still require our attention.\ The second thought for us was the implementation of cooperation between the Visibility rules and the Set Value rules. There were many different cases that could break our setup and we had to think about all of them. Taking all this into account, we tried to optimize the application to be responsive to the user. We focused a lot here and it was quite challenging.\ The last little challenge was understanding very well how the Set Value methods work together with Create screen to implement that functionality.
Accomplishments that we're proud of
We are proud of the entire application and our team. We succeed to take advantage of the news in forge UI Modifications and use the Set Value methods. We are also proud that we had the chance to contact the Atlassian team which works on the UI Modification API and cooperate with them a little.\ We are also very happy that with many unsupported fields at this moment we succeed to create a product that can be already used by end users and resolve some of their problems.\ We see that a lot of people have already tried our application and that group is rapidly growing.
What we learned
We learned a lot about the Forge platform and its possibilities. After all, we believe the platform is mature to support more complex applications. During development, we thoroughly explored the new features provided by UI Modification regarding hiding fields and setting values. We also learned what the future of UI Modification is and learned that it is worth communicating with the Atlassian team, which is responsive and helped solve some of our problems related to application development.\ We appreciate the Custom UI which is the answer to the more demanding needs of teams. With it, we can use easily React. Without Custom UI, we wouldn't be able to create the configuration as we planned.
What's next for Dynamic Forms - Visibility & Set Value
Our plans to expand the Dynamic Forms Cloud application are ambitious. We treat support for more fields as a standard application maintenance process. We see the development of the application in the introduction of new functionalities, such as:
- the ability to set fields as required
- a new field type Bundled Field that allows you to define a field as a set of several other fields that can be duplicated in each screen
- Introducing filtering of options in fields based on other fields
- Introduction of support for screens appearing on the transition action
- extending the scope of support for team-managed projects.
Built With
- atlaskit
- figma
- forge
- forge-api
- forge-bridge
- forgeui
- forgeuimodifications
- jest
- react
- react-error-boundry
- react-query
- testing-library-react
- typescript
Log in or sign up for Devpost to join the conversation.