Let’s see. My editor is a videoplayer where you can just enter the URL of a video in multiple formats of certain video platforms and you’ll get to see the preview of the video in the backoffice.
When a plaform supports oEmbed (Youtube, Vimeo), I can just get the title of the video from that and you optionally override it. However, if I can’t get the title, the title field is no longer an override, but required.
// You need the UmbFormControlMixin to make it a form with validation
export default class ProudNerdsVideoPropertyEditorUIElement extends UmbFormControlMixin<VideoPlayerPropertyEditorModel | undefined, typeof UmbLitElement>(UmbLitElement, undefined) implements UmbPropertyEditorUiElement {
//When a video URL is entered and the details of the video are loaded, check if the field is required
async #setVideoDetails(videoParameters: VideoPlayerPropertyEditorModel): Promise<boolean> {
//Some API call to get video details here
...
// Wait for videoDetails to cause a re-render
await this.updateComplete;
// Now DOM will include #videoTitleInput
this.#setRequiredFields();
}
//Make the title field required or not
async #setRequiredFields(forceRemove: boolean = false) {
const videoInput = this.shadowRoot?.querySelector('#videoTitleInput') as UUIInputElement | null;
if (videoInput === null)
return;
if (videoInput && this.#titleIsRequired() && !forceRemove) {
this.addFormControlElement(videoInput);
} else if (videoInput) {
this.removeFormControlElement(videoInput);
}
}
}
This prevents the page to be published if the validation fails. Just use the required property on whatever you want to validate.