Validating custom fields data with Forge

Forge Forge UI Kit and Custom UI
1

Hi there,

this is a two part question:

  1. Is there a way to implement validation of custom fields? We have some fields that needs validation (without Issue transition), my idea is when you try input data into field the Forge up will validate this data before Jira save new data. Is this possible?

  2. Can I make editable custom field no-editable with Forge just for specific users?

Thank you

2

Since you want to validate before submitting, I would choose a mix of UI driven and backend validation using resolvers https://developer.atlassian.com/platform/forge/runtime-reference/forge-resolver/ so it would look something like this

const [input, setInput] = useState("");
const [showError,setShowError] = useState(false):

useEffect(() => {
  const delayAfterInput= setTimeout(() => {
     validate(input);
  }, 1000)
return () => clearTimeout(delayAfterInput);
}, [input]);

async function validate(input){
 try {
  await invoke('validateOnServer',{input}).then(setShowError);
 } catch (error) {
  console.error(error);
 }
}

resolver.define('validate', async (input) => {
 // do stuff
 return response;
}

Regarding your second question:
I’m sorry I cant help much since I didn’t dove into this topic yet, but this ui component https://developer.atlassian.com/platform/forge/ui-kit/components/empty-state/ indicates for me that this should also be somewhat possible.

Best regards

3

thank you for you response.

Will this work if the field is not rendered by Forge but its custom field rendered by Jira?

For example: Validating Summary: If the user try to edit Summary of the Issue can I apply this validation and prevent saving these changes in Jira if data are not valid based on my validation rules defined in Forge?

thank you

5

Hi @janambroz,

This is indeed possible using the UI Modification API in Forge. Here’s how you can approach each part of the question:

1. Validating Custom Fields (without Issue Transition):

  • Partial Solution: You can partially achieve this by using the onChange callback function. This function allows you to detect when the data in a custom field changes. If the data doesn’t meet your validation criteria, you can clear the value in the field to prevent the invalid data in the field.
  • Limitations: However, there is no direct way to display an error message on the field itself using Forge. As a workaround, you could use a product flag to notify the user of the validation error (though this approach is not ideal as it might not provide the best user experience).

Reference:

2. Making a Custom Field Non-Editable for Specific Users:

  • Complete Solution: This can be done effectively by using the onInit callback function. During the initialization, you can check the user’s permissions or roles and conditionally set the visibility of the field. If the user doesn’t meet the criteria, you can make the field non-editable (or completely hide it).
  • Consideration: Keep in mind that UI modifications are applied after the issue view has finished loading. This means that users may briefly see the field before it is hidden or made non-editable by the UI Modification logic.

Reference:

2 Likes