UI-Kit CustomField: View only rendered once on edit

Forge Forge Modules and Product Triggers
, ,
1

Hi Community,

this my first try on a forge customField and i’ve actually a problem with rendering the view on a UI-Kit CustomField. The CustomField can be edited by a popover with a UserPicker. On the first submit from the edit-dialog it all works fine and the view is renderd correctly. But if i edit the CF again and change the picked user the view isn’t rendered anymore on submit.
(Just for completion: The view uses the accountId to find issues where the user is already reporter and displays that.)

here are the view and edit handlers. maybe anybody has a clue what i’am doing wrong?

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

  var issues;
  var userDisplayName;
  var accountId;

  if(fieldValue){ 
    accountId = fieldValue.customer;
    [issues] = useState(async () => await fetchIssues(context.platformContext.projectKey, accountId));
    [userDisplayName] = useState(async () => await getUsernameByAccountId(accountId));
   }

   console.log("renderContext=" + renderContext);
   console.log("accountId=" + accountId);

  return ( 
    <CustomField>
      <Text
        content={`${userDisplayName || "Please pick a User/Customer ..."}`}
      />
        {(issues && issues.length>0)? (
              <Text>
                {`is already reporter in ${issues.length} tickets in status: `} 
                    <StatusLozenge  text="In progress" appearance="inprogress" />
              </Text>
        ) : (
          <Text>{userDisplayName?`this user has currently no open tickets ...`:""}  </Text>
        )}
    </CustomField>
  );
};

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

  const onSubmit = values => {
    console.log("Submitting accountId=" + values.customer);
    return values;
  };
   
  //console.log("stored accountId=" + accountId);
   
  return (
    <CustomFieldEdit onSubmit={onSubmit} header={`Pick User/Customer`}  >
      <UserPicker 
        description="Please pick a user/customer" 
        name="customer" 
        defaultValue={`${fieldValue}`}
      />
      
    </ CustomFieldEdit>
  );
}
2 Likes
2

I finally found the problem, you need to replace
const { extensionContext: { fieldValue } } = useProductContext();
with
const { extensionContext: { fieldValue, fieldId, fieldType } } = useProductContext();
even if you dont use fieldId and fieldType!
I came to this point, while reading the documentation carefully. But other examples used to make it like i did before.
And above all, I lack the understanding of why the view was rendered once but not a second time …

1 Like
3

Hi @GuntherPelzer
I’m very sorry for the late response. Looking at the code I’m not really sure why it doesn’t re-render when you’re changing the user cause in my opinion it should work properly. Did you manage to find out the reason for that? If not I’ll dig deeper into that. Also, do the console.logs you have with accountId in View function change after you change the user?