Hello everyone,
I’m developing a custom field using the CustomFieldType module in Forge, but I’m encountering an error on the edit screen. Here is the error message:
Below is my
manifest.yml configuration for the custom field:
- key: multi-issue-picker-field
name: Multi Issue Picker
icon: https://i.ibb.co/pr22Bhd/issue-picker.png
description: An issue multi select field
viewportSize: medium
type: string
collection: list
render: native
validation:
expression: |-
let errorMessage = value ? value.length == 1 ? value[0].includes("64ab65a0-f5de-49b7-8c85-b8b921a91054") : false : false;
errorMessage ? value[0].split("/")[1].slice(0) : true
contextConfig:
resource: config-issue-picker
resource: proxy
edit:
resource: edit-issue-picker-res
resolver:
function: resolver
And here is the relevant part of my edit resource React component:
return (
<React.Fragment>
<Form>
{({ formProps, dirty, submitting }) => (
<>
<h1><span style={{
fontFamily: FONT_FAMILY,
fontSize: 20,
fontStyle: "inherit",
fontWeight: 500
}}>{extension?.fieldName}</span></h1>
<form {...formProps}>
<HelperMessage>Please type the issue summary to search for issues.</HelperMessage>
<Select
isLoading={isLoadingIssues}
isClearable={true}
label="Issues"
name="selectedIssues"
defaultOptions={issues ?? []}
loadOptions={async (inputvalue) => await getIssues(inputvalue)}
isMulti={fieldType.includes("multi")}
placeholder="Start typing the summary"
onChange={(e) => {
setNewSelectedValues(fieldType.includes("multi") ? (e ?? []).map((a) => a.value) : e?.value ? e?.value : null)
}}
placeholder={"Type the summary of the issue"}
value={fieldType.includes("multi") ? (issues ?? []).filter((e) => (newSelectedValues ?? []).includes(e.value)) : (issues ?? []).find((e) => e.value === (newSelectedValues))}
/>
<FormFooter align="start">
<div className="buttonGroup"
style={{
fontSize: 14,
fontFamily: FONT_FAMILY,
fontStyle: "normal",
display: "flex",
width: "100%",
justifyContent: "end",
margin: "0 1.5em 0 1.5em"
}}>
<Button
appearance="subtle"
onClick={view.close}
>
Cancel
</Button>
<LoadingButton
isLoading={isSubmitting}
onClick={onSubmit}
appearance="primary"
isDisabled={submitting}
style={{ marginLeft: 10 }}
>
Submit
</LoadingButton>
</div>
</FormFooter>
</form>
</>
)}
</Form>
</React.Fragment>
);
Any guidance or suggestions would be greatly appreciated. Thank you!