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?