I am trying to make a modal or form appear upon the event of a button click. My code failed to do this when using a modal, so I tried using the example provided in the UI kit docs. This also did not work. As soon as I select the button to trigger a form, I get a blank page.
I am unsure if this is a bug or an issue on my end, but I simply can not get this to work. I can get a modal to pop up if I use a custom UI project, but I would ideally like to use the Forge UI Kit if possible.
I would prefer to get the form popup to work, but either would suffice. The modal code did not work even when I deleted all my code and simply pasted example from Modal UI kit info page.
** Here is the modal code frontend index.js:**
import ForgeReconciler, { Form,
FormHeader,
FormSection,
FormFooter,
Label,
RequiredAsterisk, ModalBody, ModalTransition, ModalTitle, ModalFooter, ModalHeader, ButtonGroup, Stack, Text, Button, Heading} from '@forge/react';
import { invoke } from '@forge/bridge';
//import {Button, Heading } from '@forge/ui';
const App = () => {
const [data, setData] = useState(null);
useEffect(() => {
invoke('getText', { example: 'my-invoke-variable' }).then(setData);
}, []);
const [isOpen, setIsOpen] = useState(false);
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);
return (
<>
<Heading as="h1">Engineering Change Management For Confluence</Heading>
<ButtonGroup appearance="primary"><Button onClick={openModal}>Create New Template</Button> <Button>Edit Existing Template</Button></ButtonGroup>
<ModalTransition>
{isOpen && (
<Modal onClose={closeModal}>
<ModalHeader>
<ModalTitle>Duplicate this page</ModalTitle>
</ModalHeader>
<ModalBody>
<Text>
Duplicating this page will make it a child page of <Strong>Search - user
exploration</Strong>, in the <Strong>Search & Smarts</Strong> space.
</Text>
</ModalBody>
<ModalFooter>
<Button appearance="subtle" onClick={closeModal}>
Cancel
</Button>
<Button appearance="primary" onClick={closeModal}>
Duplicate
</Button>
</ModalFooter>
</Modal>
)}
</ModalTransition>
</>
);
};
ForgeReconciler.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
And the form version:
import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Form,
FormHeader,
FormSection,
FormFooter,
Label,
RequiredAsterisk, ModalBody, ModalTransition, ModalTitle, ModalFooter, ModalHeader, ButtonGroup, Stack, Text, Button, Heading} from '@forge/react';
import { invoke } from '@forge/bridge';
//import {Button, Heading } from '@forge/ui';
const App = () => {
const [data, setData] = useState(null);
useEffect(() => {
invoke('getText', { example: 'my-invoke-variable' }).then(setData);
}, []);
const [isOpen, setIsOpen] = useState(false);
const openForm = () => setIsOpen(true);
const closeForm = () => setIsOpen(false);
return (
<>
<Heading as="h1">E</Heading>
<ButtonGroup appearance="primary"><Button onClick={openForm}>Create New Template</Button> <Button>Edit Existing Template</Button></ButtonGroup>
{isOpen && (
<Form onSubmit={closeForm}>
<Heading as="h3">Create Template</Heading>
<Label labelFor={getFieldId('templateName')}>Template Name</Label>
<Textfield {...register('templateName')} />
<Label labelFor={getFieldId('description')}>Description</Label>
<Textfield {...register('description')} />
<Button appearance="subtle" onClick={closeForm}>Cancel</Button>
<Button appearance="primary" type="submit">Submit</Button>
</Form>
)}
</>
);
};
ForgeReconciler.render(
<React.StrictMode>
<App />
</React.StrictMode>
);