I have a custom form element and have a headless form setup. When I get the form details via the API, the custom field doesn't render some property.

Here how the setup:

• The base project is from the fresh Alloy site for showing the POC of the issue.
• The package `EPiServer.CMS` is version `12.31.2`
• The package `Optimizely.Cms.Forms.Service` is version `1.0.0`
• The package `EPiServer.OpenIDConnect.UI` is version `3.11.3`

I follow setting up the headless form by the steps on this page `https://docs.developers.optimizely.com/content-management-system/v1.2.0-forms/docs/set-up-headless-optimizely-forms-api

In the CMS I create a DEMO form and added some fundamental form element similar to the screenshot here:

On the Postman, I call the API to get the form details https://localhost:5000/_forms/v1/forms/2ECB95DA05964DF9B5108A5318359E58?locale=en, this is the JSON I got. Please notice that each `formElements` render the "properties.items" as it set within the CMS.

{
    "key": "2ecb95da05964df9b5108a5318359e58",
    "properties": {
        "allowToStoreSubmissionData": true,
        "allowAnonymousSubmission": true,
        "allowMultipleSubmission": true,
        "showNavigationBar": true,
        "focusOnForm": true,
        "submitSuccessMessage": "The form has been submitted successfully."
    },
    "formElements": [
        {
            "key": "fbcd6bf42ad84c3b9a7c343e000fb98f",
            "contentType": "ChoiceElementBlock",
            "displayName": "Multiple or single choice",
            "properties": {
                "validators": [],
                "items": [
                    {
                        "caption": "Choice caption #1",
                        "value": "ChoiceValue1",
                        "checked": true
                    },
                    {
                        "caption": "Choice caption #2",
                        "value": "ChoiceValue2",
                        "checked": false
                    }
                ],
                "label": "Multiple or single choice"
            },
            "locale": "en",
            "localizations": {}
        },
        {
            "key": "bb4a2d7af7694d7db67eb6c92799baf2",
            "contentType": "SelectionElementBlock",
            "displayName": "Selection",
            "properties": {
                "validators": [],
                "items": [
                    {
                        "caption": "Choice selection #1",
                        "value": "ChoiceSelection1",
                        "checked": false
                    },
                    {
                        "caption": "Choice selection #2",
                        "value": "ChoiceSelection2",
                        "checked": false
                    }
                ],
                "label": "Selection"
            },
            "locale": "en",
            "localizations": {
                "selectionDefaultPlaceholder": "-- Select an option --"
            }
        },
        {
            "key": "09dface60ccb41a4a68dd0ba247213f2",
            "contentType": "SubmitButtonElementBlock",
            "displayName": "Submit button",
            "properties": {
                "validators": [],
                "label": "Submit"
            },
            "locale": "en",
            "localizations": {
                "label": "Submit"
            }
        }
    ],
    "locale": "en",
    "localizations": {
        "allowAnonymousSubmissionErrorMessage": "You must be logged in to submit this form. If you are logged in and still cannot post, make sure \"Do not track\" in your browser settings is disabled.",
        "allowMultipleSubmissionErrorMessage": "You already submitted this form.",
        "malformstepconfigruationErrorMessage": "Improperly formed FormStep configuration. Some steps are attached to pages, while some steps are not attached, or attached to content with no public URL."
    }
}

Then I implement a custom form element like this. The custom element is simple to show the POC if the issue.

using EPiServer.Forms.EditView.Models.Internal;
using EPiServer.Forms.Implementation.Elements.BaseClasses;

namespace Optimizely.Alloy.Web.CustomElements.CheckboxElement
{
    [ContentType(GUID = "b8310f8d-8753-43d6-a9e0-ca2688d9aeec"
        , GroupName = "Custom Elements"
        , DisplayName = "CheckboxElementBlock")]
    public class CheckboxElementBlock : SelectionElementBlockBase<OptionItem>
    {
        [Ignore]
        public override string PlaceHolder { get; set; }

        [Ignore]
        public override string PredefinedValue { get; set; }
    }
}

I can then put the new custom element on the form like this:

And setup the choice of that field to the similar screenshot below:

But when I call the same form API again, the JSON that return looks like this

{
    "key": "2ecb95da05964df9b5108a5318359e58",
    "properties": {
        "allowToStoreSubmissionData": true,
        "allowAnonymousSubmission": true,
        "allowMultipleSubmission": true,
        "showNavigationBar": true,
        "focusOnForm": true,
        "submitSuccessMessage": "The form has been submitted successfully."
    },
    "formElements": [
        {
            "key": "fbcd6bf42ad84c3b9a7c343e000fb98f",
            "contentType": "ChoiceElementBlock",
            "displayName": "Multiple or single choice",
            "properties": {
                "validators": [],
                "items": [
                    {
                        "caption": "Choice caption #1",
                        "value": "ChoiceValue1",
                        "checked": true
                    },
                    {
                        "caption": "Choice caption #2",
                        "value": "ChoiceValue2",
                        "checked": false
                    }
                ],
                "label": "Multiple or single choice"
            },
            "locale": "en",
            "localizations": {}
        },
        {
            "key": "bb4a2d7af7694d7db67eb6c92799baf2",
            "contentType": "SelectionElementBlock",
            "displayName": "Selection",
            "properties": {
                "validators": [],
                "items": [
                    {
                        "caption": "Choice selection #1",
                        "value": "ChoiceSelection1",
                        "checked": false
                    },
                    {
                        "caption": "Choice selection #2",
                        "value": "ChoiceSelection2",
                        "checked": false
                    }
                ],
                "label": "Selection"
            },
            "locale": "en",
            "localizations": {
                "selectionDefaultPlaceholder": "-- Select an option --"
            }
        },
        {
            "key": "68a62b0033dc4c84b10d91cfb3391fa5",
            "contentType": "CheckboxElementBlock",
            "displayName": "CheckboxElementBlock",
            "properties": {
                "validators": [],
                "label": "CheckboxElementBlock"
            },
            "locale": "en",
            "localizations": {}
        },
        {
            "key": "09dface60ccb41a4a68dd0ba247213f2",
            "contentType": "SubmitButtonElementBlock",
            "displayName": "Submit button",
            "properties": {
                "validators": [],
                "label": "Submit"
            },
            "locale": "en",
            "localizations": {
                "label": "Submit"
            }
        }
    ],
    "locale": "en",
    "localizations": {
        "allowAnonymousSubmissionErrorMessage": "You must be logged in to submit this form. If you are logged in and still cannot post, make sure \"Do not track\" in your browser settings is disabled.",
        "allowMultipleSubmissionErrorMessage": "You already submitted this form.",
        "malformstepconfigruationErrorMessage": "Improperly formed FormStep configuration. Some steps are attached to pages, while some steps are not attached, or attached to content with no public URL."
    }
}

The issue is, in the custom element, "CheckboxElementBlock", it doesn't contains the "properties.items". Even it inherits from the class `SelectionElementBlockBase<OptionItem>`.

Could anyone help me to find out if I missed anything in this implementation, or is there any workaround to make the custom element renders the `properties.items` in the form API?