Custom Markup for Widgets Properties with Required Data Annotation

Yowaraj Chhetri asked on August 24, 2020 09:02

Hi there,

I am stuck with a problem where I need to custom markup a Widget Properties EditingComponent Label with red-color (*) asterisk sign, and this property has a Required DataAnnotation.

To display something like this:

Is there a way around solving this?

Thanks in advance.

Recent Answers

Liam Goldfinch answered on August 26, 2020 09:29

Hi Yowaraj,

I don't think it's easily possible to do through a standard page builder widget property. It might be possible to do something JS based if you can figure out how to trigger that script within the property modal (e.g. replacing a required asterisk placeholder in the label with a styled star).

What you could do instead as an alternative, is just add an unstyled asterisk as part of the property's label:

[EditingComponent(DropDownComponent.IDENTIFIER, Label = "Venue *", Order = 1)]
public string Page { get; set; }

Or you could add explanation text to this property so at least there's an indication that the field is required:

[EditingComponent(DropDownComponent.IDENTIFIER, Label = "Venue", Order = 1, ExplanationText = "Field is required *")]
public string Page { get; set; }

1 votesVote for this answer Mark as a Correct answer

Yowaraj Chhetri answered on August 31, 2020 09:38

Hi Liam,

Thank you for the suggestion.

I initially did the same, but was looking into having custom eventhandler similar to Customizing Form Widget.

Looks like there is no class or method currently for eventhandler to fire/work on for pagebuilder widget, esp widget dialogue window.

0 votesVote for this answer Mark as a Correct answer