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_ · Accepted solution]

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>
);

[Ádám Smiló]

I added this hook to the code, it gets the context and correctly, I tested it with console.log commands, but it can't set the value for some reason. Do you know how can I debug this?

[Tuncay Senturk _Snapbytes_]

Tracking the logs is how you debug your code.

You need to add logs to identify where the problem lies and fix it accordingly.

[Ádám Smiló]

I added these console logs to the code:

useEffect(() => {

view.getContext().then((context) => {

console.log(context.extension.fieldValue);

if (context.extension.fieldValue != "") {

setValue(context.extension.fieldValue);

console.log("Set value ran");

}

});

}, []);

And I can see the value, as well as the confirmation log message that the set value ran. However it still does not put the field value into the textbox.

[Tuncay Senturk _Snapbytes_]

Hmm, I'm not sure but it is worth trying to only render when value is defined.

Could you try the below updated code?

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(undefined); // Start as undefined

useEffect(() => {
  view.getContext().then((context) => {
    console.log(context.extension.fieldValue);
    const existingValue = context.extension.fieldValue || "";
    setValue(existingValue);
    console.log("Set value ran");
  });
}, []);

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

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

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

[Ádám Smiló]

I switched to this code, same outcome

[Ádám Smiló]

Sorry, even though I deployed the new test version in the morning, the old was still cached. The defined render did the trick, thank you!