I’m getting errors when I add a checkbox to the Dashboard Gadget configuration. I am writing the gadget using Custom UI so I can add graphs and charts to the Gadget.
The edit config works great without the checkbox, but as soon as I add the checkbox, I get an error in the browser:
Here is my ‘Edit’ code:
import React, { useEffect, useState } from 'react';
import Form, { Field } from '@atlaskit/form';
import TextField from '@atlaskit/textfield';
import Button, { ButtonGroup } from '@atlaskit/button';
import { Checkbox } from '@atlaskit/checkbox';
import { view } from '@forge/bridge';
function Edit() {
const [defaultValues, setDefaultValues] = useState({
assetQuery: '',
countField: '', // Field to count
chartLabel: '',
chunkSize: 1000, // Default chunk size set to 1000
groupField: '', // Field for dataset grouping
separateField: '', // Field to separate datasets
isDateField: false, // Checkbox for date field
});
useEffect(() => {
view.getContext().then((context) => {
const config = context.extension.gadgetConfiguration || {};
setDefaultValues({
assetQuery: config.assetQuery || '',
countField: config.countField || '',
chartLabel: config.chartLabel || '',
chunkSize: config.chunkSize || 1000,
groupField: config.groupField || '',
separateField: config.separateField || '',
isDateField: config.isDateField || false,
});
}).catch((err) => {
console.error('Error fetching context:', err);
});
}, []);
const onSubmit = (formData) => view.submit(formData);
return (
<Form onSubmit={onSubmit} defaultValues={defaultValues}>
{({ formProps, submitting }) => (
<form {...formProps}>
<Field name="assetQuery" label="Enter the AQL Query" defaultValue={defaultValues.assetQuery}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<Field name="chartLabel" label="Enter the label for the chart" defaultValue={defaultValues.chartLabel}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<Field name="chunkSize" label="Enter the number of records retrieved per call. To avoid query timeouts, choose a number that can be retrieved within 20 seconds. All records will be returned, but in chunks of this size. The default is 1000 records per call." defaultValue={defaultValues.chunkSize}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<Field name="groupField" label="Enter the field name to use for the bars in the chart" defaultValue={defaultValues.groupField}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<Field name="isDateField" defaultChecked={defaultValues.isDateField}>
{({ fieldProps }) => (
<Checkbox {...fieldProps} label="Field is a date field" />
)}
</Field>
<Field name="separateField" label="Enter the field name to use for separating datasets (stacked bar chart, optional)" defaultValue={defaultValues.separateField}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<Field name="countField" label="Enter the field name to use for counting (optional)" defaultValue={defaultValues.countField}>
{({ fieldProps }) => <TextField {...fieldProps} />}
</Field>
<br />
<ButtonGroup>
<Button type="submit" isDisabled={submitting}>
Save
</Button>
<Button appearance="subtle" onClick={view.close}>
Cancel
</Button>
</ButtonGroup>
</form>
)}
</Form>
);
}
export default Edit;
and here is the error I’m getting:
react.production.min.js:19 Uncaught (in promise) Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at B (react.production.min.js:19:404)
at t.useState (react.production.min.js:25:277)
at checkbox.js:164:19
at Za (react-dom.production.min.js:153:146)
at No (react-dom.production.min.js:173:192)
at Es (react-dom.production.min.js:265:425)
at Ol (react-dom.production.min.js:246:265)
at Sl (react-dom.production.min.js:246:194)
at gl (react-dom.production.min.js:239:172)
at react-dom.production.min.js:123:115
