How do we render 3rd party custom fields in a custom entry editor interface?

Ecosystem App Framework & UI Extensions
1

Hey All,

We are looking to build a custom editor interface page to add additional functionality to this experience.

We have a proof of concept working with all of the default fields, however 3rd party editors do not show. They have their title/label but the component itself does not render.

Here’s a snippet of our proof of concept, where we are able to render the default fields:

  // Render default contentful fields using Forma 36 Component
  const DefaultField = (props: DefaultFieldProps) => {
    const { fieldId, sdk, widgetId } = props;
    return (
      <FieldWrapper sdk={sdk} name={fieldId} showFocusBar={true}>
        <Field sdk={sdk} widgetId={widgetId!} />
      </FieldWrapper>
    );
  };



  return (
    <>
      { 
        editorFields.map((field) => {
          const control = sdk.editor.editorInterface.controls!.find(
            (control) => control.fieldId === field.id
          );

          const widgetId = control?.widgetId || null;

          return (
            <DefaultField
              key={field.id}
              fieldId={field.id}
              sdk={ getFieldExtensionSdk(field.id, sdk) }
              widgetId={widgetId}
            />
          )
        })
      }
    </>
  );

Screenshot 2023-09-11 at 5.27.21 PM

The ‘title’ field (a regular text input) is showing, however ‘metaData’ is not rendering as a custom field as it should

Does anyone have a clear example of how to render our custom fields which are installed as other apps without re-writing them into this custom extension?