A custom field type that behaves mostly like a label

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
image

2 Likes

@anon73176907 I was interested in this as well. It’s a handy inline editor they provide for lists of strings however it’d be nice to be able to extend that experience with your own select input and validation options. AFAIK the CustomFieldEdit form always renders in a dialog and not inline. And even if you went that route I’m not sure you could recreate the function of the default inline editor atlassian offers without CustomUI (which I don’t think is available here).

1 Like

@anon73176907 Thanks for sharing! We have CustomFieldEdit inline component on the radar. We are gathering interest, likes and comments are more than welcomed.

3 Likes

Thanks @JakubMierzewski. Is there a jira for this or something that I can follow?

I have added a ticket for it [FRGE-243] - Ecosystem Jira

1 Like