How can I create a custom Form Component for a existing Data Type?

2025/02/26 7:28 PM

We have a situation where we'd like to use a different Form Component (in this case a simple input field) for an existing Data type (the "Date and time" one). Is this possible?

This is what the Form Component looks like:

public class DateTimeInputComponent : FormComponent<DateTimeInputComponentProperties, DateTime>

This is what the properties look like:

public class DateTimeInputComponentProperties : FormComponentProperties<DateTime> { public DateTimeInputComponentProperties() : base(FieldDataType.DateTime) { }

but it's still not showing up as an option.

Is there any way to do this?

In the picture below, the "Datetime input" is the default one provided by Kentico. But we'd like to add a custom Form Component to that list of options.

1.00

Answers

2025/02/26 7:44 PM

Did you register it?

[assembly: RegisterFormComponent(DateTimeInputComponent.IDENTIFIER, typeof(DateTimeInputComponent), "Custom DateTime input")]
2025/02/26 8:17 PM

Yup!

[assembly: RegisterFormComponent(
    DateTimeInputComponent.IDENTIFIER,
    typeof(DateTimeInputComponent),
    "HTML 'datetime-local' Input",
    IsAvailableInFormBuilderEditor = true,
    IconClass = "icon-edit",
    ViewName = "/Features/Form/DateTimeInputComponent/Default.cshtml")
]
2025/02/27 12:42 AM
Accepted answer

Make sure you are using the right C# types because Xperience currently has 2 sets of Form Components that are not interoperable.

  1. Form Components from the Form Builder (or Legacy Page Builder)

    1. namespace - Kentico.Forms.Web.Mvc

  2. UI Form Components based on React and Xperience administration UI technology

    1. namespace - Kentico.Xperience.Admin.Base.Forms

These are in different namespaces and it's unfortunately very easy to confuse them.

If you want to see a functioning example of custom UI Form Components (and custom data types) check out the Kentico Community Portal source code or read the blog post Embedded structured content and the power of custom data types.

You can also see an example of a UI Form Component registered for an existing data type (text/string).

To response this discussion, you have to login first.