Forge: CustomField - User rendered field is weird

Forge
,
1

Hello there,

I created a CustomField app using CustomUI. When rendering the field using the “server-side” function View, the rendered field is bigger and out of bounds of the edit field. Any way to fix that?
image

const UserView = () => {
  const {
    extensionContext: { fieldValue },
  } = useProductContext();
  return (
    <CustomField>
      <User accountId={fieldValue.accountId} />
    </CustomField>
  );
};

Thanks

2

Hi @vojtechvesely ,

I think the UI is simply aligning the left labels and right values to their respective tops. Here are some screen shots with different label lengths to illustrate this:

image

image

image
image700×160 16.5 KB

This is consistent with the rendering of other fields as shown below:

image

I think this is exacerbated by the Forge <User> component rendering a 32 x 32 pixel avatar whereas Jira renders 24x24 pixel avatars for the reporter and assignee fields.

I’ve created FRGE-1211: User avatar is too large when rendered in a Jira field to address this.

Regards,
Dugald

1 Like
3

Does specify the size of the avatar to small is not enough to make it have the right size, and therefore having the field looks fine?

<User accountId={fieldValue.accountId} size="small" />
4

Hi @SilvreLestang ,

The Forge UI Kit <User> component doesn’t have a size prop.

I know @vojtechvesely mentioned the use of Custom UI, but the snippet is as follows which I also used in my test app:

<CustomField>
  <User accountId={fieldValue.accountId} />
</CustomField>

Regards,
Dugald

5

Thanks for the clarification and for creating the issue.
Honestly, I have no idea how to render fields using CustomUI. The default template for CustomUI CustomField only displays a modal for editing and doesn’t render the field itself and I couldn’t find how to do it in the documentation so I used forge/ui. If there is a way to render the field using CustomUI in the fields pane I would appreciate any hint.
Thanks
Vojtech

6

Hi @vojtechvesely ,

Would you mind posting this as a separate question to the developer community as this mutates the topic somewhat.

Regards,
Dugald