I am new to Forge Development and am trying to develop a simple confluence macro that will do some math on some variable collected from a MacroConfig UI Kit component.
I was able to deploy the app and add the macro to a page but when I attempt to edit the configuration, I get an error stating “Failed to load Trace ID: undefined Validation error”
Here is my index:
import ForgeUI, { render, Fragment, Macro, Text, MacroConfig, useConfig } from "@forge/ui";
//defines the defaults for variables in the Macro Configuration
const defaultVariables = {
x: 0,
y: 0
};
const App = () => {
//Retrieve the configuration
const variables = useConfig() || defaultVariables;
//performs addition of 'x' and 'y'
const addition = variables.x + variables.y
return (
<Fragment>
<Text>Math</Text>
<Text>Variables</Text>
<Text>x = {variables.x}</Text>
<Text>y = {variables.y}</Text>
<Text>Addition</Text>
<Text>{variables.x} + {variables.y} = {addition}</Text>
</Fragment>
);
}
export const run = render(
<Macro
app={<App />}
/>
);
// Function that defines the configuration UI
const Config = () => {
return (
<MacroConfig>
{/* Form components */}
<TextField name="x" label="x = " defaltValue={defaultVariables.x} />
<TextField name="y" label="y = " defaltValue={defaultVariables.y} />
</MacroConfig>
);
}
export const config = render(<variables />);
Here is the Manifest:
modules:
macro:
- key: confluence-math-macro-hello-world
function: main
title: Math
description: Performs Math from variable in the macro config
config:
function: config-function-key
function:
- key: main
handler: index.run
- key: config-function-key
handler: index.config
app:
id: ari:cloud:ecosystem::app/705914aa-3535-43cc-9681-d4c6fcabd5a4
Attached is a screenshot.
I did run npm install @forge/ui@latest --save
and re-deployed , to no avail.