Using Web Templates for Power Apps Portals in Dynamics 365

Page Templates make a Dynamics 365 Portal developer’s work much faster and more streamlined. Templates let us stop worrying about exactly how each individual Portal Web Page will look and feel once it’s displayed on the web. Instead, we can focus on page content and on types of pages.

This blog will explain the following aspects of Portal Page Templates:

• The Purpose of Page Templates
• Rewrite URLs
• Web Templates
• Using Website Header and Footer

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

The Purpose of Page Templates in Dynamics 365

When it comes to web development, it’s guaranteed you will need different types of pages to handle your various needs.

For example, you may want to display a single list of data; in that case, you would need a one-column layout. On the other hand, possibly for your homepage, you may want to display a myriad of information, none of it huge, but you want to keep it all separated; in that case, you might want to use a three-column layout with the two side columns of 25% width each, and the middle column taking up the remaining 50%.

To understand how templates help us handle different types of pages, it helps to think of Page Templates in Dynamics 365 as empty houses.

During my sixth-grade summer, I remember moving into a different house across town. Looking at the new residence without any furniture or other belongings made it appear so big and vacant, and I wondered how we would fit all of our stuff inside and not have huge empty spaces. Boy, was I naive. We filled it up quickly and pondered all the numerous ways to squeeze all our belongings in.

Empty houses have all the rooms in place with their measurements, openings, and features. Unless you remodel, you can’t do anything about that. The only thing you can do is determine the location of the couch, the table, the bookshelves, etc.

Page Templates in Dynamics 365 Sales are the houses, and the web content is the furniture. You determine what content goes in each room, and the Page Template ensures that no Web Page “walls” are broken in the process.

There are many different styles of homes. There are ranch-style houses, colonial-style houses, condos, modern, and even the hottest trend of tiny houses at a whopping 400 square feet. You can also have a wide range of Page Templates. You can create one-column, two-column, and three-column Page Templates – all with varying widths. You can create Page Templates that will support an image gallery or highlight specific sections of the Web Page.

Once all of your Page Templates are created, you only have to determine which template to use for each of your Web Pages.

Check out PureCSS to get a better idea of various page layouts and their purposes.

Templates with and without Rewrite URLs

Page Templates fall into two different camps: those that use an ASPX page and have the “Rewrite URL” type, and those that use liquid code and have the “Web Template” type.

Notice in the screenshot below that some Page Templates have a value for “Rewrite URL” and some do not.

Out of 28 default Page Templates, 17 of them have the Type “Rewrite” that tap into an ASPX page, and the remaining ones have the Type “Web Template” that tap into Web Template liquid code.

Page Template with a “Rewrite URL”:

Page Template without it:

Without going into great detail, the “Rewrite URL” signifies that a particular Page Template is using a backend, unreachable ASPX page. The majority of these are used for specific purposes and cannot be used by your own custom Web Pages. For example, there is an Access Denied Page Template that displays when an unauthorized user attempts to access a Web Page to which they do not have the correct privileges. The other set of Page Templates utilize “Web Templates,” which will be discussed next.

Web Templates

The majority of your Portal development will revolve around utilizing Web Pages that use Page Templates of the Type “Web Template.”

These Page Templates use – you guessed it – Web Templates. You can access Web Template liquid code and have the option to modify if necessary.

Let’s take a step back and look at the bigger picture:

A Web Page can display an Entity List, Entity Form, or Web Form; it can also display a custom page. You can have three different styles of Web Pages that all use the same Page Template. The “room” can be a bedroom, an office, or a nursery; the room stays the same, but the contents can be different or positioned differently.

Let’s take a look at some differences in the Page Templates.

Full Page without Child Links Page Template:

Here you can see the Contact form is taking up the majority of horizontal space and is center aligned.

Page with Side Navigation (2 columns) Page Template:

For whatever reason, in this case the supporting Web Template was missing from the out-of-the-box list of Page Templates and resulted in a blank area as seen above.

I had to create a new Web Template. I named it “Layout 2 Column Wide Right.” After saving and refreshing, the page now shows properly.

In the blank area to the left, you can add your own text by editing the Page Copy through the Portal Content Editor.

The default Page Template options are fairly thin, but that doesn’t stop you from creating your own selection of Page Templates to meet your various Portal requirements.

Using Website Header and Footer

There is one last item to discuss concerning Page Templates. “Use Website Header and Footer” seems like such an inconspicuous field – one tiny little checkbox – I mean what difference can that make, right? Huge.

This field controls whether or not the Web Page will use the Microsoft HTML, including everything in the <head> section with references to JavaScript and CSS files. It includes the top navigation and the entire footer section of the Portal website.

This most likely will only surface if you decide to create your own Page Templates, but why would we do this? Great question – I’m glad you asked. I’m sure there are dozens of reasons to not use the default header and footer template pieces, but I’ll identify two.

Print-Only Pages

Not too long ago, one client wanted to create a specific print-only version of a custom page. They wanted header, navigation, and footer removed.

I created a custom Web Template, Page Template, and Web Page and ensured the “Use Website Header and Footer” was unchecked on the Page Template record. This stripped out all Bootstrap formatting, all JavaScript dynamics, and all interfering HTML elements. Voilà, a print version page.

Retrieving JSON-Formatted Data

Another reason to avoid the default header and footer HTML is what I refer to as AJAXing your Web Template.

Sometimes you need to retrieve Dynamics 365 data outside of some of the standard Web Pages. With Web Templates you can do this, but you can’t have all the HTML messing with your data retrieval, specifically JSON-formatted data. Uncheck the header and footer field for that Page Template, and you’re good to go.

Now that you know the importance of Page Templates and the difference between Rewrite and Web Template types, you can begin building or utilizing existing Web Templates to create visually-appealing Portal websites.

This may also be a good time for you to review the fundamentals of Portal Web Pages, or the Portal Entity Lists and Portal Entity Forms that can be used with them.

If you have questions about any aspect of using Portals in Dynamics 365, please connect with us!