Confluence Macro using Forge and Custom UI

How to build a Confluence Macro (using Forge) containing a simple TextField (https://developer.atlassian.com/platform/forge/ui-kit-components/form/#textfield) and also rendering a Badge (https://atlassian.design/components/badge/examples)? It could be anything else using a Custom UI:

Following the example described in (https://developer.atlassian.com/platform/forge/build-a-custom-ui-app-in-confluence/) then:

  • replacing confluence:contentBylineItem with macro in manifest.yml
  • replacing source code in static/hello-world/src/App.js with:
import React from 'react';

function App() {
  return (
    <div>
      <p>Hello World from Custom UI!</p>
    </div>
  );
}

export default App;
  • building the asset(s)
  • deploying Confluence macro

The above only displays the … defined in Forge but I cannot find anything from Custom UI (e.g Hello World from Custom UI!) getting rendered.

Any example(s)?

2 Likes

Heya @RafaelPintoSperafico

The above only displays the … defined in Forge but I cannot find anything from Custom UI (e.g Hello World from Custom UI! ) getting rendered.

Could you explain whats happening here in a bit more detail? Are you only seeing a loading state?

All design system components can be used in a Custom UI Confluence macro

The UI Kit components listed here https://developer.atlassian.com/platform/forge/ui-kit-components/ can only be used in UI Kit extensions. The Design System components here Overview - Brand - Atlassian Design System can be used in Custom UI extensions (or any other React app).

Does that clear up some of your questions?

Hi there,

Did anyone get this working, are there any examples out there for developers to understand how to:

Write a forge app for Confluence, with macros using custom UI and editable macro configuration, that can be passed between the client and server (as needed) so that the backend custom rendering has knowledge of the macro parameters etc…

I really would like to know how to do this, I have been pouring over the documentation now for about 3 solid days and can’t work out how this can be done.

Basically, I am trying to port an existing plugin developed for the Server into something similar using Forge, but struggling.

Cananyone help?

1 Like