Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Episerver Forms - Autofill based on querystring and datetime

Vote:
 

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
Vote:
 

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
Vote:
 

wouldn't this replace all the textboxes with the querystring value?

#181203
Aug 13, 2017 2:55
Vote:
 

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
Vote:
 

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
Vote:
 

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
Vote:
 

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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.