Retain config values on edit

Forge Forge UI Kit and Custom UI
1

Hi,

Is there a way to retain the config values on edit? I have an app that uses the macro-config macro. That accepts the values I have on submit, but when I click the edit button, it brings up the config dialog with empty values (e.g. my text fields are empty).

What approach do people take for this kind of thing with UI Kit 2?

Cheers

1 Like
2

would saveMacro help with this at all? Just found that now

1 Like
3

Interesting. saveMacro seems to be part of the connect JS API and that is EOL

4

Hey @rebx,

There are a few ways to add config values to a macro in Forge at the moment.
I think, based on what you’re after that you may want to use the custom configuration method, which gives you more control.

This tutorial explains how to add custom configuration to a macro, and the following template also works:

Screenshot 2025-05-29 at 10.41.20 AM
Screenshot 2025-05-29 at 10.41.20 AM1264×178 16.6 KB

The template stores and displays the config on edit.

I hope this helps. If it does, please mark this as the solution.
If you have any questions do let me know.

Cheers!
Mel

5

You’ve got to fetch the config via useConfig() and then feed the value to defaultValue on the field.

The code example sucks and is outdated as usual: https://developer.atlassian.com/platform/forge/ui-kit/hooks/use-config/#useconfig

Here’s what you’d do:

import React from 'react';
import ForgeReconciler, { Label, Text, Textfield, useConfig } from '@forge/react';

const App = () => {
  const config = useConfig()
  return (
    <>
      <Text>{config?.foo}</Text>
    </>
  );
};

const Config = () => {
  const config = useConfig()
  return (
    <>
      <Label labelFor="foo">Foo</Label>
      <Textfield id="foo" name="foo" defaultValue={config?.foo} />
    </>
  );
};

ForgeReconciler.render(<App />);
ForgeReconciler.addConfig(<Config />);

There’s also a bug I’m currently trying to bring to Atlassian’s attention too regarding addConfig() because that gets executed on every page view/edit when the macro config UI is not active.

6

Thanks for the reply @nathanwaters! That got my app to display the config values.

Next thing I have to overcome is to find a way to get the value of the defaultValue in the fields that were not changed

7

Something like this?

const default = { name: "bob", color: "red" }

const Config = () => {
  const config = useConfig() || default
  const values = { ...default, ...config } // config values overwrite default

  return (
    <>
      <Label labelFor="name">Name</Label>
      <Textfield id="name" name="name" defaultValue={values.name} />
      <Label labelFor="color">Color</Label>
      <Textfield id="color" name="color" defaultValue={values.color} />
    </>
  );
};

fyi if you’re new to coding the AI code editors are really good now: eg I use Cursor, there’s also Windsurf and many more.

Atlassian should really have a list of these editors in the first Forge getting started page.

1 Like
8

I’ll check it out and mark this as resolved for now. Cheers @nathanwaters!

9

I’m no react dev, and learned about useEffect only last week. I got it to semi-work but had a bug that was because I was exporting my default config to index.jsx. After removing that export, that worked. Thanks all for the help!