As we have seen in our previous blog post(s), Power Pages is built on top of Power Apps portals. So, the Power Pages site also follows the same permission model. In this blog post let us refresh our memory on the Power Apps portal permission model at a very high level
Power Apps portal/Power Pages site can be accessed by two types of users. Authenticated users and Anonymous users. Portal can be accessed by either one set of users or a combination of the below two sets.
Authenticated Users – Users will be logging into the site to see the website content
Anonymous Users – Users do not need to be logging into the site to see the website content
Points to remember
Below points should be kept in mind before we understand the Power Apps Portal or Power Pages permission model
Dynamics 365 users or Dataverse users are not by default your uses in the Power Apps portal or Power Pages site
Dynamics 365 users or Dataverse users should register on the Portal login page to become portal user.
Power Pages/Power Apps portal will create a “Contact” record in the Dataverse table while the user register on the site login page
Portal is running on a separate security model. i.e., Dynamics 365 roles will not apply to the Portal
If the contact record already exists in Dataverse, they can be invited to the portal using out-of-the-box
Permission Model at a simple glance
A picture shows the Power Pages / Power Apps portal permission model
Web Roles
Web Roles is a container of a user’s permissions. Meaning this itself will not give any permissions instead it is just a placeholder of either the page level permissions or table level permissions. Dataverse Contact Record will get assigned to a single Web Role. Web Role will have Page-level permission (If permission is set at page level) or Table-level permission (if permission is set at table level) or a combination of both.
This web role will then be assigned to a portal contact/user and the user will receive the defined permissions
Pages Permission
Pages are nothing but a place where you will display the data. Permissions can be set as page level. If a page has permission set, then user should have access to access the page. If page does not set any permission, then it can be accessed by even an anonymous user.
In a simple way we can say that a user who does not have access to a certain page will neither be able to see the page in the navigation menu nor will the user be able to navigate directly to its URL without it erroring out
Set Anonymous access to a page
A page with Page available to everyone set to On is available anonymously. This option is available on the root page of a website, or a child page that has the parent page with this option set to On.
A picture shows how page level permission can be set for Anonymous users
Set restricted access to a page
When Page available to everyone is set to Off, the page isn’t available to anyone by default. You can select specific roles that you want to allow access to this page.
A picture shows how page level permission can be set as restricted
Use Select roles to choose which roles will be allowed to access the page. Only users from the roles you select here will have access
A picture shows how page level permission can be set with roles
Child page permissions
A child page can inherit permissions from the parent page, or it can be configured with unique permissions.
Table permissions
If a page have data (Dataverse data) then Table permission need to set properly to make sure users are seeing the correct data
A picture shows how permission can be set to page which has Dataverse table
In the next episode let us see how the Dataverse table (LIST) can be used to work with Dataverse table data.
In this blog post let us go through how we can enable Authentication and Authorization to the Power Pages site and its data
Once the Power Pages site is built then we need to control access to both data and pages to the users. Power Pages is using the Microsoft Dataverse Contact table in the backend to authenticate site users
Power Pages OOOTB Sign-in
Navigate to the Power Pages site
Click on the “Sign-in” link
You will be able to see the below screen which will have 3 different tabs
Sign-in
Register
Redeem Invitation
A picture shows the Sign-in page with different options
Sign-in
Sign in option allows the users to sign into your Power Pages site if they have registered already either as a local user or as an External Sign in (Azure AD).
Users can just enter the username and password to log in if they have registered as local users. If they are Dynamics 365 users (i.e., Azure Ad users) and they have registered already then, they can log in by just clicking the “Azure AD” button.
Note: Even though users are part of dynamics 365, to login to the Power Pages site they must register separately to login by using the “Azure AD” button
A picture shows local login and Azure AD sign in methods
How to Register
A picture is shown on “How to register”
Once users register with the details then they will get stored in the Microsoft “Contact” table. You can see them either by going to the “Contact” table from the Power Pages “Data” tab or Power Apps Portal Management’s “Contacts” tab under the Security section
A picture shows how to navigate and see the Dataverse “contact” table data
Redeem Invitation
The other option to enable/activate the user account for Power Page is by sending the Invitation to the user’s email address.
As an admin, you can do this by using the Power Apps Portal management app
Navigate to the Power Apps Portal management
Click on “Invitation” under the Security tab
Click on “+ New”
Type name of the user
Select whether the invitation is to invite a user or a group
Set the invitation expiration date
Select the contact from the “Inviter” tab or create a contact record and then Save
To send the invitation click on “Flow” and the “Send Invitation”
Once the invitation is sent the user can copy the code
Copied code can be put into the “Invitation Code” section under the “Redeem Invitation” tab
Click “register” to register and login to the website
A picture shows about the Invitation setupA picture shows – how to send the invitationA picture shows how to redeem the generated code
Point to keep in mind
Microsoft recommends that you use the Azure Active Directory B2C (Azure AD B2C) identity provider for authentication and deprecate the local identity provider for your portal
In the next episode let us see how the Permission model is defined in Power Pages.
In this blog post let us go through the list of components available out of the box in the Power Pages.
Available Components are;
Sections
Text
Button
Image
Video
Spacer
Power BI
List
Form
Frame
Before we see how Power Pages components look like let us see what the modern SharePoint page Section and adding a Webpart looks like. Below are the pictures from both modern SharePoint and Power Pages.
If you are familiar with modern SharePoint, then you might have realized that both are looking similar. Otherwise please be informed that both the application components setup screen are having similar look and feel.
Microsoft is making sure that end users, and pro developers should not feel that altogether there is a different product, and something needs to be learned to utilize.
A picture shows how modern SharePoint page components setup looks likeA picture shows how the Power Page Components setup page looks like
Now let us start with individual components
Sections
Sections are nothing but a placeholder to hold the other Power Pages components and to define the Page Structure
How to add a section
Go to a Power Page
Hover over any editable canvas area, and then select the plus sign (+)
Select one of the sections type out of 6
A picture shows different section layout optionsA picture shows different section layout looks likeA picture shows a different section layout that looks like
To set/change the Section background color
A picture shows the section background color setup option
To set/change the Section background image
Click on “Background” -> Image -> Add an Image
To select the existing image, click on “media library”
To upload a new image, click on “Upload Image”
Select an Image to set as a background
Click OK
Check the background image set as a background of the section
A picture shows the section background image setup option
To change the page layout -> click on Layout
A picture shows the section layout change setup option
To align the Content of the page section à click on the alignment icon
A picture shows the alignment option
To align the section style -> click on the settings gear icon
A picture shows the section style setup option
To move & remove the section à click on the “…” icon
A picture shows the section setup
Text Component
Text component is used to add Text to the pages within a section
Go to a Power Page
Hover over any editable canvas area, and then click on the “text” icon
Different options can be seen on the below page
A picture shows different “text” component option
Button Component
The button component is used to add buttons to the pages within a section
Go to a Power Page
Hover over any editable canvas area, and then click on the “button” icon
Different options can be seen on the below page
A picture shows a different “button” component option
Image Component
The image component is used to insert images to the pages within a section
Go to a Power Page
Hover over any editable canvas area, and then click on the “image” icon
Different options can be seen on the below page
A picture shows a different “image” component option
Video Component
A video component is used to add a video to the pages within a section
Go to a Power Page
Hover over any editable canvas area, and then click on the “video” icon
Different options can be seen on the below page
A picture shows a different “video” component option
Spacer Component
Spacer component is used to add space between two sections
Go to a Power Page
Hover over any editable canvas area, and then click on “spacer” icon
Different options can be seen from the below page
A picture shows a different “spacer” component option
Power BI Component
Power BI component is used to add PBI Reports to the pages within a section
Go to a Power Page
Hover over any editable canvas area, and then click on “Power BI” icon
Detail setup of this component will be covered in a dedicated upcoming blog post
Different options can be seen from the below page
A picture shows a different “Power BI” component option
List Component
A list is a data-driven configuration used to render a list of records without the need for a developer to surface the grid in the portal. Lists use Dataverse views to display records on the portal. A list displays data in a grid view on Power Pages sites. Lists on pages are created from Dataverse table views
Go to a Power Page
Hover over any editable canvas area, and then click on “list” icon
Detail setup of this component will be covered in a dedicated upcoming blog post
Different options can be seen from the below page
A picture shows a different “list” component option
Form Component
A form is a data-driven configuration that collects data in Power Pages sites. Forms on pages are created from Dataverse table forms
Go to a Power Page
Hover over any editable canvas area, and then click on “list” icon
Detail setup of this component will be covered in a dedicated upcoming blog post
Different options can be seen from the below page
A picture shows a different “form” component option
iFrame Component
iFrame component can be used to embed a webpage of other websites to a Power Page
Go to a Power Page
Hover over any editable canvas area, and then click on “list” icon
Different options can be seen from the below page
A picture shows a different “I frame” component option
In the next episode let us see how we can set up Authentication to a Power Page site to secure.
In this blog post let us go through the list of features available for Site Administrators and how a Site Administrator can use different tools and methods to maintain and secure the Power Pages.
As we have seen earlier, Power Pages are built on the foundation of Power Apps portals. Many of the tools and methods used to configure Power Pages use the functionality of Power Apps portals.
Set up
Many Administrators features can be accessed from the “Set up” tab in the Design Studio
The picture shows the different options available in part of the “set up” tab
Authentication
Authentication can be set by using different authentication providers. By default, Local sign-in and Azure active directory sign-in are enabled. Other sign-in methods can be enabled. Let us discuss this feature in deep later as a separate blog post
The “New Provider” button can be used to add & setup a new Identity Provider
“Authentication setup” can be used to set up different authentication setups
External login: External authentication is provided by the ASP.NET Identity API. Account credentials and password management are handled by third-party identity providers, for example, Facebook, LinkedIn, Google, Twitter, and Microsoft.
When set to On, users sign up for access to the portal by selecting an external identity to register with the portal. After it’s registered, an external identity has access to the same features as a local account. See Manage external accounts for related site settings.
When set to Off, external account registration and sign-in are disabled and hidden.
Open registration: Enables or disables the sign-up registration form for creating new local users.
When set to On, the sign-up form allows any anonymous user to visit the portal and create a new user account.
When set to Off, new user account registration is disabled and hidden.
Require unique email: Specifies whether a unique email address is needed for validating a new user during sign-up.
When set to On, a sign-up attempt might fail if a user provides an email address that’s already present in a contact record.
When set to Off, a contact that uses a duplicate email address can be created
The picture shows the “Authentication Options”The picture shows the home page setup based on the different Authentication Setup enablement
Table Permission
Permissions for the user can be set at the table level by using the “table permissions” tab.
The “New permission” button should be used to create new permissions. This will ask for the table, permission level, and access type
The picture shows the table permissions setup option
Power App portal admin center
Site details and Admin settings can be used to set up & configure Power Pages-related configuration. Power Pages uses Power Apps portals admin center to provide administrators with many capabilities.
The picture shows the Power App portals setup option
Capacity consumption reports
Capacity consumption reports show the number of sign-ins (“logins”) and page views for Power Pages
To see the report or set up the report follow the below steps:
Click on the “resources” tab and then the “capacity” tab
Click on “Add-ons”
Download the report and see OR
Click on “Manage” select the Power Pages site and hit “Save”
The picture shows the Capacity Reports-related setup
Update Solution
The site administrators should update the solutions to make the new solutions available for use When we add a Power Pages site to an environment, many solutions are installed. Periodically, new solutions updates are made available. Updating solutions for Power Pages follows the same process as updating solutions for Power Apps portals
Click on the “resources” tab and then the “portals” tab
Select the Power Pages site which you want to check and update the solution
Click on the “Check portal package(s) for upgrade”
Click OK if the upgrade is available
The picture shows how to upgrade the Solution Package(s)
Error Logs
Error logs can be seen by the administrator by following the below steps. This will be used to debug and fix the Power Pages related issues
Go to Power Apps portals admin center
Click on “Portal Actions”
Click on the “Enable diagnostic logging” option
Connection String of Azure Blob Storage service: URL of the Azure Blob Storage service to store the portal error logs. The maximum length of the URL is 2048 characters. If the URL is longer than 2048 characters, an error message appears. More information on connection strings: Configure Azure Storage connection strings
Select retention period: Duration to keep the portal error logs in blob storage. The error logs are deleted after the selected duration. You can select one of the following values:
One day
Seven days
30 days
60 days
90 days
180 days
Always
Select Configure
Once diagnostic logging is configured, a new telemetry-logs blob container is created in the Azure storage account and the logs are written into the blob files stored in the container. The following screenshot shows the telemetry-logs blob container in Azure Storage Explorer
The picture shows how to enable Error logsThe picture shows how to set up a connection string for Azure blob storage from the Power Apps portal admin center The picture shows how the error log report will show in the Azure storage account
There are still many setups & configurations that can be managed by site admins. We have seen just a few. Let us learn about other important site administrators activities in other dedicated blog posts.
In the next episode let us see how we can add different types of components to a Power Page to enhance the Power Pages-based external facing site.
In this blog post let us go through the list of features available for Pro-developers and how Pro-Developers can use different tools and methods to work with Power Pages.
As we have seen earlier, Power Pages are built on the foundation of Power Apps portals. Many of the tools and methods used to configure Power Pages use the functionality of Power Apps portals.
Methods available
Code Editor
Power Platform CLI
Visual Studio Code extension
Tools available
Power Platform Command Line Interface (CLI)
Visual Studio Code
Integrated Terminal
Code Editor to update the Power Pages
The In-Line Code-Editor feature can be used by makers and pro-developers. This can be used by clicking the </> icon from the design studio
The picture shows the In-Line Editor features
The source code is displayed in the code editor pane at the bottom of the screen once code editor icon clicked
To make changes, update the source code and then select Save then the changes will be reflected on the canvas
To discard the changes, click on the Discard button
The code editor supports three docking options:
docked on the bottom
docked on the right side
full-screen edit mode.
The code editor canvas supports HTML editing
To edit JavaScript or custom CSS, select Edit CSS & JS, which will take you to the Portal Management app. From there, select the Advanced tab to make any edits you want in the JavaScript and CSS sections
The picture shows how to Edit CSS & JS
Power Platform CLI to update the Power Pages
App Makers and pro developers can use the Microsoft Power Platform CLI to download Power Pages site metadata and use Azure Pipelines to commit the metadata to source control and deploy from development to other environments
To connect to Power Apps portals/Power Pages, and to use Microsoft Power Platform CLI commands, use Visual Studio Code and the integrated terminal. The integrated terminal makes it easy to connect to the Dataverse environment and to download, change, and upload the portal’s configuration
Authenticate
List all the available Power Pages Site
Download Power Pages content
Change portals content
Upload the changes
The picture shows the list of CLI commandsThe picture shows the Authentication screenThe picture shows changing the content in the Visual Studio Code toolThe picture shows the list of CLI commandsThe picture shows the updated content on Power Pages site
How to Use the Visual Studio Code extension
Install the Visual Studio Code
Search & install the “Power Platform Tools” extension
Open the downloaded Power Pages content by using File à Open Folder
Go to the page on which you want to update the content and update
Enable the “preview” icon to preview the updated content Upload the content back to the Power Pages site
The picture shows how to install the “Power Platform Tools” extensionThe picture shows how to work with the “Power Platform Tools” extension in VS code
Azure Pipelines/DevOps & GitHub tools can also be used for application life cycle management (ALM)
In the last episode, we have seen the introduction of Power Pages, and why Microsoft introduced it. We have also seen different features provided by Power Pages to the different target/fusion group(s).
Now, we can see how we can get started with Power Pages, and as a low code maker or as a Citizen developer how we can set up an exciting external customer-facing website using Power Pages.
How to Start with Power Pages
If you are new to Power Platform and want to work with Power Pages, please click the below URL and then hit “Free”. Follow the onscreen instruction.
You need to use your school/work account. If you are familiar with Power Platform products and have an active account, please click the below URL to access the Power Pages-related portal.
After the above steps, you will see a screen like the below:
A picture shows the home page of the Power Pages
Click “Create a site” to create a new site
Select a “Template” that fits your need
Give a site name that you want
Give a site URL which you want
Select a “Site language” which your site needs to use
Finally, click “Done”
A picture shows the options on how to create a new Power Pages site
After clicking “Done”, this will take a couple of minutes to get your site ready.
A picture shows the Power Pages site getting the ready to message
Once it is ready for use, you can access the site by accessing the “Site URL” which you have given in the “Create a web address” section. in my case: https://rajasubr-site2.powerappsportals.com/
We have created the brand-new Power Pages site now. Let us go through the features list now.
Available Features for Citizen Developers
In the previous post, we learned about the different groups who can create and maintain the Power Pages and the available feature. Let us go through the available features one be one
A picture shows the available features for different Power Pages Fusion/Target group
Maker Studio (Home Page & Gallery)
Maker Studio is nothing but the home page that we are landing when we are logging in to access the Power Pages.
You can create a new site by clicking the “Create a site” button from Maker studio
All the existing Power Pages Sites will be listed
All the existing Power App portals will be listed
A site can be previewed either on Desktop or Mobile by using the “Preview” button on the site
Quick link of a Power Pages site can be copied
Quick URL to manage the Power pages site can be seen
Help materials for some of the admin functionalities can be accessible
If you want to edit a Power Pages site then the “Edit” button can be used
Delete a Power Pages site activity can be carried out
A picture shows the list of options for Power Pages – Maker Studio
Templates Hub
Templates hub is nothing like a place where you can access all the available pre-defined / readymade templates to create a site based on your need.
Currently (as part of the preview feature version) the Templates section will have only 5 templates. out of 5, 2 templates are coming soon. However, once Power Pages are available in the General Availability (GA) this section will have a lot of ready-made templates which we can use for our needs. Templates hub is using all the capabilities like web API, code component and etc
Hover over the template to preview and select the template
The “Preview template” button can be used to get more information about the template and to see how the website will look like
Search Templates can be used to Search a template by using some keyword
Template categories can be used to find a Template that falls under s specific category
Do you have an idea to improve the Templates Hub or do you want Microsoft to introduce a scenario-based template then follow the “Help us improve the template library” button and submit your voice.
A picture shows the list of options for Power Pages – Templates Hub
Learn Hub
Learning Hub is the place where everyone can learn how to use Power Pages to construct an external-facing website. This will have documents, videos, guides to integrate with other Power Platform products, etc. This makes citizen developers, pro developers, and site administrators easy. otherwise, you should come out from the Maker Power Pages portal and search for the learning materials.
This can be navigated by clicking the “Learn” tab from the Power Platform maker studio
A picture shows the list of options for Power Pages – Learn Hub
Design Studio – Pages Workspace
Design Studio is the place where you will design the page from scratch or modify the design of the default pages. You can also manage the pages from here. The beauty of design studio is it will allow you to edit/modify the default pages like access denied page, page not found and etc.
A Page in Power Pages is nothing but a web page. In simple words, this is the container of your text that you want to display to your external facing customer user.
Click on the “Edit” button of the site which you want to edit from the Maker Studio home page
This will navigate you to the Design Studio – Pages workspace
To add a page using the “+Page” button
To see the “Sub Pages”, expand the Pages section
Access denied, Page not found can be found under the “Other pages” section
To add a subpage, please click on the“…” against the Home menu
To add content to the page, click on the page section where you want to edit/update the content
A picture shows the list of options for Power Pages – Pages Workspace
Design Studio – Styling Workspace
The styling workspace is the place where you design/customize the styling of the website. We can navigate to the styling workspace by just clicking the “Styling” from the design studio.
Different Theme can be previewed and selected
The background color of the site can be checked and set
Different Header, Footer can be set/modified
Button color can be set/modified
A picture shows the list of options for Power Pages – Styling Workspace
Data Workspace
The data workspace is the place where you can see all your existing Dataverse tables and data. You can create the new Dataverse table or add data to an existing Dataverse table. Basically, you can do all the CRUD operations here.
Click on the “Data” tab to work with Data Workspace.
A picture shows the list of options for Power Pages – Data Workspace
Points to consider:
As you begin to plan your first Power Pages project, consider the following questions:
Who will use my site?
What will my users do?
What text and content the site will have?
What is shown publicly and what is secured?
What will users use to sign in or register?
How the data will be segmented after users sign in?
How will my users find my site?
Answering these questions will help guide discussions as you embark on your project.
Interesting Factors to know
Code Re-use in Power Pages
Do you feel navigating the Power Pages modules is very easy and its look like other Power Platform Products like Power Apps and Power Automate? This is because the Power Pages use the same code base of Power Apps. This is one of the ways Microsoft is teaching how as a pro developers we need to think and re-use the code
It is not recommended to create a site in the default environment as it is shared across all the users in the tenant, and has a risk of sharing data with unintentional users
A picture showing the addition of the Power Pages to the Power Platform
What are Power Pages & Why It’s needed now?
Before starting with Power Pages, lets us recall the previous tools/features that organizations used to collaborate with external users (suppliers, anonymous users and etc) from Microsoft. Do you recall, Public SharePoint? This was ramped down and later Dynamic Portal was introduced for the same purpose and then Power Apps Portal as part of Power Apps. Now we have Power Pages.
Power pages are the newest addition to the Power Platform Family and this was introduced last month at the Microsoft Build Event May 2022. Power Pages are the evaluation of Power Apps portals. Power Pages is an enterprise-grade low-code no code SaaS platform for creating, hosting, and administrating rich, interactive, data-first, business web pages worldwide. Power Pages enables you to design, configure and publish externally facing websites quickly which works seamlessly across browsers and devices.
It is a Robust & Scalable enterprise-grade hosting platform.
Before we further discuss the Power Pages, let us recall the Power Apps portals.
What are Power Apps portals?
PowerApps Portals are an extension of PowerApps that enables citizen developers and professional developers to build external-facing websites. This allows organizations to sign in with a wide variety of identities, create and view data in Microsoft Data verse, or even browse content anonymously.
Differences between Power App Portal & Power Pages
Scenario(s)
Power Apps portal
Power Pages
Basic HTML, JavaScript, CSS, or Liquid needed?
Yes
No
Support wide options to configure requirements
No
Yes
All the Configuration can be made within the design studio e.g: Identities
No
Yes
Time to design, create, host
More time compared with Power Pages
Less time compared with Power Apps Portal
Power Pages – Who can create?
Power Pages will be created and maintained by the below 3 Major groups.
Citizen Developer /Low-code website maker
Pro Developer
Site Administrators
The below picture shows what are all the features that will be available for each group.
A picture showing the Features that are targetted to each group
Points to be noted
All the existing Power Apps portals will be converted automatically into Power Pages during General Availability (GA) time
All the new Power Pages functionalities will also be available for Power Apps portals
All the Power Apps portals functionalities will be available for Power Pages
Changes will be introduced towards licenses when it goes to GA
Raja Subramanian - Blogs 