ReadyXRM

One of the key features of Power Pages is to allow users to interact directly with information stored in Microsoft Dataverse.

Makers can easily create web pages with list and form components to allow site visitors to be able to create, read, update or even delete Dataverse records.

However, sometimes new users get a bit tripped up when adding a form of Dataverse data to a webpage, as there are some unique subtle aspects of how Power Pages utilizes Dataverse model-driven Power Apps forms and transforms them into webpage form components.

Hopefully, I can provide some context and demystify the process.

The TL;DR version is this:

• A maker creates a Dataverse (model-driven app) form either in the Data workspace or within Power Apps.
• While designing a webpage, using the Power Pages design studio, a maker can select a form component to add to a webpage, and as part of the process will choose the Dataverse form.
• This will actually create a new “form component”, which can be further configured on the webpage, but can only have one mode (create, edit, or read-only). Many form components can be based off of a single Dataverse form.

Let’s walk through the process to add a form to a Power Pages website;

Start at Data workspace

Power Pages has the Data workspace, which is a work space within the design studio that allows you to create and configure Dataverse tables, fields, forms and views. Previously when working with Power Apps portals, you would need to tab over to Power Apps (or to classic Dynamics 365 customizations) and configure your Dataverse assets.

Data workspace Dataverse form designer

From here, you can access the Dataverse form and view designer, which is essentially the same tool that you would use to configure model-driven Power Apps. Here you can create Dataverse forms and Dataverse views, which we will use later on to create Power Page’s forms and lists.

As a best practice, I tend to give my forms names like “Website – Widget Form” to differentiate these forms from the forms that I might use when configuring a model-driven Power App based on the same table.

The form you are designing will have the same fields, columns, and generally basic layout of the form you may want to design for your webpage, but it doesn’t quite look the same.

The historical reason for this is way back in the Dynamics CRM 4.0 days, forms were pretty basic, 2 columns, nothing special like subgrids, custom controls or timelines. A form was a form. The ability to use this same form on a website (Adxstudio portal) was very revolutionary.

However, Dynamics CRM eventually evolved to what we now know as model-driven Power Apps, and the corresponding forms also evolved to have many of the cool features that we use today (sub-grids, custom controls, embedded views, multiple columns, etc) which don’t always translate well to forms used on a externally facing web page.

Adding a form component to a webpage

When you use the Pages workspace, and add a form component, it is important to note that you are not adding the actually Dataverse form, but rather creating a new object (also known as a basic form) to the webpage. This form component bases its layout on the Dataverse form, but its not the same object.

While a standard Dataverse form can be used for multiple purposes on a model-driven app, a form component added to a web page can be only one of 3 modes, read-only, create, or edit.

Also as a best practice, I like to label the form appropriately “Create – Widget” or “Edit – Widget”, this way you know what the form is supposed to do.

You need to be careful, suppose you want to add a form to Edit. You may consider to reuse the form you created for the create page, but because if you add the same form to a different page, and change the form type (e.g. from create to edit) this will apply all other pages on which this form component is embedded. Don’t be tempted to pick the same form for a different purpose!

If you want to modify the original form (e.g. add a field or change the layout), you can make changes to the foundational Dataverse form, but also note that this will reflect on all related form components, so in some cases, you might want to also make unique Dataverse forms, depending on your requirements.

You can view these settings (and a lot more advanced configuration) using the Portals Management app.

Liquid Tag

Adding a form component from the designer studio simply adds the Liquid tag to the source code of the specific page in the background.

{% entityform name: 'Create - Widget' %}

A developer could also add this same tag to web template or directly editing the webpage code.

Note the legacy method of adding a form to a page would be to set it via the lookup in the webpage record. You may still run into this while modifying older Power Pages sites. Using the Liquid tag provides more flexibility.

Multistep Forms

Multistep forms work pretty much the same way, but you will need a dedicated Dataverse (model-driven app) form for each step in the process if you add the multistep form using the design studio. You can break out the steps using form tabs, but will need to configure the multistep form using the Portals Management app.

Beware the duplicate button!

You have the ability to duplicate a webpage, but note that it WILL NOT DUPLICATE the form, but rather duplicate the page, but still have the same point (via Liquid, see above) to the same form. If you modify that form (e.g. change from create to edit) it will affect the original page where you copied from.

Summary

A lot of website platforms and webpage builders have tools to create data-enabled forms on webpages, but Power Pages is unique as it provides direct access to Dataverse. The ability to add simple one page forms or a sequence in a multistep form page adds incredible power when building data driven websites and applications.

Cover Photo by Bruce Warrington on Unsplash

Building Power Pages workshop!

Want to learn more about Power Pages in a full day workshop setting?

I am personally delivering 2 workshops this year (potentially more).

The Building a Power Pages Site in a day workshop is a rapid ramp up for app makers, developers, and consultants who want to learn how to build powerful, data driven web applications using Power Pages. This class will dive into Power Pages with hands-on labs to build a working data driven web and mobile application, all in one day!

Currently there are 2 dates that are confirmed:

Iberian Summit on April 28th Cancelled (sorry!)

Nordic Summit on September 22nd

Register here

I am really looking forward to seeing you there! Register early, spots are limited!

Power Platform BOOST! Podcast

Another project that I am really excited to share is a collaboration between myself and superstar MVP Ulrikke Akerbæk as we are co-hosting and co-producing the Power Platform BOOST! podcast, a bi-weekly podcast providing your with timely news and updates about the Power Platform. Please listen and subscribe from your favourite podcast app.

Nick Doelman is a Senior Content Developer at Microsoft, a former Microsoft Most Valuable Professional (MVP) from 2017-2021, and a Microsoft Certified Trainer (MCT). Nick is also a competitive Powerlifter representing Team Canada at international events. Follow Nick on twitter at @readyxrm.