Passing parameters via URL to multi-step form power page

(1) Share

Report

Posted on by wiredupmax

Dear community,

I am fairly new to power pages. I have tried a 1000 ways to pass a parameter to a multi-step form either as custom scripts or via additional settings in the form to no avail.

First, is it possible = i.e., https:// ... ?sharepointID=xxxxx ...

If so, how do I pre-populate the text field?

Thank you in advance, JS

Categories:

Design & build

I have the same question (0)

All responses (4)

Answers (0)

Suggested answer

rezarizvii 70 on at

Like (0)

Report
Copy link

Link copied!
Hi, hope you are doing well.

It is absolutely possible to pass query parameters to a form and then read the parameter to implement a custom business rule. I have done it plenty of times, and it is why it's recommended to have your forms on a separate page, so you can leverage the power of custom query parameters.

Step-by-step:

Pass the parameter in the URL
Set the parameter in the URL on click of a button (or whatever it is that you are using to navigate the users to the multi-step form page).

Add Custom JS to the form step
Go to:

Power Pages Management app

Open your Multi-step Form Step

In Additional Settings -> Custom JavaScript, add:

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

const value = getParameterByName('sharepointID');

if (value) {
$('#yourfieldlogicalname').val(value);
}
})();

3. Use the correct field name
Replace yourfieldlogicalname with the actual field name rendered on the form

That’s all you need, no special configuration beyond the JS.

If this reply helped you in any way, please give it a Like 💜 and in case it resolved your issue, please mark it as the Verified Answer ✅.

Was this reply helpful? Yes No
Suggested answer

oliver.rodrigues 9,449 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
My initial question here is how do your Multistep Form starts? is it a new session always? or would it be an existing session?

Also, where is the information coming from before sending to the multi step form?

at a high-level, you will need:

add JS logic to the page before starting the multistep form

this could be a list/subgrid/page/form/etc

inject the information you need to the URL

then on the multistep form itself

you can read the params via either form configuration or JS

I might cover some of that in this video: https://www.youtube.com/watch?v=7S0-Uxe7mrI&t=3s&pp=ygUdb2xpdmVyIHJvZHJpZ3VlcyB6ZXJvIHRvIGhlcm_SBwkJ2QoBhyohjO8%3D

but it's been a while, so let me know if you need further info

Was this reply helpful? Yes No
Suggested answer

wiredupmax 32 on at

Like (0)

Report
Copy link

Link copied!
Ok, I finally got it to work using Claude. I had to use a "delay" because when the multi-form paints the page, it wipes out the field.

Code =

(function () { function getParameterByName(name) { const url = window.location.href; name = name.replace(/[\[\]]/g, '\\$&'); const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); const results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } $(document).ready(function () { setTimeout(function () { const value = getParameterByName('sharepointid'); if (value) { $('#xxxxxxxxx_sharepointid').val(value); } }, 500); }); })();

Was this reply helpful? Yes No
Suggested answer

oliver.rodrigues 9,449 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

strange that you needed the timeout, technically the Document Ready should load only after the page is loaded

I would use a native JS function called URLSearchParams instead of reading the entire URL URLSearchParams: get() method - Web APIs | MDN

but anyway, if it's working the way it is that's probably enough

Was this reply helpful? Yes No