DEV Community

Andrew Elans
Andrew Elans

Posted on

Power Pages SPA: components Part 2

#powerplatform #powerapps #powerpages

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:

  • Pages Breadcrumb (these if disabled will return)
  • Default studio template
  • Footer
  • Header

Add new placeholder templates

All with code <!doctype html>. Names can be any, .html is not needed, _ is not needed, just helps better grouping/sorting.

  • _index.html
  • _page-not-found.html
  • _blank.html

We will modify these with Vite.

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

Page Templates

Add 3 new with Type Web Template, select corresponding web template in Web Template, deactivate Use Website Header and Footer except _index.

  • _index -> Use Website Header and Footer On
  • _page-not-found
  • _blank

Web Pages

Add new pages:

  • _Static Assets -> url static-assets -> parent Home -> page template _blank
  • _Dynamic Assets -> url dynamic-assets -> parent Home -> page template _blank

Change page templates:

  • Home -> to _index
  • Page Not Found -> to _page-not-found

Profile (route /profile) and Search (route /search) we don't need and disabled in Site Settings.

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.

Web Page Access Control Rules

Diactivate 2 rules that are provided by default.

Create new:

1) Name restrict read Home

Web page Home -> right Restrict read -> access type Exclude direct child web files -> Save -> Web Roles -> Add existing web role -> Authenticated users -> Add

2) Name

Site Settings

Update as follows:

Authentication/OpenIdConnect/AzureAD/RegistrationEnabled true
Authentication/Registration/AzureADLoginEnabled true
Authentication/Registration/InvitationEnabled false
Authentication/Registration/ProfileRedirectEnabled false
Profile/Enabled false
Search/Enabled false

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.

Top comments (0)