Six ways we’re making Custom UI Bridge more powerful

Reading Time: 3 minutes

Custom UI is the flexible way to build to build complex and interactive user experiences on Forge. The Custom UI Bridge is a JavaScript API that allows you to seamlessly integrate those experiences with Atlassian products. You can use it to call product APIs, your backend Forge functions, navigate a user’s browser, open modals and much more.

Over the past few months, we've made a number of enhancements to the Custom UI Bridge. In this post, we'll run through six newly available improvements you can start using today to build more seamless user experiences on Forge.

1. Extension points that talk to each other

We've added a new Events API which lets different extension points within your app communicate with each other. Your UI extension points can emit and receive arbitrary events to share information without delay.

For example, if you were building a Jira app with a custom field and an issue panel, you could use events to dynamically update one when the user interacts with the other. Or, as shown below, you might have two different dashboard gadgets that interact with each other in some way.

The left gadget updates the click count in the right gadget using the Events API

2. Bigger, better modals

Based on your feedback, we've added a bigger Modal size: max. This new size gives you almost the entire screen for building complex interactions and visualisations. We've just kept a narrow border around the outside to maintain the modal experience.

You can also prevent users from accidentally closing the modal by clicking outside of it using closeOnOverlayClick or pressing the escape key using closeOnEscape. This is great for more complex interactions when you want to be sure the user has finished what they're doing before they close the modal.

3. Speaking your language

The getContext method on the view object now includes the user’s locale and timezone so you can internationalize the interface within your Custom UI apps. We still have some work to do to let you internationalize the static strings in your app manifest (e.g. title) but we'll have more news on that later this year.

Awesome! My app can now speak all the languages supported by Atlassian

4. Reload or refresh

The new reload method on the router object allows you to reload the parent page, meaning you can keep the page up-to-date as your app works its magic behind the scenes.

Even better, extension points on the Jira issue view can use the refresh method to repeatedly fetch the data for the parent page without performing a full-page reload. That allows you to keep the parent page up-to-date in an even more seamless way.

5. Alert users with flags

The showFlag bridge method allows you to open flags on the parent page so you can bring some important information to a user's attention. Whether you're letting them know a certain action has been completed, warning them something isn't quite right, or letting them know an error has occurred, flags can help you get the user’s attention at the right time.

6. Permission to do more

Finally, we've added two new permissions to the Custom UI iframe: clipboard-write and display-capture. This means you can build a smoother experience for users that need to copy some data to their clipboard or let users share the content on their screen.

What’s next?

For now, this new functionality is only available in Custom UI but we plan on making it available to UI Kit apps in the future. In fact, we're planning on making some big improvements to UI Kit over the next couple of quarters so stay tuned.

The new and improved Custom UI Bridge is part of our ongoing initiative to bring your favourite Atlassian Connect features over to Forge. With these improvements—plus updates we're making across the platform—Forge is growing more flexible and powerful every day.

Get a first look at new Forge features by joining us at our next Forge roadmap webinar on August 23. We'll be answering questions about the updates you've read about today, plus changes to storage, monitoring, new product support, and more. Sign up to be notified about future developer community events at https://ace.atlassian.com/atlassian-developers/.