Deep Linking Forms / Pre-Filling Fields – KPA Flex

This guide walks through linking to a KPA EHS form from another app or website and pre-setting values on the form when the link is clicked.

Linking to a KPA EHS Form

You can link to a KPA EHS form by right-clicking the “Fill Out” button and choosing “Copy Link Address”:

https://acme.kpaehs.com/forms/responses/new/6512

In some cases, you may prefer to link to a form within the native iOS and Android apps. In that case, use the same form id to create a short link:

kpaehs://forms/6512

When this link is clicked from another app it will open the KPA EHS app and then open the identified form within the offline forms module.

Pre-filling Fields

Now that you’ve linked to your form, you may want to pre-fill some of the fields. For example, maybe there’s a text field that should be pre-filled to “Hello World”.

First you’d need to know the field id. Open the field settings and click advanced:

To handle the encoding, we’ll use JavaScript to create a URL that sets this Description field to “Hello World”:

"kpaehs://form/6512?initialValues=" + encodeURIComponent(
  JSON.stringify({
    'xocbctskdnbcgjs':{ text:"Hello World!" },
  })
)

So the url will wind up looking like this:

kpaehs://form/6512?initialValues=%7B%22xocbctskdnbcgjs%22%3A%7B%22text%22%3A%22Hello%20World!%22%7D%7D

This also works on the web link we showed at the very beginning. You can pre-fill as many fields as you’d like – just keep in mind that some older browsers (like IE11) are limited to 2k characters – so probably 30 fields.

You can do the same for other field types like Select fields. The easiest thing to do is fill out a sample response then mimic what the data looks like.

For example, if you view a response then the url looks like https://acme.kpaehs.com/forms/responses/view/14272862. Change the word “view” to “json” in the url and you can see the raw data. Now under “latest” find your fieldId (in this case it’s x8efsdlfnsbew). The “value” object is what you’ll want to mimic.

So pre-filling both the text field and our new select field would look like this:

"kpaehs://form/6512?initialValues=" + encodeURIComponent(
  JSON.stringify({
    'xocbctskdnbcgjs':{ text:"Hello World!" },
    'x8efsdlfnsbew': { values: ['5581c845ca0a0c14a2de621a'] },
  })
)

Which generates the url:

kpaehs://form/6512?initialValues=%7B%22xocbctskdnbcgjs%22%3A%7B%22text%22%3A%22Hello%20World!%22%7D%2C%22x8efsdlfnsbew%22%3A%7B%22values%22%3A%5B%225581c845ca0a0c14a2de621a%22%5D%7D%7D