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 https://atlassian.design/components can be used in Custom UI extensions (or any other React app).

Does that clear up some of your questions?