CustomFieldType on createIssueScreen does not work

Forge Forge UI Kit and Custom UI
, ,
1

Hi I wanted to try out my customFieldType Module with my customUI edit view on the create Issue Panel. The edit panel works fine, however, when I try to create the issue, the custom field shows up but renders an error

Trace ID: 6e5573fe3fe148b6
There was an error invoking the function - Unexpected end of JSON input

SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at Object.json (bootstrap.js:1:3974)
    at view.js:30787:57
    at async view.js:27574:21
    at async view.js:27011:31

I even cut down the edit view to only print hello world but it still won’t render. Has anybody else experienced this? am I missing something in the manifest?

here my manifest.yml modules

jira:customFieldType:
    - key: my-field
      name: CustomField
      description: description
      icon: https://www.atlassian.net/s/-dtzt95/b/3/76abc0a251b764dce0dd1e7d9861a9151d5f04ad/_/download/resources/com.atlassian.jira.plugin.system.customfieldtypes:select/customfieldpreview.png
      type: string
      collection: list
      function: viewField
      edit:
        resource: editRes
      contextConfig:
        resource: configureContextRes
        layout: basic
2

Hi @MichaelIlewicz, can you send me the code of editRes?

3

@AdamSuchcicki here you go, as I mentioned, I commented out everything for testing and the error still occurs on the create view while edit view (in the modal) works fine

import { QueryClient, QueryClientProvider } from "react-query";
import * as IP from "./mylib";
import { createContext } from "react";

const queryClient = new QueryClient();
export const initialConfig = { jql: "", showKey: false, showSummary: false, maxNumberOfPicks: 1 };
export const ExtensionContext = createContext<IP.CustomFieldTypeContext | undefined>(undefined);
export const FieldConfig = createContext<IP.IssueFieldTypeConfig>(initialConfig);

function App() {
  return (<p>Hello World</p>)
  //   <QueryClientProvider client={queryClient}>
      
  //     <myComponent />
  //   </QueryClientProvider>
  // );
}

export default App;
4

Hi @MichaelIlewicz
To be honest I don’t see why it wouldn’t work for you. Maybe you could start with trying to deploy a simple app with just hello world and comment out the part with:

const queryClient = new QueryClient();
export const initialConfig = { jql: "", showKey: false, showSummary: false, maxNumberOfPicks: 1 };
export const ExtensionContext = createContext<IP.CustomFieldTypeContext | undefined>(undefined);
export const FieldConfig = createContext<IP.IssueFieldTypeConfig>(initialConfig);

and add them iteratively to see exactly when it breaks?

5

Hi Pawel, thanks for looking at this too. I did as you suggested and realized that the error is actually in the view not the edit part, then I realized I was trying to use the issue key to get the context configuration which of course doesn’t exist yet so I changed that to use project key and issue type id which solved my issue.

By the way, any chance there will be an inline option for custom UI for custom field types? the UI Kit is still very very limiting and my field would integrate perfectly well into the UI. Now I need to open a modal for a simple select field

1 Like
6

Hi @MichaelIlewicz, I’m very happy you’ve managed to solve your issue. About inline option for custom UI - we’re currently working on this one and soon we’ll release it. I’ll write a message about this incoming change in announcements soon :wink: