Query String Parameters

It may be useful to have a form pre-populate with certain data elements.  For example, you may want to default an Employee Name field for a human resources form to a specific Employee. One way to achieve this is to include the data in the URL link to the form.  If you are integrating access to forms into another line of business application like Salesforce.com, you can even pass application data in external URL's making this approach both useful and easy to implement.

To get started, you must know what query string parameters will be passed in the URL to the form.

http://globalformsserver:3001/view/#!/form/5a6011602bbb480ba47056f1?firstname=John&lastname=Doe

The text after the question mark is referred to as the query string.  You can insert multiple parameters into the URL by joining them with the ampersand sign (&).

Use URL Safe Characters

It's critical to know that not just any character can be inserted into a URL. Any combination of letters and numbers is typically safe to use, but special characters of any kind should be carefully considered. If you need to use special characters as query parameters, they will likely need to be escaped (translated into an HTML friendly equivalent) or results can be undesirable.

The example above shows a parameters for firstname and lastname in the URL.  Since you may want to allow the user to override the value once a form displays, use a Custom Default Value rule on the component you want to load data into.  Access the Custom Default Value editor from the Data tab of a Component's settings.  A sample rule is provided below to insert the first name and last name provided in the URL into a single Text Component.

var params = new URLSearchParams(window.location.hash.split('?')[1]);
if(params.get('firstname') && params.get('lastname'))
{
	value = params.get('firstname') + ' ' + params.get('lastname');
}

The snippet above can be repurposed for a variety of uses.  It's helpful to understand the basic mechanics of this code:

• To set the values to a Component, you first need them accessible in the JavaScript.  Line 1 can be copied verbatim into any similar rule code and is used to extract the parameters from the URL.
  
  
• Line 2 is making sure there is text provided in the elements you are working with. This may or may not be a necessary step depending on your use case.  You will need to understand a bit about control the display of text when your objects don't alway exist.  You can learn more about nulls, NaN, and undefined scenarios here.  
  
  
• Line 4 assigns the firstname parameter and the lastname parameter to the Text component, and inserts a space between them.

To download a working example form of the scenario described, click here. 

• Add firstname=John&lastname=Doe to the query parameters of the imported form's link to load the name into the Employee Name field.  If your link already has a question mark in it, do not add another one.  Append query parameters with the ampersand.
  
  
• In the form designer, you can review or modify the rule by accessing the settings of the Employee Name Text Component.  Click the Data tab, and expand the Custom Default Value section.
  
  

IE 11 Warning

The method for accessing parameters in the URL described here is not supported in IE11. If forms users are browsing IE11, you will need to use an alternate method to get the data from the URL and parse it manually.