Power Pages Session Variables

[prathyoo]

Hi,

We have a requirement to pass the event id from one page to another. The user clicks the Request Accreditation button and the user is sent to a page with a multistep form. 

We do not like the idea of sending the event id in the url and wanted to check how the value of the event id (based on the click) can be captured internally using maybe liquid code or some other mechanism and then retrieved in another page.

We have seen the below post but the solution using request parameter is not what we want. For example in Canvas Apps, on the Navigate command, we can add context variables for the target screen. Wanted to check how the same can be done in Power Pages.

https://powerusers.microsoft.com/t5/user/ssoregistrationpage?dest_url=https%3A%2F%2Fpowerusers.micro...

Prathyoo

[saudali_25]

Hi @prathyoo ,

As per your business scenario, you can pass your params by using query parameters. You can either pass record id or you can also provide your custom list of params as a part of URL to next page and use liquid to get those params/values.

You have this option available on your Redirect step. Please checkout this article:

https://www.inogic.com/blog/2020/09/pass-field-value-from-one-page-to-another-as-query-string-parame...

Feel free to reach out, if there are any questions.

Thanks,

Saud

[prathyoo]

Thanks. We are trying to avoid url parameters. Why is there no option to pass values internally?

[saudali_25]

@prathyoo - what if you can use local or session storage? Though it's not a good option but still if you don't want params to be part of URL. You can use these options as well. 

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[Lucas001]

Hi @prathyoo,

I think the best solution is what @saudali_25  mentioned. Use the local storage.

Liquid would not be a good option here.

The exact process should be something like that:

1. When accessing that page, clear the local storage or that specific item
2. On Button click set local storage.
3. On next page getItem of local storage
4. Clear local storage or clear that specific item.

Depending on what you need on the second page you can set and get multiple items. Just make sure to delete the items as you don't want all other pages to get those info.

Another solution but a bit of an overkill for your problem is to use dataverse and the CRUD Api.

But the necessary steps to implement it are not given in your usecase.

--------------------------------------------------------------------------------------

Hope that helps.

If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.

[AdityaSwaroop02]

Hi, you can use a hidden form to store the data that needs to be sent on the next page and then can retrive the data using liquid:

Example: 

{% assign eventId = request.params.eventid %} 

Let say on click of continue button on the events page you call the js function and create a form, add all required data from that page in that form and action for that form will be "/nextPageUrl/" at last use document.formIDHere.submit()

[KH_2437]

Is hidden forms a better approach than local storage?

Also, do you have a link that shows one how to do this in detail?

[AdityaSwaroop02]

Hi @KH_2437 ,

Yes hidden form is a better approach that using local or session storage, as with local there could be security implications too. You can go through below code snippet to understand how to send data from one page to another using hidden form approach in power pages.

Let say you are on page one:

create a hidden form there or you could create that dynamically too.

/ /here action is the next page url which again can be set dynamically

<form id="dataForm" action="preview.html" method="post"> 

        <!-- Container div for dynamic input elements -->

        <div id="dynamicInputsContainer"></div>

    </form>

example data set:

 const customerData = {

                "name": "John Doe",

                "email": "john@example.com",

                "age": 25,

                "address": "123 Main St",

                "phone": "555-1234"

            };

   const dataForm = document.getElementById("dataForm");

            const dynamicInputsContainer = document.getElementById("dynamicInputsContainer");

            // Clear any existing inputs

            dynamicInputsContainer.innerHTML = '';

            // Create input elements dynamically based on the data

            for (const key in customerData) {

                if (customerData.hasOwnProperty(key)) {

                    const inputElement = document.createElement("input");

                    inputElement.type = "hidden";

                    inputElement.name = key;

                    inputElement.value = customerData[key];

                    dynamicInputsContainer.appendChild(inputElement);

                }

            }

            // Submit the form

            dataForm.submit();

        }

On the next page you can fetch the params using liquid code:

let data = {{request.params.customerData}}

// do the processing with data like parsing and decrypting here..