Introducing Portal Apps in Power 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

Note: Portal Apps was recently renamed to Power Pages. Please See my Power Pages series for more details

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.

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.

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

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

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

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.

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

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.

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.

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

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.

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.

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

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

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.

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

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.

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

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