The following example shows how to add an annotated link list form to an already existing annotated link list (for further annotations). The ExampleAnnotatedLinkListForm is based on PropertyFieldGroup, implements the IAnnotatedLinkListForm interface and shows a simple form containing an "Special Feature Enabled" CheckBox.

import Config from "@jangaroo/runtime/Config";
import ConfigUtils from "@jangaroo/runtime/ConfigUtils";
import { mixin } from "@jangaroo/runtime";
import ValueExpression from "@coremedia/studio-client.client-core/data/ValueExpression";
import IAnnotatedLinkListForm from "@coremedia/studio-client.ext.ui-components/components/IAnnotatedLinkListForm";
import StatefulCheckbox from "@coremedia/studio-client.ext.ui-components/components/StatefulCheckbox";
import BindPropertyPlugin from "@coremedia/studio-client.ext.ui-components/plugins/BindPropertyPlugin";
import PropertyFieldGroup from "@coremedia/studio-client.main.editor-components/sdk/premular/PropertyFieldGroup";

interface ExampleAnnotatedLinkListFormConfig extends Config<PropertyFieldGroup>, Partial<Pick<ExampleAnnotatedLinkListForm,
  "enabledPropertyName" |
  "settingsVE"
  >> {
}

class ExampleAnnotatedLinkListForm extends PropertyFieldGroup implements IAnnotatedLinkListForm {
  declare Config: ExampleAnnotatedLinkListFormConfig;

  /** the property of the Bean to bind in this field */
  enabledPropertyName:string;

  settingsVE:ValueExpression;

  constructor(config:Config<ExampleAnnotatedLinkListForm> = null){
    super(ConfigUtils.apply(Config(ExampleAnnotatedLinkListForm, {
      items: [
        Config(StatefulCheckbox, {
          boxLabel: "Special Feature Enabled",
          plugins: [
            Config(BindPropertyPlugin, {
              bidirectional: true,
              bindTo: config.settingsVE.extendBy(config.enabledPropertyName || "enabled"),
            }),
          ],
        }),
      ],
    }), config));
  }
}
mixin(ExampleAnnotatedLinkListForm, IAnnotatedLinkListForm);

export default ExampleAnnotatedLinkListForm;

The next example shows how to add this ExampleAnnotatedLinkListForm to an existing annotated link list. The underlying PropertyFieldGroup requires setting the bindTo, forceReadOnlyValueExpression and itemId config.

import Config from "@jangaroo/runtime/Config";
import LinkListPropertyField from "@coremedia/studio-client.main.editor-components/sdk/premular/fields/LinkListPropertyField";
import AnnotatedLinkListWidget from "@coremedia/studio-client.ext.ui-components/components/AnnotatedLinkListWidget";
import CMTeaserForm from "@coremedia-blueprint/studio-client.main.blueprint-forms/forms/CMTeaserForm";
import ExampleAnnotatedLinkListForm from "./ExampleAnnotatedLinkListForm";

//...
Config(LinkListPropertyField, {
  //...
  rowWidget: Config(AnnotatedLinkListWidget, {
    itemId: CMTeaserForm.TARGET_ANNOTATION_WIDGET_ITEM_ID,
    items: [
      Config(ExampleAnnotatedLinkListForm, {
        bindTo: config.bindTo,
        forceReadOnlyValueExpression: config.forceReadOnlyValueExpression,
        itemId: "exampleAnnotation",
      }),
    ],
  }),
})