Creating a new plugin with forge for TextField

Forge Forge UI Kit and Custom UI
,
1

I am learning how to use forge to create apps on Confluence Cloud and I did some tutorials that Atlassian has in the documentation, but when I try to make my own, where I would provide a TextField as a macro to the user with a DIV property of “NoPrint” I am not able to render the textfield in the uploaded macro.

With different settings I get only null, empty field or an error “Something went wrong. Trace ID. There was an error invoking the function - windows is not defined.”

Here is my current setup, that does not produce errors, but it doesn’t work either, as it does not render textfield where user can input the content.

File:
src/index.js

import ForgeUI, { Macro, TextField, render } from '@forge/ui';

const App = () => {
  return (
    <Macro
      key="non-printable-area"
      render={({ content }) => {
        console.log('Content:', content);
        return (
          <div className="noprint">
            {content}
          </div>
        );
      }}
    >
      <TextField name="content" label="Content" />
    </Macro>
  );
};

export const handler = render(<App />);

File:
static/hello-world/build/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Non-Printable Area Macro</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="root"></div>
    <script src="main.js"></script>
</body>
</html>

File:
static/hello-world/build/main.js

document.addEventListener('DOMContentLoaded', () => {
    const root = document.getElementById('root');
    const contentPlaceholder = root.getAttribute('data-content');
    root.innerHTML = `<div class="noprint">${contentPlaceholder}</div>`;
});

File:
static/hello-world/build/styles.css

@media print {
  .noprint {
    display: none;
  }
}

I have the same three files duplicated in folder static/hello-world/public, but this is probably a mistake, I could not figure out a correct location. The last file is manifest.json which is very basic:

modules:
  macro:
    - key: noprint
      function: resolver
      title: mistral
      description: Inserts a non-printable section!
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: static/hello-world/build
app:
  runtime:
    name: nodejs18.x
  id: ....

I can deploy the app with forge, I tried many different variations and also if I can see something useful in console.log through the tunnel, but apparently I will need to read much more documentation to make this work.

Can somebody comment if at least the idea is correct - that I need a TextField with a DIV NoPrint?

2

Hi @janez_m,

Hmm, your manifest doesn’t look quite right, and it looks like you’re using the old version of UI Kit, which will be deprecated in February. In UI Kit apps, you don’t have access to a <div> element, you must use UI kit components - the benefit is that these components are pre-build and align with the Atlassian design standards. If you prefer more freedom, you may want to consider a Custom UI app. To learn more about the UI options in Forge check out Forge platform concepts - UI options in Forge

If you’re learning to use forge I’d recommend using the latest version of UI kit (or Custom UI), and starting out with one of our tutorials which will guide you to create a macro with the forge cli to ensure you have the latest version of packages, and manifest structure.

The Macro documentation has links to a few different tutorials that you’ll find useful.

I hope this helps,
Mel

1 Like