Power Pages Multistep form Deep Dive

I’ve been working in a Power Pages project in the last month and within this time frame I had to configure the typical components like web pages, basic forms, multistep forms, web templates, web roles and I also faced some challenges so today I want to share this experience with you.

This is the first of a blogpost series about configuring this components in Power Pages.

First let me give you the context of the project, Contoso is an insurance buyer that supports brokers firms.

Current situation:

Contoso previously managed their insurance data collection and validation manually across multiple broker departments. The process involved:

Sending an Excel file with 16 tabs to the broker for data entry.
Consolidating responses into a central Excel file for validation by the broker central team.
Exporting finalized data to insurers in a readable format.
This manual approach resulted in several challenges, including labor-intensive processes, version control issues, input errors, and the lack of real-time data validation.

The solution:
To address these challenges, the proposed solution was Power Platform-based digital solution using Power Pages, Power Apps, and Dataverse as the central platform.

So the idea is that the broker can login into a web portal and upload all the insurance renewals data for the current year and on the backend Contoso’s users can use the Model Driven App to review the data entered.

Requirements/Challenges:

There was a special security requirement: the central team of the broker could see all the data of the other departments, but could only interact with the data of its own department. The other departments could only see and interact with their own data.

And I also had to think about the user experience in Power Pages, because the Excel file had 16 tabs for some departments, but the central team department had a larger version of that file with more than 20 tabs. And the only out-of-the-box way to simulate tabs in Power Pages is with multistep forms. But of course it’s never easy to translate an Excel file (where you can enter the data wherever you want and format it however you want) into a digital web solution.

So without further introduction let me share all the components I created in this project.

Preparing the forms and views

Before going to Power Pages I would recommend first is to analyze, define and build your data model in Dataverse, which should include the forms and views that you are going to use in Power Pages.

For example I have a table called Fiscal Year and in that table I have created several forms just to be used in the Power Pages multistep form because those forms should not be used in the Model Driven App:

Same for the views.

Creating a Multistep form

Then what I did is go to make.powerpages.microsoft.com and after creating the web portal, I started with a blank web page and finally I created the Multistep form:

Adding a step in the multistep form

After that you can start by adding the steps you want:

When creating a step you will have to select the table and then the form you created already in your Dataverse solution:

This is my first tip, Power Pages studio is great to start creating basic components but then if you want to add more advanced configuration to those components then you have to go to Power Pages Management Model Driven App, and that’s what I did after adding a step in the multistep form.

Power Pages Management Model Driven App

So go to that Model Driven App and go to Multistep form option:

Then open the multistep form and go to the form steps tab:

Open the step and there you have more tabs where you can set the form type as insert, edit or read-only, in this case because is the first step it has to be Insert so the Fiscal Year record is created:

You can also specify if you want to associate your created record with another table, this is useful if for example you want to associate the Fiscal Year with the account when you create the Fiscal Year record, of course in my case the Fiscal Year is a custom table so I had to create a relationship first between these two tables:

And you can also associate the created record(Fiscal Year in this case) with the current portal user:

So when the user goes into the second step the Fiscal Year record is created and the account is automatically associated with the Fiscal Year because of the “Associated table reference” and the current portal user (contact) is also associated with the Fiscal year, by using “Associate the current portal user on insert”.

Adding JavaScript code to your multistep form

You also have a tab where you can specify JavaScript code to achieve a more advanced user experience:

I cannot show the whole code, what I’m doing in this step is checking if the user already has a Fiscal Year record created for the current year, if so then I display a pop-up message saying that is not possible to initiate the process again for this year:

And yeah for coding is always better to use Visual Studio Code, so for that you can go back to Power Pages studio go to your web page that host the multistep form and then click in Edit code:

That will open Visual Studio Code in your browser and then you can write your JavaScript code:

This coding feature is amazing because you can make advanced conditions or add captions where it is not possible out-of-the-box, as you can see in the following image I tested the first step which is an introduction of all the steps the user has to follow and you can see below the next button there is a small caption that I added using JavaScript:

I also made the edges of the multi-step shape rounded and the same for the edges of the steps by using JavaScript.

Associating more tables to your record with JavaScript

Based on two features I explained before, you can associate your new record with up to two tables, but of course if you use JavaScript you can associate your new record with even more tables, the trick is to include those lookup columns in your form and then by using JavaScript you can fill in those lookup columns so that when the user goes to the next step the record is created or updated with those lookups already filled in.

For example I’m handling currency values in this project so the currency is very important, then what I do is to retrieve the right currency Guid and name by using FetchXML and liquid in a web template which I will explain it in my next blogpost, but what the web template does is creating two hidden HTML divs with those values. So what I do is call the web template on the content page of my web page:

Then I go to my multistep form, open the corresponding step and then go to the “Form Options” tab and in there I can add this code:

// Reusable function to set lookup field values
function setLookupFieldValues(lookupInputId, lookupHiddenId, lookupEntityNameId, entityName, displayName, idValue) {
const lookupInput = document.getElementById(lookupInputId);
const lookupHiddenIdField = document.getElementById(lookupHiddenId);
const lookupEntityNameField = document.getElementById(lookupEntityNameId);

if (lookupInput && lookupHiddenIdField && lookupEntityNameField) {
// Set the visible name for the lookup
lookupInput.value = displayName;

// Set the GUID for the lookup
lookupHiddenIdField.value = idValue;

// Set the entity schema name for the lookup
lookupEntityNameField.value = entityName;

console.log(`Lookup field for ${entityName} set successfully.`);
} else {
console.error(`Lookup field elements for ${entityName} are missing.`);
}
}

// Reusable function to retrieve values from parent document
function getParentElementValue(elementId) {
const element = parent.document.getElementById(elementId);
return element ? element.textContent.trim() : null;
}

// Get Currency GUID and Name from the hidden HTML divs
const currencyGuid = getParentElementValue(“currencyGuid”);
const currencyName = getParentElementValue(“currencyName”);

if (currencyGuid && currencyName) {
setLookupFieldValues(
“transactioncurrencyid_name”, // name of the HTML input type text that has the name of the currency record
“transactioncurrencyid”, //name of the HTML input type text that has the Guid of the currency record
“transactioncurrencyid_entityname”, //name of the HTML input type text that has the schema name of the table
“transactioncurrency”, // the schema name of the table
currencyName, // the name of the lookup field in your form that you want to set
currencyGuid // the Guid of the lookup field in your form that you want to set
);
} else {
console.error(“Currency GUID or Name is missing.”);
}

Challenges with the Multistep form

Now here is my only complaint about multi-step forms, and that is that sometimes you are testing it and it breaks for some reason that I can’t figure out, the only thing I realize is that it happens when creating/configuring up the multi-step form, so for example you add a step in Power Pages Studio and then go to the Model Driven app to add more settings then you test it by trying to move to the next step and sometimes it just breaks and you get this:

After pulling my hair out for hours I realized the solution is very simple, just go to the Model Driven App, open the multistep form and go the Sessions tab:

Just delete that record, then purge the cache of the web site from the Admin portal:

And then go back to your web portal, make a refresh and test it again, it will work this time.

That is for now, in my next blogpost I will explain how to set up subgrids in multistep forms, and how to set up a web template to help to retrieve data and use it in the multistep form, stay tuned.

Have a great day!.