Help with Custom field - Field Preview

Questions
,
1

Hi,

I am in the process of creating a Field Preview for a Custom Form Field. I have the Field Editor working and showing up as expected. I have followed the steps here:Adding A Field Type To Umbraco Forms | Umbraco Forms but the preview will not show up.

Firstly its unclear in the documentation exactly where the preview should show up. My assumption is that is in the record fly-out window that appears in Umbraco backoffice where you can then hit Edit?

Anyway assuming thats correct, then here’s my set up:

  1. Custom Field inherits FieldType
  2. PreviewView property is overridden with the value from the alias in my react component (manifest and umbraco-package.json):

Manifest:

import HospitalDropdownPreviewElement from './hospitalDropdownListFieldType.preview.element.ts';

const facilityPreviewManifest = {
  type: 'formsFieldPreview',
  alias: 'FieldType.HospitalDropdown.Preview',
  name: 'Hospital Dropdown Field Preview',
  api: HospitalDropdownPreviewElement,
  element: () => import('./hospitalDropdownListFieldType.preview.element.ts'),
  elementName: 'hospital-dropdown-preview',
};

export const manifests = [facilityPreviewManifest];

Preview Field:

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import {
  LitElement,
  css,
  customElement,
  html,
  property,
} from '@umbraco-cms/backoffice/external/lit';

const elementName = 'hospital-dropdown-preview';

@customElement(elementName)
export class HospitalDropdownPreviewElement extends UmbElementMixin(
  LitElement
) {
  @property()
  settings = {} as Record<string, string>;

  @property({ type: Array })
  prevalues = [];

  getSettingValue(key: string) {
    return this.settings[key];
  }

  render() {
    return html`<div>123456</div>`;
  }

  static styles = css`
    div {
      padding: var(--uui-size-4);
    }
  `;
}

export default HospitalDropdownPreviewElement;

declare global {
  interface HTMLElementTagNameMap {
    [elementName]: HospitalDropdownPreviewElement;
  }
}

And then here is my main.ts (entry point)

import { manifests as propertyEditorManifests } from './fields/edit/manifest';
import { manifests as fieldPreviewManifests } from './fields/preview/manifest';

const manifests = [...propertyEditorManifests, ...fieldPreviewManifests];

export const onInit = async (_host: any, extensionRegistry: any) => {
  extensionRegistry.registerMany(manifests);
};

The react project compiles and deploys as expected and as mentioned the Edit element works fine.

Any thoughts / help would be much appreciated.