What are Power Pages?

In 2019, Microsoft introduced Power Apps Portals, a solution that allows companies to visible their database with security to outside users. Today, Microsoft has announced that Power Apps Portals will be replaced with Microsoft Power Pages, a tool allowing businesses to build secure, low-code websites that are scalable and seamless.

Power Portals is an enterprise-gee low-code SaaS platform that allows businesses to create, host, and administer rich, interactive, data-driven, business web apps across the globe. However, it was common knowledge in the Microsoft user community that the product lacked solution maturity, low-code features, and the ability to scale. For this reason, Microsoft has chosen to replace Power Apps Portals with Microsoft Power Pages.

Power Pages will give you to ability to provide your clients with restricted access to your Power Platform data in a secure manner without the upfront costs of build a website, for example you can provide your client with access to their own profile within your Dynamics 365 system to add new information or raise new enquiries.

Get Started with Power Pages:

Power Pages provides a list of templates to choose from to quickly build your site. Customize and design the site using the new Power Pages design studio. Choose a default template to build your site or use scenario-based templates to accelerate creating your site.

Creating your first site with Power Pages:

Go to Power Pages.
The first time you visit the site, you’ll be presented with a Try it for free button and be able to sign up for a free, 30-day trial
Select the Microsoft Data verse Environment in which to create a site.

On the Home Page, select Create a site.

On the template page, choose the templates from the options and select Choose this template.

Validate the default site name and web address that have been created, and then select Done.

After the site is created, you can begin to Edit or Preview your site.

Use Design Studio:

Go to Power Pages.
Select your site and select Edit to launch the design studio.

The design studio has four marquee experiences—called workspaces—that focus on specific user jobs:

Pages – To design and build webpages with in-context editing and add content with no-code and low-code widgets such as text, image, video, Power BI reports, lists, forms, and others.
Styling – To apply global site styles. Styling offers some preset themes, for each theme we can customize the color palette, background color, font styles and button styles.
Data – To easily model, visualize, and manage business data for the site with tables, forms, and list
Setup – To enable site administrators to configure site settings such as identity providers, security and permissions.

Main Navigation:

The Power Pages navigation section is where you can build that global navigation. In this section of the Power Pages Studio, you will find pages that are part of your navigation and other pages. Other pages are part of your site, but they aren’t directly available in the global navigation.

When you choose to create a new page, you will first need to give the page a name and then select the layout for the page.

Edit Pages in Power Pages:

Open the design studio to edit the contents and components of your page.
Select the page you want to edit.

In the above page you will find that you can add section in a very similar way to SharePoint Online. You can select the type of section to be a full width, split in two columns or 3 columns.
Then within the creation section you can add components. Components are like SharePoint web parts.

Currently you have a choice of the following components.

Text
Button
Image, Video
Spacer
Power BI
List
Form
I Frame

Home Page:

Go to the Home page in the design studio.
Select the logo and select the image to change the logo.

Upload the image or paste the URL of the image that you want.

Add one column section and change the background.
You can change the background with default colors or image.
Select the section and choose Background option and then Image.

Upload the Image or paste the URL of the Image.

Add the components that you want in the section and customize.

Add text, image or button that you want and customize.

Select the button and then select Edit. Customize the button by changing the name, alignment and link.

Using the editing options, you can:

Edit the button label and destination of a URL or another page.
Select a style between a primary or secondary button style.
Select the horizontal alignment you want.
Define the minimum width and height of the button.
Duplicate the button, move it up or down within the section, or delete the button.

Select whether the button will redirect a user to a specified URL or to a page within a Power Pages site.

Select one column section and add text component.
Enter the custom text in the text box.

To customize the text, we have the following properties.

Style – Title, Heading1, Heading2, Heading3, SubHeading1, SubHeading2, Paragraph and Small Text.
Format – Style the selected text as bold, italics, or underlined.
Alignment – Align the text in the component.
Color – Select the text color based on the defined color palette.
Others – Choose an option to duplicate the section, move it up or down within the page, or delete the text component entirely.

Add three column sections. Select image component and then add the image by uploading or by pasting the URL.

Then Add buttons to each component and customize it by name, alignment and navigating to subpages or to the URL.

Adding a Page:

To create a new page, select the New Page button in Main Navigation. You will see the following tab

Choose the layout and enter the name of the page and Select Add.

More options can be added to the navigation by hitting the New Page or by adding a new subpage or you could even duplicate the selected page.

Styling:

Open the design studio.
On the left pane, select Styling.
Note the list of themes in the Styling workspace. Further customization can be done with the styling menu.
Select one of the preset themes to see how the style is reflected on the canvas workspace to the right. Each theme has its own color palette.
You can adjust the styling menu to make adjustments to each theme. Text options include font, weight, size, and color.

Choose between Save Changes or Discard Changes after you’ve made your edits.
To add a new color or to change an existing color, select the plus sign (+) in the color palette and choose your color using the color picker, hexadecimal value, or RGB values.

After a new color is added to the color palette, it can be used to color components in the context menu.

Data:

With the Data workspace, you can easily visualize and manage business data for the site with tables, forms, and lists. All the data and changes are stored in Microsoft Data verse. You can create and edit tables for the site and create new (or edit existing) model-driven forms and views.

Create a new table:

Next to Data, select + Table.
In the window that appears, enter a name for your table. By expanding Advanced settings, you can modify the plural name of your table.
Select

The table will be created in Data verse. You can now begin to configure your table.

Configure a table:

From the Tables in this site or Other tables section, select the table you want to edit.

In the table designer, modify any existing data rows. In addition, the following options are available

New row – Create a blank row and enter in a new data row.
New Column – Create a new data column for the table. You’ll need to specify the name, data type, and format along with other column configuration options.
Show/hide column – Select which columns you want to be visible or invisible in the table designer.
Refresh – Reload the table data.
Edit table properties – Change the name and other advanced properties of the table.

Form Designer:

On the left pane of the Data workspace, in the Tables in this site section, you’ll see a list of tables that are used in basic forms created in the site. The Other tables section is a list of all Data verse tables in the environment.

Create or Modify a Form:

From the Tables in this site or Other tables section, select the table that you want to either create or modify a form for.
In the table designer, select the Forms
Do one of the following:

To create a new form, select New form.

Enter a name and a description for your form.
Select Create.

To modify an existing form, select the form from Forms in this site or Forms available for this table.

The form will appear in the form designer, which is the same designer used for model-driven apps in Power Apps.
The form can now be configured by adding fields and arranging fields, tabs, and sections.

Table Permission:

Add form component. And select New Form.

Choose a table and select the form. Select OK.

Select the form and then select Table Permission. Select New Table Permission.

Configure Table name, Table, Access Type, Permissions to, and Roles.

Setup:

Power Pages provides integration to multiple authentication providers to allow secure access to external users to your site.

Configure authorized access to your site:

Setting up an external authentication provider will allow you to provide access to your site and provide the mechanism for end users to be able to reset their passwords and other information without administrator intervention.

In the design studio, select Set Up.
Under Authentication, choose Identity Providers. Choose an identity provider from the Setup
Select Configure.
Fill in the details.
Confirm the defaults and then select Next.

Select defaults (new policy) and then select Create.
Select Close.
Select the ellipses next to Local Sign In.
Choose Disable.

Now your users can sign in, register, or redeem an invitation to your site using Identity Provider.

Interested to work with our company? Let's get in touch!

We love to hear from you about your project.

Have a project? Let’s talk.

Note: Give us a call or leave a message, we endeavour to answer all enquiries within 24 hours on business days.