Best Practices for Migrating Custom UI from Connect to Forge with Incremental Integration

Forge Adopting Forge from Connect
1

We currently have a Connect app that includes a custom UI (BW), which interacts with our backend (BAS) via REST APIs and RTC WebSockets.

Internally, we have migrated this app to Forge, following the guidance provided in this documentation. The migrated app functions as expected; however, it does not utilize any native Forge features beyond deployment.

We would like to know if it’s possible to integrate a Forge-native UI component, such as a button, to invoke our existing Connect modules. This would allow us to incrementally add functionality without needing a full rewrite.

Additionally, we have started a proof of concept using Forge Remote (documentation here), and it is working on the backend side. However, we are unsure if this approach is suitable for integrating our existing custom UI or if a different solution is recommended.

Any insights or best practices regarding this incremental integration approach would be greatly appreciated.

1 Like
2

Hi,
I would suggest to start small. Identify some key UI elements where adding Forge-native components would make sense, like improving user interaction or streamlining functionality.
You can add these Forge components incrementally through Custom UI in Forge, making sure they play well with both your custom frontend and backend APIs

3

This is the right path forward. Nice work!

Forge remote is an excellent solution if you want to make your new Forge components talk to your Connect back-end. You should also be able to use Forge Remote to let your Connect back-end call Forge APIs and Storage.

In this way, you should be able to call from Forge to your Connect services and from Connect services to your Forge APIs.

In fact, it would be better to just think of your Connect service as a Forge Remote now.

My team specifically prioritised making sure that you could use Forge Remote for this purpose (along with it’s existing purpose of just being able to communicate easily with off Atlassian services.

2 Likes
4

It’s very straightforward to do if you’re using atlassian-connect-express or atlassian-connect-spring-boot - check the docs in the relevant repo under “Forge” for instructions:

1 Like
5

Thank you for all the responses and advice! Currently, our main question concerns the type of “Custom UI” to use for integrating our editor.

The requirement we have, and which is working with Connect, is to open the editor’s UI in full screen.

Using the AP Dialog control (documentation), our application can open the editor at the maximum viewport size using the following code:

AP.dialog.create({
    key: key,
    chrome: false,
    width: "100%",
    height: "100%",
    size: "maximum",
    closeOnEscape: false,
});

ezgif-7-a7ce6a430a

Is it possible to achieve the same effect using Forge?

1 Like
6

This topic was automatically closed after 30 days. New replies are no longer allowed.

8

Hello

Right now, the closest to a fullscreen experience that we offer is the viewportSize: max option for the custom macro configuration:

macro:
  - key: my-macro
    ...
    config:
      resource: macro-config
      render: native
      viewportSize: max

However this still has a very small border around the edge of the screen.

For a “true” fullscreen experience, we are using FRGE-557 to track interest in this suggestion. Feel free to follow that ticket for updates and add any additional thoughts or context there.

2 Likes