Can you add the previous value into a custom field in edit mode?

Ádám Smiló

I wrote a simple jira plugin which adds links to revision numbers in a custom field, however when I enter edit mode, it clears the field even if there was a previous value in it.

Code looks like this:

import React, { useState, useEffect } from 'react';

import ForgeReconciler, {

Text, Link

} from "@forge/react";

import { view } from '@forge/bridge';

const View = () => {

const [fieldValue, setFieldValue] = useState("");

useEffect(() => {

view.getContext().then((context) => { setFieldValue(context.extension.fieldValue) });

}, []);

console.log(fieldValue);

if (fieldValue == null)

return (

<>

<Text>No value</Text>

</>

);

const baseURL = 'https://foo.bar/project';

const numbers = fieldValue?.split(' ');

let links = [];

numbers.forEach ((element, index) => {

links.push (<Link href={baseURL + element} openNewTab={true}>{element}</Link>);

if (index != numbers.length - 1)

links.push (' ');

});

return (

<>

<Text>{links}</Text>

</>

);

};

ForgeReconciler.render(

<React.StrictMode>

<View />

</React.StrictMode>

);

Edit.jsx code:

import React, { useState, useCallback } from "react";

import ForgeReconciler, { Textfield } from "@forge/react";

import { CustomFieldEdit } from "@forge/react/jira";

import { view } from "@forge/bridge";

const Edit = () => {

const [value, setValue] = useState("");

const onSubmit = useCallback(() => {

view.submit(value);

}, [view, value]);

return (

<CustomFieldEdit onSubmit={onSubmit}>

<Textfield

onChange={(e) => {

setValue(e.target.value);

}}

/>

</CustomFieldEdit>

);

};

ForgeReconciler.render(

<React.StrictMode>

<Edit />

</React.StrictMode>

);

I tried using context values and get them with the same useEffect function that is used in the frontend code, nodejs crashes no matter what I tried. Is this even possible to implement with the current forge version?

Tuncay Senturk _Snapbytes_

Hi @Ádám Smiló 

You are not initializing the field with its current value, so it shows an empty field when editing and submits an empty string unless the user manually re-enters it.

 

In Edit.jsx, you're not using view.getContext() to load the current field value. As a result, the field resets to "" in edit mode and clears the value on submit.

It should be something like the below.

import React, { useState, useEffect, useCallback } from "react";
import ForgeReconciler, { Textfield } from "@forge/react";
import { CustomFieldEdit } from "@forge/react/jira";
import { view } from "@forge/bridge";

const Edit = () => {
const [value, setValue] = useState("");

// Load the current field value when the edit view is opened
useEffect(() => {
view.getContext().then((context) => {
if (context.extension.fieldValue != null) {
setValue(context.extension.fieldValue);
}
});
}, []);

const onSubmit = useCallback(() => {
view.submit(value);
}, [value]);

return (
<CustomFieldEdit onSubmit={onSubmit}>
<Textfield
value={value}
onChange={(e) => {
setValue(e.target.value);
}}
/>
</CustomFieldEdit>
);
};

ForgeReconciler.render(
<React.StrictMode>
<Edit />
</React.StrictMode>
);