Forms

1

import ForgeUI, { Form } from "@forge/ui";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import ForgeUI, {
  render,
  Button,
  Form,
  Fragment,
  TextField,
  CheckboxGroup,
  Checkbox,
  Macro,
  useState,
  Text,
} from "@forge/ui";

const App = () => {
  // useState is a UI kit hook we use to manage the form data in local state
  const [formState, setFormState] = useState(undefined);

  // Handles form submission, which is a good place to call APIs, or to set component state...
  const onSubmit = async (formData) => {
    /**
     * formData:
     * {
     *    username: 'Username',
     *    products: ['jira']
     * }
     */
    setFormState(formData);
  };

  const goBack = () => {};
  const cancel = () => {};

  // The array of additional buttons.
  // These buttons align to the right of the submit button.
  const actionButtons = [
    <Button text="Go back" onClick={goBack} />,
    <Button text="Cancel" onClick={cancel} />,
  ];

  return (
    <Fragment>
      <Form onSubmit={onSubmit} actionButtons={actionButtons}>
        <TextField name="username" label="Username" />
        <CheckboxGroup name="products" label="Products">
          <Checkbox defaultChecked value="jira" label="Jira" />
          <Checkbox value="confluence" label="Confluence" />
        </CheckboxGroup>
      </Form>
      {formState && <Text>{JSON.stringify(formState)}</Text>}
    </Fragment>
  );
};

export const run = render(<Macro app={<App />} />);

1

import ForgeUI, { MacroConfig } from "@forge/ui";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import ForgeUI, { render, MacroConfig, TextField } from "@forge/ui";

const defaultConfig = {
  name: "Unnamed Pet",
  age: "0"
};

const Config = () => {
  return (
    <MacroConfig>
      <TextField name="name" label="Pet name" defaultValue={defaultConfig.name} />
      <TextField name="age" label="Pet age" defaultValue={defaultConfig.age} />
    </MacroConfig>
  );
};

export const config = render(<Config />);

1

import ForgeUI, { CheckboxGroup, Checkbox } from "@forge/ui";

1
2
3
4

<CheckboxGroup label="Products" name="products">
  <Checkbox value="jira" label="Jira" />
  <Checkbox value="confluence" label="Confluence" />
</CheckboxGroup>

1
2
3
4

{
  // ...other form data
  product: ["jira"];
}

1

import ForgeUI, { DatePicker } from "@forge/ui";

1

<DatePicker name="date" label="Appointment Date" description="Appointment must be made 1 day in advance"/>

1
2
3
4

{
  //... other form data
  date: "2019-11-01";
}

1

import ForgeUI, { FormCondition } from "@forge/ui";

1
2
3
4
5
6

<CheckboxGroup label="More options" name="JQLOption">
  <Checkbox label="Run a JQL Query" value="true" />
</CheckboxGroup>
<FormCondition when="JQLOption" is={['true']}>
  <TextField label="JQL Query" name="query" />
</FormCondition>

1

import ForgeUI, { RadioGroup, Radio } from "@forge/ui";

1
2
3
4
5

<RadioGroup name="flavor" label="Pick a flavor" description="Add a flavor to your recipe">
  <Radio defaultChecked label="Strawberry" value="strawberry" />
  <Radio label="Cinnamon" value="cinnamon" />
  <Radio label="Chocolate" value="chocolate" />
</RadioGroup>

1
2
3
4

{
  //... other form values
  flavor: "strawberry";
}

1

import ForgeUI, { Range } from "@forge/ui";

1
2
3
4
5
6
7

<Range
    label="Range"
    name="my-range-field"
    min={1}
    max={10}
    step={1}
/>

1

import ForgeUI, { Select, Option } from "@forge/ui";

1
2
3
4
5

<Select label="With a defaultSelected" name="milestone">
  <Option defaultSelected label="Milestone 1" value="one" />
  <Option label="Milestone 2" value="two" />
  <Option label="Milestone 3" value="three" />
</Select>

1

milestone: "one";

1
2
3
4
5
6
7
8
9

// nothing selected
{
  milestone: [];
}

// multiple selections
{
  milestone: ["one", "two"];
}

1

import ForgeUI, { TextArea } from "@forge/ui";

1

<TextArea label="Message" name="message" />

1
2
3
4

{
  //... other form data
  message: "user input";
}

1

import ForgeUI, { TextField } from "@forge/ui";

1

<TextField label="Name" name="name" />

1

import ForgeUI, { Toggle } from "@forge/ui";

1

<Toggle label="Show section" name="isSectionVisible" />

1

import ForgeUI, { UserPicker } from "@forge/ui";

1

<UserPicker label="User" name="user" />

1

user: "1a2345bc6789012d3e45f67";