Power Pages SPA: components Part 2

Ref. github.com/AndrewElans/PowerPagesSPA-PowerPagesSetup.

We would need to deactivate/remove or tweak the default Power Pages components and add new.

Go to make.powerapps.com -> select environment 250101

Select Apps -> All -> find Power Pages Management app, or called Power Pages-administrasjon -> click Play.

Websites

Rename Site 250101 - site-250101 to Site 250101

Web Files

Delete all except Cat-PC.png. Open this file and place under Parent Page Page Not Found instead of Home.

Cat-PC.png is the default Power Pages picture of a cat with headphones and PC that is rendered in Page Not Found.

All other files will be provisioned with Vite build uploaded manually for granular control.

Why page-not-found? Files under this page are public files and can be accessed by Anonymous users as explained in the Power Pages SPA: login redirect post, part Default pages with public access.

bootstrap.bundle.js EDITED (search 'fixedbyae' v.5.3.3)`. This file has been edited to fix the modal component behavior as explained in this post.

Note: if you cannot upload the .js file, you have likely missed it in Power Pages SPA: main setup how to enable the js extension, part Privacy + Security so check back there.

Web Templates

Select all and delete except the following:

• Default studio template
• Footer
• Header

We will modify last two, the first one is something used on default pages, it will keep coming back if deleted or deactivated.

Header

See code in the github repo with comments.

When a user does not have an active portal session in a browser, the user is redirected to the /SignIn... route for action as follows:

Our changed header will now automatically redirect to enter user credentials. It will also be catching routing with hash, e.g. #contracts and URL-encode it to %23contracts (if not encoded, redirect to the route #contracts will not work after authentication is successful). It will also be adding login_hint if available for silent authentication.

Footer

Replace code with <!-- empty footer, can be used later in needed -->

We will need to add 3 new templates later:

• index -> for Home route
• page-not-found -> for msal redirect token and functionality to handle routes
• blank -> for Static Assets and Dynamic Assets pages

Web Pages

Diactivate the following as we neither need these routes nor can control behaviour:

• Profile (route /profile)
• Search (route /search)

Access Denied(route /access-denied) we keep but don't use. If we deactivate it, the site will give back Error 500 on any page including Home like this:

So, the page Access Denied is important to keep as this is checking if the user has access or not and then renders the sign in route if not.

We will also add a couple of new pages Static Assets and Dynamic Assets later.

Page Templates

Deactivate:

• AI Search PageTemplate
• Profile
• Search

We will add new 3 new later to cover the 3 new Web Templates.

Site Settings

Existing

This section will be modified shortly...

Select all except the following ones -> deactivate the rest.

• Authentication/OpenIdConnect/AzureAD/ExternalLogoutEnabled
• Authentication/Registration/ExternalLoginEnabled

These are responsible for regestering Microsoft Entra ID users in the Contacts table.

N.B. When Site Settings are changed, resync of the portal in https://make.powerpages.microsoft.com/ is required, but sometimes the changes are not synced immediately, so wait some minutes to see the changes (refresh of the portal cache sometimes help but sometimes not. What can help track if changes are synced is this setting Authentication/OpenIdConnect/AzureAD/Caption that is a title of the button originally titled Microsoft Entra ID. So whenever you change the settings, update the title of this button, and if it's changed, you will see that the changes are synced. I noticed also, there may be some limitation on the title length or presence of spaces, so if it's renamed to bnt1, the button will still have the original full name.