I am attempting to create a custom field type that has mostly the same functionality as a removable tag from https://atlassian.design/components/tag/examples in forge.
My issue is that the tags that I want (screen shot 1) seem to be only available when the function and edit sections
from the yml below are commented out as well as the entire index.jsx, which makes this field essentially just a label.
As noted here
https://developer.atlassian.com/platform/forge/ui-kit-components/custom-field/
The available elements below do not include tags.
So my question is: Is there a defined way to make a custom field in forge that looks like a label and has the same inline editable functionality?
My manifest
modules:
jira:customField:
- key: formsplugin4
name: formcode
description: Enter your formcodes
data:
type: string
collection: list
storage:
issueProperty:
key: formcodeCustomField
readOnly: false
function: main
edit:
function: edit
function:
- key: main
handler: index.runView
- key: edit
handler: index.runEdit
My index.jsx with an attempt to recreate it with text fields
import ForgeUI, { CustomField, CustomFieldEdit, render, Text, TextField, useProductContext } from "@forge/ui";
import {fetch } from '@forge/api';
const View = () => {
const { extensionContext: { fieldValue } } = useProductContext();
var rows = [];
for(var i = 0; i<fieldValue.length;i++ ){
rows.push(<Text content={`${fieldValue[i]}`}></Text>)
}
return (
<CustomField>
{rows}
</CustomField>
);
};
const Edit = () => {
const onSubmit = values => {
//validation and other processing including a network call to our server that is omitted from this file
};
return (
<CustomFieldEdit onSubmit={onSubmit}>
<TextField name="text" label="formcodes entered here _ delmited"></TextField>
</ CustomFieldEdit>
);
}
export const runView = render(
<View/>
);
export const runEdit = render(<Edit/>)
Screen shot 1