Custom From Component not triggering FormFieldRenderingConfiguration.GetConfiguration.Execute

2024/12/04 10:26 AM

I've created a custom form component for one of our sites to validate either UK or Republic of Ireland (RoI) phone numbers. The component is working as expected apart from one thing.

We have also added a custom function to the FormFieldRenderingConfiguration.GetConfiguration.Execute event to add a red asterix to field labels if the field is set as 'required'.

This event is not getting triggered when the custom component is rendered.

see the code for the component below:

[assembly: RegisterFormComponent(
UKIrelandPhoneFromComponent.IDENTIFIER,
typeof(UKIrelandPhoneFromComponent),
"UK and Ireland Phone Number",
Description = "This is Custom UK and Ireland Phone Field.",
IconClass = "icon-smartphone",
ViewName = "\~/Components/FormComponents/UKIrelandPhoneFromComponent/UKIrelandPhoneFromComponent.cshtml",
IsMappableToContactFields = false)]

namespace FormComponents.UKIrelandPhoneFromComponent
{
  public class UKIrelandPhoneFromComponent : FormComponent\<UKIrelandPhoneFromComponentProperties, string>
  {
    public const string IDENTIFIER = "NetC.UKIrelandPhoneFromComponent";   &#x20;
    private const string UKPhoneRegex = "^(?:\\+?44|0)7?\\d{3,4}\\d{3}\\d{3,4}$";
    private const string ROIPhoneRegex = "^(?:\\+353|0)(?:1\\d{7}|[1-9]{2,3})(?:\\d|\\-)?(\\d){5,7}$";

    private string? _inputValue;
    private string? _errorText;
    private bool _required;

    public UKIrelandPhoneFromComponent()
    {
    }

    // Specifies the property is used for data binding by the form builder
    [BindableProperty]
    public string InputValue
    {
        get { return _inputValue ?? ""; }
        set { _inputValue = value; }
    }

    public string ErrorText
    {
        get { return _errorText ?? "Please enter a valid phone number with no spaces"; }
        set { _errorText = value; }
    }

    public bool Required
    {
        get { return _required; }
        set { _required = value; }
    }

    public override string GetValue() => InputValue;

    public override void SetValue(string value)
    {
        InputValue = value;
    }

    public override IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        var errors = new List<ValidationResult>();

        errors.AddRange(base.Validate(validationContext));

        //If not required and input empty, no further validation needed 
        if (!Required && string.IsNullOrEmpty(InputValue))
        {
            return errors;
        }

        if (!Regex.IsMatch(InputValue, UKPhoneRegex) && !Regex.IsMatch(InputValue, ROIPhoneRegex))
        {
            errors.Add(new ValidationResult(ErrorText));
        }

        return errors;
    }

    public override void LoadProperties(FormComponentProperties properties)
    {
        base.LoadProperties(properties);
        var props = properties as UKIrelandPhoneFromComponentProperties;
        if (props != null)
        {
            ErrorText = props.ErrorText; // Load the Error Text property
            Required = props.Required;
        }
    }

}

public class UKIrelandPhoneFromComponentProperties : FormComponentProperties<string>
{
    // Sets a custom editing component for the DefaultValue property
    // System properties of the specified editing component, such as the Label, Tooltip, and Order, remain set to system defaults unless explicitly set in the constructor
    public override string DefaultValue
    {
        get;
        set;
    }

    [TextAreaComponent(Label = "Error Message", WatermarkText = "Enter the error message here...", Order = 1)]
    public string? ErrorText { get; set; }

    // Initializes a new instance of the UKIrelandPhoneFromComponentProperties class and configures the underlying database field
    public UKIrelandPhoneFromComponentProperties()
        : base(FieldDataType.Text)
    {
        DefaultValue = string.Empty;
    }
}

and here is the code for adding in the custom event handlers:

public static void RegisterEventHandlers()
{
    FormFieldRenderingConfiguration.GetConfiguration.Execute += InjectRequiredMarkupIntoKenticoComponents;
    FormWidgetRenderingConfiguration.GetConfiguration.Execute += FormWidgetInjectMarkup;

}

 private static void InjectRequiredMarkupIntoKenticoComponents(object sender, GetFormFieldRenderingConfigurationEventArgs e)
 {
     if (!e.FormComponent.Definition.Identifier.StartsWith("Kentico", StringComparison.InvariantCultureIgnoreCase))
     {
         return;
     }
     AddRequiredAttributes(e);

 }

 private static void FormWidgetInjectMarkup(object sender, GetFormWidgetRenderingConfigurationEventArgs e)
 {
     e.Configuration.FormHtmlAttributes["novalidate"] = "";
 }

 private static void AddRequiredAttributes(GetFormFieldRenderingConfigurationEventArgs e)
 {
     if (e.FormComponent.BaseProperties.Required)
     {
         e.Configuration.EditorHtmlAttributes["aria-required"] = "true";
         e.Configuration.EditorHtmlAttributes["required"] = "";

         if (e.Configuration.LabelHtmlAttributes.ContainsKey("class"))
         {
             e.Configuration.LabelHtmlAttributes["class"] += " required-field";
         }
         else
         {
             e.Configuration.LabelHtmlAttributes["class"] = "required-field";
         }
     }
 }

Is there something I've missed in the registration of the component to get this to trigger this?

Environment

Answers

2024/12/04 10:36 AM
Answer

My fault, missed the

 if (!e.FormComponent.Definition.Identifier.StartsWith("Kentico", StringComparison.InvariantCultureIgnoreCase))
     {
         return;
     }

line

To answer this question, you have to login first.