Microsoft Power Pages provides customers the ability to edit their Dataverse contact information with the profile page on the customer service portal. There are cases when the out-of-the-box (OOB) version of the profile page does not meet the company’s business requirements. Power Pages administrators may modify this form to meet these requirements, but not necessarily all of them. With some extra effort, we can enhance the overall page.

This blog will provide instructions on how to implement the following:

1. Hide columns
2. Remove columns
3. Remove communication preferences (and why to do so)
4. Create custom communication preferences (and what can be done afterwards)
5. Make columns required on the Portal profile page (and how to add validation)

Note: Portals in Dynamics 365 Sales are now officially called “Power Pages.” They were previously called “Power Apps Portals”, but are often still referred to as “Dynamics 365 Portals.”

Issues

The reason I decided to write this blog derived from a client request to modify the communication preferences of the profile page. Initially, a new column was desired to be added to the OOB list below:

However, these columns are not directly accessible via Power Pages Management or the Dataverse. There is a site setting that will show or hide the entire section, but there is no ability to show/hide individual preferences through the creating or modifying of Power Pages records.

Being a developer, I attempted to add the new column through JQuery from the profile web page, and it worked – sort of. The issue I encountered was the behind-the-scenes Power Pages functionality that interfered with my custom JS, or rather, more accurately, my code interfered with the Power Pages functionality.

This led me down the path of completely removing the OOB communication preferences and creating my own. This met most of the client’s needs but not all of them. There were a couple of columns that needed to be required on the Power Pages but not required in the Dataverse, and this scenario initiated the need to add validation of my own.

Default Profile Page

Here is the OOB version of the profile page:

The profile page is a web page inside Power Pages Management:

The profile web page utilizes the profile page template which uses a hidden Profile.aspx dynamic page:

As Power Pages administrators and developers, we do not have access to this set of pages. However, the profile page does use the contact profile web form of which we do have access.

Power Platform

Legacy

Form Editor

Having access to the form allows us to accomplish items 1 and 2 on our list, and we will see this below.

Custom Profile Page

Let’s go ahead and start making changes to the profile page to make it exactly how we want.

Hide columns

From the Dataverse form editor, find the column in which you desire to hide and edit it. Uncheck the visible by default checkbox, save, publish, and refresh the Power Pages to see your changes.

Remove Columns

Removing columns is just as easy. Find the column in which you want to remove and delete it from the form, save, publish, and refresh the Power Pages to see your changes.

Remove OOB Communication Preferences

Now, we want to hide the entire OOB communication preferences section so we can create our own.

Navigate to the following Site Setting:

Power Pages Management app -> Site Settings -> Profile/ShowMarketingOptionsPanel

Change the value from true to false, save, and refresh the Power Pages to see your changes. When the above site setting is set to false, the communication preferences goes away.

(Communication Preferences were right under Preferred Language.)

Create Custom Communication Preferences

Finally, we arrive at the main point of this blog: to create our own custom set of communication preferences.

Before we look at how to do this, let’s revisit the why we are doing this. The OOB communication preferences, in my case, had too many items. The client did not want Email or Fax to display and wanted to add a custom entry.

OOB list of communication preferences:

Power Pages only allows developers to show/hide the entire section, but we need a way to individualize it.

To accomplish this, navigate to the Contact Profile Web Form in which we were already editing, create a new section and add all the columns you desire. Rename the section, save, publish, and refresh the Power Pages to see your changes.

Legacy View

Dataverse View

When we navigate to the Power Pages, after it is refreshed, we can see our changes:

Make Columns Required on the Power Pages Profile Page

We can make columns required on the Power Pages if they are part of a Basic Form or a Multistep Form with the use of Metadata. However, the Profile page, as mentioned previously, uses the Profile.aspx and does not use a Basic Form or Multistep Form:

As a result, we cannot make a column required via Power Pages Management.

Dex Galvez created a nice article on how to make columns required on the Power Pages via JavaScript, but, in my experience, this does not work on the Profile page. The form allows me to submit the form without any value even though it is marked as required. At first, I thought it wasn’t working because the email field was of type email and the phone field was of type phone rather of type text.

To test this theory out, I added the nickname field, with a type of text, to the profile web form and added the same code, and the form allowed me to submit without a value.

I then created a test web page, associated it with the full page without child links page template and used the exact same profile web form. I added the same JS, and it worked!

So, what can we do in a situation like this? Add your own JS.

Navigate to Power Pages Management -> Web Pages -> Profile Web Page -> Localized Content Profile -> Advanced tab -> Custom Javascript

In this situation, I only have four columns on the profile form, not including the communication preferences, and all of them are required. Two of them, first name and last name, are set to be required from the Dataverse, so they will automatically be required on the Power Pages.

Because the previous code does not work on the profile page, I will need to create my own custom code. I decided to disable the submit button on load of the page until all fields are filled out; only when all four fields have been populated will the submit button be enabled. There are several ways to enforce validation; this is what I chose for the given situation.

Here is the main function:

 
var isFormValid = function(){
  console.info("%cBegin isFormValid...","color: #660000;");

  var all_required_fields_populated = 0;

  if($("#firstname"))
  {
    if($("#firstname").val().length > 0) all_required_fields_populated++;
  }
  if($("#lastname"))
  {
    if($("#lastname").val().length > 0) all_required_fields_populated++;
  }
    if($("#emailaddress1"))
  {
    if($("#emailaddress1").val().length > 0) all_required_fields_populated++;
  }
  if($("#telephone1"))
  {
    if($("#telephone1").val().length > 0) all_required_fields_populated++;
  }

    if(all_required_fields_populated == 4)
  {
        $("#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton").prop("disabled",false);
  }
  else{
        $("#ContentContainer_MainContent_MainContent_ContentBottom_SubmitButton").prop("disabled",true);
  }
} // isFormValid

This code traverses through each field and determines if there is a value; if yes, it will enable the submit button. When all fields are not populated, the submit button is disabled:

When all fields are populated, the button is again enabled.

The Power Pages handles some validation for the email field. If I enter an invalid email and submit, I will receive this error message:

You can strengthen the form validation to your heart’s content; the sky’s the limit; I only demonstrated the basic concept creating your own communication preferences and handling form validation where the Power Pages form validation falls short.

Hopefully, I have sufficiently demonstrated how to modify the existing profile page, adding a custom communication preferences section and adding custom validation to enforce business rules.

If you have any questions about Microsoft Power Pages, please reach out to us.