I have been following the “Creating a Property Editor” example on the Umbraco docs page ( Creating a Property Editor | CMS | Umbraco Documentation ) and everything seems to be working EXCEPT the enforcement of the maxlength value. I can set the max length to 10 characters and type “12345678910” which is over the 10-character limit. If I save the document (but don’t publish), the box turns yellow, but there is no message saying I am over the limit. If I hit Save and Publish, the box turns red to indicate an error, but the save/publish function completes, and I get a notification saying the document was published.
Is the example broken, or does it just not have the max character limit enforcement code in it? If it does not, can anyone point me to where I can find that code so I can have a full working example to start dissecting and playing with?
I think the maxlength on the uui-input should prevent you for entering more than 10 characters in the input, but that doesn’t seem to work when I try it out: storybook - Storybook .
It does change the color of the border of the textbox, but it doesn’t actually prevent you from entering more characters.
Important to know is that this validation is purely a visual validation for the input component itself. It does not magically and automatically participate in any validation of your Umbraco node when you save or save and publish.
One way to force validation is at the property level by marking it as ‘required’ and use a regex for validation. But this has two drawbacks:
You need to do this for every property that uses your property editor
If you have complex property editors with multiple fields that require more complex validation, this approach will not work.
So in that case, you need to make your property editor a form control and create your own rules. You can read about that here:
An example of where I use this is for a video player Property Editor. Here, the title of the video is only required based on the platform. If the platform supports oEmbed, I can get the title from the oEmbed data. If not, the title is required. So in my case, the validation is conditional, but when there is a video that requires the title, you cannot actually publish the page unless you supply it:
Thank you for the information but this does not make much sense. I can add a stock text string property and set it to a 10-character max limit and get the error messages and am unable to publish. The property types are both. So your saying that the Umbraco “Text box” is a form control just to deal with character limits? I am builing my first package so maybe I am missing something but it seems to me to be odd that you have to convert everything into a form control vs just a PropertyEditorUI.
Yes, the stock ‘umbraco textbox’ is - just like everything else - a web component build with Lit and Vite. And yes, it’s a form control:
But your premise is wrong. In the end everything in Umbraco is a web component. A ‘form control’ is just a web component (in this case a property editor UI component) with some additional functionality on top of it. You add a mixin, which is sort of like an extension, it extends the capabilities of the web component. Just like the UmbLitElement adds Umbraco specific functionality to a web component. And UmbPropertyEditorUiElement is an interface to which the web component must adhere.
In a sense, it’s not much different when you implement base classes and interfaces in C# to add additional functionality to your own class.
It took me a while as well to find this out as well.