When building customer facing websites and experiences in Power Pages, sometimes it’s better to break things down. Whether that be moving from one page to another to break down a form, or selecting a category on one page to see a filtered down list of data on a next page, it’s not always great to have everything on one page which can sometimes clutter things a little.
In order to achieve this kind of behaviour where we break things down onto different pages or ‘screens’, we almost need to be able to do something like set a global variable with a value that carries over to our next page / screen and we handle it there to display the relevant content. When it comes to the world of websites and Power Pages, we’ll mimic this functionality with URL parameters.
In this post, I’ll show you how to handle a URL parameter / query string on a target page using JavaScript to then manipulate different UIs and behaviours.
Adding a URL parameter / query string
First, let’s take a look at what a URL parameter looks like. Effectively on the end of a URL we can add a question mark, then a parameter name and then an equals character and assign a value, then we can continue to add parameters and values separating them with ‘&’.
For example, here’s an example of a URL with a query string / URL parameter appended.
https://lewisdoes.dev?post=URLParameters
In the example above, the parameter name is ‘post’ and the value assigned to it is ‘URLParameters’.
Handling URL parameters in JavaScript
So, one thing we can do is pass in a URL parameter / query string when we navigate to a page on our website, but the next thing we need to be able to do is cause our webpage to behave differently based on the value passed in.
Let’s look at the JavaScript code required to handle URL parameters.
//Get URL parameter value based on specified parameter name
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const parameterValue = urlParams.get('ParameterName');Using the above code, we’re able to get the value of a URL parameter passed in and then store this value in a variable which we can later reference. In the code above replace ParameterName with the name of your URL parameter. If you’re working with multiple URL parameters you may wish to replace the name of the parameterValue constant variable with something more relevant to that data.
Using the value to manipulate the behaviour
Now using the variable which we stored our parameter value in, you can reference this in something like an IF statement to check if the value meets a condition and then execute code based on this to adjust the users experience on the page based on a previous pages selection. Check out some of the posts below which use this type of functionality to see what you could do here…