How to use IExternalSystem & IAutofillProvider in custom form ele

How to use IExternalSystem & IAutofillProvider in custom form elements?

huseyinerdinc

Vote:

Hello,

I have created a sample form on the Alloy template was able to successfully use IExternalSystem and IAutofillProvider on default form elements. I then created a custom form element derived from TextboxElementBlock (with its respective view):

Snippet

public class MultipleFieldFormBlock : TextboxElementBlock
{
    public virtual string Address { get; set; }
    public virtual string Postcode { get; set; }
    public virtual string City { get; set; }
    public virtual string Country { get; set; }
 

}

Dragging this control to form area successfully renders textboxes and I can download submitted form data. Here's a sample:

[{
 "text": "name surname",
 "text_1": "a@a.com",
 "addressCollection": "{\"address\":\"Olofshöjdsgatan\",\"postcode\":\"412 80\",\"state\":\"Göteborg\",\"country\":\"Sweden\"}",
 "submitted_from": "114",
 "time": "9/28/2018 8:58:56 AM",
 "by_user": "****",
 "finalized": "True",
 "systemcolumn_Language": "en"
}]

Using autofill on elements text and text_1 is not a problem, but how do I map external data to textboxes inside the adressCollection?

#197305

Sep 28, 2018 15:53

Dac Thach Nguyen

Vote:

In your element template you need to generate a DataList for specifed textbox (which is in AddressCollection).

<%= Model.RenderDataList() %>

public virtual string RenderDataList()
{
   var options = GetAutofillValues();
   if (options.Count() == 0)
   {
       return string.Empty;
   }

   var dataListBuilder = new StringBuilder();
   dataListBuilder.AppendFormat("<datalist id=\"{0}\">", Content.GetElementName());

   foreach (var item in options)
   {
       dataListBuilder.AppendFormat("<option value=\"{0}\" />", item);
   }

   dataListBuilder.Append("</datalist>");

   return dataListBuilder.ToString();
}

You might need to modify the method to get id of the textbox and render suggested values accordingly.

#197485

Oct 04, 2018 4:42