Portal Apps

Power Apps has three types of apps. One of them is the Portal app. In this post a how to get started with these websites that present data from Dataverse.

First steps to building a Portal app

The first steps to take are to decide what you want to present to which users. Or maybe we should even identify who these users are. There is quite a bit more to it all, but I will not focus on that in this post.

Once we know what we want we can look at building the website. The initial create screen at https:/make.powerapps.com makes it all look easy as we only need to select the Blank website option.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 5

Now we are asked to give the basic details of the app that we want to create.

Also notice the option to create new environments just above the form. This will of course only work if you have the permissions to create a new environment.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 6

Once you have completed the portal from blank form the portal will be created. This can take a while.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 7

As I called my portal app after this blog I will see the SharePains Portal app appear.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 8

And Microsoft also sent me an email confirming the progress of my new app

Introducing Portal Apps in Power Apps Microsoft Office 365 image 9

So far so good!

Then there is a second app that will also be provisioned when you deploy your first app. The Portal management app we will see is a very important part of your portal apps.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 10

After a while the app will become available and we can start to use the app.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 11

The first time that we visit the app things might be a bit slow as the site is being created. But before long the website will appear.

A basic Portal App

Editing your Portal App

There are two ways of editing your portal app. One option is through the Portal Management App. the Portal management app may not be the user friendliest way, however it does help to create an understanding of the datamodel of portals.

the other way is to use the Power Platform Studio experience on make,powerapps.com. Both options do have their purpose.

I’m first going to have a look at the Portal Management app. If you just want to get on with editing your portal then feel free to scroll down this post a bit.

Pages in Portal Apps

The first thing that I’m going to look at is pages.In the screenshot above we can see the home page. I’m going to use that to identify some of the elements in the Portal Management app.

Within the section Web Pages, it is quite easy to identify the Home page. Note that if you have multiple portal apps created it might be wise to filter on the Website Column.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 13

When we open that record the home page record will look something like this:

Introducing Portal Apps in Power Apps Microsoft Office 365 image 14

For each page details like the url and the publishing state are kept and a few more things. The actual HTML can be found in the Localized Content section.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 15

But there is more to pages than that.

As visible on the above screenshots there is come stuff above the first bit of page content. The header contains things like the logo and the menu. Then there is also a footer when you scroll down the page.

Page Templates in Portal Apps

As shown above the page template for the home page is the Default studio template.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 16

In the above Page template a Web template is used this web template is where the HTML pages are really being built.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 17

The html on in the default studio template shows us the Include of yet another Web template called page copy.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 18

So far we have seen a few of these source examples including {% …%}. These section in the code are called Liquid. I will go through the details of Liquid in another post soon. For now I will explain the Liquid expressions that we have found so far.

{% editable page 'adx_copy' type: 'html', liquid: true %}

Editable means that whatever is rendered on your page is editable if users have edit permissions. In this case an html page called adx_copy

Time to have a look at editing the pages in the user friendly way.

Editing the app in the WYSIWYG tool

All I have to do is use the Edit option on the Apps screens.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 19

This will give me the easier to use interface to modify my pages.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 20

And now once again we can edit the page templates. For example when we select the Default studio template like we did before in the Portal management app.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 21

We will now see the same code as we saw before but now in the easier to use editor.

Introducing Portal Apps in Power Apps Microsoft Office 365 image 22

And although this editing experienced is a bit better, the limitations are still also very clear as not everything is editable through this new UI. However the new UI does protect you from making some large mistakes that may break your app.

Having said that, you might find yourself switching between the two editing experiences for a while.

Next steps

So far I’ve looked at creating a new portal app. The following posts in this series of posts will include:

  • Authentication models within portal apps
  • Securely showing data from Dataverse on your portal app
  • Learn how to swim with Liquid in Dataverse
Avatar for Pieter Veenstra

By Pieter Veenstra

Business Applications and Office Apps & Services Microsoft MVP working as a Microsoft Productivity Principal Consultant at HybrIT Services. You can contact me using contact@veenstra.me.uk.

2 thoughts on “Introducing Portal Apps in Power Apps”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.