Episerver Forms - Autofill based on querystring and datetime

Hello

1.  Wondering what's the best way if the url has ?firstname=Peter for the form firstname text box to be Peter.

2.  For the datetime picker I want to format the date to be YYYY-MM-DDDD 12hrtime.  Currently it's submitted as MM/DD/YYYY 12hrtime

Thank you

#181181 Aug 10, 2017 21:06
  • Member since: 2007

    Hi,

    Not sure if its the best way, but you could:

    1. Copy the template from packages\EPiServer.Forms.4.6.1\Content\modules\_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks (ie. TextboxElementBlock.ascx)
    2. Put it into the ~/Views/Shared/Blocks/ folder of you project (rewrite to Razor if needed)
    3. Handle population of the textbox from the querystring; something like: 
      var defaultValue = string.IsNullOrEmpty(Request.QueryString["firstname"]) ? Request.QueryString["firstname"] : Model.GetDefaultValue();
      
      <input name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" type="text" class="FormTextbox__Input"
              placeholder="<%: Model.PlaceHolder %>" value="<%: defaultValue %>" <%: Html.Raw(Model.AttributesString) %> data-f-datainput />

    Another option might be to look into the possibility to override Model.GetDefaultValue() (in DataElementBlockBase) and check for querystringvalues there.

    Keep in mind that you need to check for changes in the original template when updating of Episerver Forms.

    #181190 Aug 11, 2017 7:31
  • wouldn't this replace all the textboxes with the querystring value?

    #181203 Aug 13, 2017 2:55
  • Member since: 2007

    Hah, that is true. Sorry, my bad.

    Then I guess you would have to create your own Form element. You could inherit from TextboxElementBlock and implement logiq where you let the editor choose if and from what query param the textbox should try to fetch its value from. Have a look at: https://www.epinova.no/en/blog/creating-custom-form-elements-in-episerver.forms/

    #181204 Aug 13, 2017 9:09
  • That seems like too much work for such a simple feature.  What we need is a data-something with form-fieldname there so we can write client side code to do things like this.  I ended up writing jquery to get the guid of the field and filling it in with the querystring value since I know these forms/fields won't be changing once they are made.  Thanks for your help though Anders

    #181247 Aug 14, 2017 18:31
  • I ended up adding this to the input   data-formlabel="<%: labelText.ToLower() %>"

    and script like so

    $(document).ready(function () {
    var attribute = 'email';
    var attributevalue = getParameterByName(attribute);
    setEmailBoxByDataAttribute(attribute, attributevalue);
    });

    var setEmailBoxByDataAttribute = function (dataattribute, querystringvalue) {
    var query = 'input[data-formlabel=' + dataattribute + ']';
    $(query).val(querystringvalue);
    }

    //get the querystring value by parameter name
    var getParameterByName = function (name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
    };

    #181286 Aug 15, 2017 20:03
  • Member since: 2009

    To autofill form element with your value (on server side) please read this article http://world.episerver.com/documentation/developer-guides/forms/integrating-forms-with-external-systems/autofill-api/

    This is recommended way to auto populate form element with data from external system (CRM, Targeting Ad, ...)

    In your case, fill textbox with value from URL param, your approach with JS might work, but please be careful with XSS.

    Implement your own IAutofillProvider, you can have all your need (the element, the HttpContextBase, the form) to decide in 

    IEnumerable<string> GetSuggestedValues(IDatasource selectedDatasource, IEnumerable<RemoteFieldInfo> remoteFieldInfos, ElementBlockBase content, IFormContainerBlock formContainerBlock, HttpContextBase context);

    #181316 Aug 16, 2017 9:19