Access the whole entity property object from a Forge Jira custom field rendering function

I have the following Forge Jira custom field module defined:

modules:
  jira:customField:
    - key: ecf
      name: ecf
      description: ecf.
      data:
        type: string
        collection: list
        storage:
          issueProperty:
            key: ecf
            path: values
      readOnly: true
      function: main
  function:
    - key: main
      handler: index.runView

index.jsx

const View = () => {
  const { extensionContext: { fieldValue } } = useProductContext(); // ['Value 1', 'Value 2', 'Value 3']
  ...
  return (
      <CustomField>
      ...
      </CustomField>
   );
};

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

Here is the example of the ecf issue property:

{
  "key": "ecf",
  "value": {
    "items": [
      {
        "href": "https://example.com/val1",
        "color": "red",
        "value": "Value 1"
      },
      {
        "href": "https://example.com/val2",
        "color": "blue",
        "value": "Value 2"
      },
      {
        "href": "https://example.com/val3",
        "color": "green",
        "value": "Value 3"
      }
    ],
    "values": [
      "Value 1",
      "Value 2",
      "Value 3"
    ]
  }
}

values fields contains an array of CF values (array of strings). items fields contains metadata for each custom field value with a color and link. To render a CustomField component in index.runView function I to need to access not only the values field but the items field too. It will allow me to render filed values as links with colored badges.

A function that provides the field rendering (index.runView in my case) should be synchronous (doesn’t allow Promise) so there is no way to make any API call. Only primitives or array of primitives can be referenced from a Custom field storage/issueProperty/path, so there is no way to point path to the items field which contains an array of objects.

Is there any way to access an entity property fields except a field referenced in storage/issueProperty/path from a function that provides the field rendering (index.runView in my case)?

Thanks,
Dmitry

2 Likes

Hi Dmitry!

Please try using useIssueProperty UI hook which should return the items as well - https://developer.atlassian.com/platform/forge/ui-kit-hooks-reference/#useissueproperty

Please let me know if it helps.
Thank you,
Mateusz

When it comes to performing a REST call when rendering Custom Field module, it is possible with the use of useAction UI hook - please check out the example below:

import ForgeUI, { CustomField, CustomFieldEdit, useAction, render, Text, TextField, useProductContext } from "@forge/ui";
import api from '@forge/api';

const checkProperties = async () => {
    const result = await api
        .asApp()
        .requestJira(
            `/rest/api/3/issue/SKIP-3/properties`
        );

    return await result.json().then(data => {
        return data;
    })
};

const View = () => {
  const { extensionContext: { fieldValue } } = useProductContext();

    const [value, setValue] = useAction(
        () => checkProperties(),
        () => checkProperties(),
    );

    console.log(value);

  return (
    <CustomField>
      <Text
        content={`Hello ${fieldValue || "world"}!`}
      />
    </CustomField>
  );
};

const Edit = () => {
  const onSubmit = values => {
      return values.text
  };

  return (
    <CustomFieldEdit onSubmit={onSubmit}>
      <TextField name="text" label="Say hello to:"></TextField>
    </ CustomFieldEdit>
  );
}

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

export const runEdit = render(<Edit/>)

This way I got a list of issue properties logged in the console with forge tunnel.

Thank you,
Mateusz

2 Likes