Create Select in a customField

Forge Forge UI Kit and Custom UI
, , ,
1

I just want create in a customfield with a select form.
For my understanding we have to use now the UIKi2 because if I use the example code in the example https://developer.atlassian.com/platform/forge/ui-kit-components/form/ with uikit “import ForgeUI, { Form } from “@forge/ui”;” Than the npm will throw an exception:


If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

Than I found out, I have to use UIKit2:

import { Form } from "@forge/react";

After Deployment the Package, the form is complete defect and just show the default form select element. Because of the next exception

"Warning: <Select /> is using incorrect casing.".

so it seems the import doesnt work too.
It seems also they dont use the UIKit just import like from ‘@atlaskit’; But atlaskit does not have select. So how I can implement just a select Option in a custom field?

2

Ok there are many misunderstanding here, at first

  • UIKit2 are not supported for the customField yet
  • The UIKit is not running on client side, in Forge the pages is generated server side.
    So If I want to use the UIKit than I have to use the Function to generated the View. For Example:
modules:
  jira:customField:
    - key: test-jira-plugin-hello-world
      name: Test
      description: A hello world custom field.
      type: string
      edit:
        function: edit
      function: main
  function:
    - key: main
      handler: index.runView
    - key: edit
      handler: index.runEdit

The function main shows the custom view and the edit call the edit View.

edit.jsx

export const Edit = () => {

    const onSubmit = (formValue) => {
        const copy = JSON.parse(JSON.stringify(formValue));
        console.log("debug");
        return 34;
    };

    return (
        <CustomFieldEdit onSubmit={onSubmit}>
            <Select
                isRequired={true}
                label="Choose summary currency"
                name="currencySummary"
            >
                <Option
                    label="test"
                    value="tester"
                />
            </Select>
        </CustomFieldEdit>
    );
}

View.jsx

export const View = () => {

    return (
        <CustomField>
            <Fragment>
                <Text>Hallo Welt</Text>
            </Fragment>
        </CustomField>
    )
}

index.jsx

export const runEdit = render(<Edit/>);
export const runView = render(<View/>);

than it works.

1 Like