The Microsoft Power Platform received quite exciting announcements during Microsoft Build, from Power Pages joining the Power Platform family as its own standalone product to help enhance productivity among teams and organizations through allowing citizen and professional developers to seamlessly build websites by using low code/no code or using professional developer tools like Visual Studio code.
Objectives
- Understanding Power Pages
- Power Pages Capabilities
- Getting started with Power Pages
- Building your first website with Power Pages
- Create your first website
- Use the Design studio
- Create and design pages
- Style your site/page
Understanding Power Pages
Microsoft Power Pages is a secure, enterprise-grade, low-code software as a service (SaaS) platform for creating, hosting, and administering modern external-facing business websites. Whether you're a low-code maker or a professional developer, Power Pages enables you to rapidly design, configure, and publish websites that seamlessly work across web browsers and devices.
Power Pages is the newest member of the Microsoft Power Platform family. With Power Pages, you can build sites by using the same shared business data stored in Microsoft Dataverse that you use for building apps, workflows, intelligent virtual agents, reports, and analytics with other Microsoft Power Platform components in your organization.
Power Pages Capabilities
- Simplified authoring experience for makers – You can create new sites directly from the Power Pages home page by using the default template, or choose the existing industry-based starter templates depending on your requirements
A picture showing a list of available templates on Power Pages
- Design Studio – Similar to PowerApps Design Studio, you can build powerful and engaging sites without writing a single line of code using Power Pages Design Studio
A picture showing the Power Pages Design Studio
- Responsive rendering – Power Pages is based on Bootstrap, which natively provides support for building websites that are responsive, mobile-friendly, and available in various form factors for better User Interface and User Experience.
A picture showing form factors and responsive rendering on Power Pages site
- Advance development capabilities for pro developers – Citizen developers can work with pro developers in fusion teams to extend the functionality using Visual Studio Code and the Microsoft Power Platform CLI to create powerful business application websites. You can also use the code editor within the Power Pages Design Studio.
A picture showing a Power Page site page edited using VS Code
- Security and Governance - Power Pages security allows organizations to securely enable access of their business data to their users (internal or external) through Power Pages authorization rules.
Getting started with Power Pages
To start building sites with Power Pages, you have to first sign up for a free 30-day trial using the following steps:
- Go to Sign-up for Power Pages, and then select Try it for free
A picture showing a sign-up page for Power Pagess
- Follow the onscreen guidance to enter the work or school email address, backed by Azure Active Directory, to sign up for a trial license.
- On subsequent screens, answer a few (three) questions that won't take more than two minutes to answer, so we can provide you with the best experience of creating sites.
- Choose a template that best aligns to what you want to use your site for. If none of the business need templates match what you're looking for, choose the Default design template for cross-industry solutions.
- Review the template description, and then select Choose template.
- You can then provide a meaningful name for your site and a meaningful web address based on your requirements, but you can edit the name and URL to suit your needs. To create a site, you can either create a new Microsoft Power Platform environment or select an existing environment that includes your data, where you have the necessary permissions.
A picture showing how to provision a site after signing up for Power Pages
- After you've added all required details, select Done.
- The process will take a few moments to set up your site and environment. After the site is created, you'll see your new site in the design studio, where you're provided with a short tour of the design studio features.
- As soon as you make changes to your site, you can select Preview to preview your site by using a web browser or by scanning a QR code on a mobile device.
- If you revisit Sign-up for Power Pages and select Sign-in, you'll be redirected to the Power Pages home page. You'll see your site listed on the Power Pages home page.
A picture showing how to manage a site after provisioning it on Power Pages
Building your first site with Power Pages
Create a site
Power Pages provides a list of templates to choose from to quickly build your site. Customize and design your 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
- Go to Power Pages
- Select the Microsoft Dataverse environment in which you want to create a site in.
A picture showing how to choose an environment to create a Power Page site in
Note: 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. - On the home page, select Create a site.
A picture showing how to create a site on Power Pages
- Select Default design template, and then select Select template.
A picture showing the default template site on Power Pages
Note: The default site is generic and can be modified for various business scenarios. You can also choose a business-need template that best matches your specific scenario. - Validate the default site name and web address that have been created, and then select Done.
A picture showing how to provision a site on Power Pages
Note: It might take a few moments for your new site to be provisioned. You'll be able to modify the name and web address later. - After the site is created, you can begin to edit or preview your site.
A picture showing how to manage a site on Power Pages
Use Design Studio
The Power Pages design studio is an intuitive interface that enables low-code makers to build and configure rich business web apps.
- Go to Power Pages
- Select the site you created on the previous step, and select Edit to launch the design studio.
A picture showing how to launch the Design Studio on Power Pages
- If you don't have a site created, select Create a site to create your website.
The design studio has four maker experience which are called workspaces that allow makers to focus on specific jobs on the site development process. These are:
- Pages workspace enables you 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 workspace lets you apply global site styles. You can apply corporate branding updates, and review the changes in the preview on the right side of the app window. Styling offers 13 preset themes.
- Data workspace lets you easily model, visualize, and manage business data for the site with tables, forms, and lists. You can create and edit Dataverse tables for the site and create new or edit existing model-driven forms and views. Changes made in the Data workspace are stored in the Common data store.
- Set up workspace enables site administrators to configure site settings such as identity providers, security and permissions, go-live configurations, and progressive web app (PWA) settings
A picture showing the four workspaces within the Design Studio
Create and Design pages
A page in Power Pages is a webpage: a container for content that's identified by a unique URL in a website. A page is one of the core objects of the website. The Pages workspace enables you 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. Create a page in Power Pages following these steps:
- Open the design studio to edit the content and components of your Power Pages site.
- On the left pane, select Pages, and then select one of the plus signs (+).
- Selecting the Add a page icon in the Main navigation section adds a new page, which will also add a menu item to the default navigation of the site.
A picture showing how to add page navigation on a Power Page site
- Selecting the Add a page icon in the Other pages section adds a new page, but won't add a link to the default navigation of the site.
- Selecting the Add a page icon in the Main navigation section adds a new page, which will also add a menu item to the default navigation of the site.
- Choose a page from standard layouts provided to you, or choose a custom layout.
A picture showing how to add a page to a site in Power Pages
- You can add components to your page by customizing your page
- You can preview your site by selecting Preview from the command bar. Select Desktop to preview your page in a browser, or scan the QR code to view the page on a mobile device.
A picture showing how to preview a page/site in Power Pages
Style your site/page
Power Pages contains a robust set of themes and tools to use to style your site. Choose from several preset themes that you can apply to your portal. The Styling workspace lets you apply global site styles. You can style your page by following these steps:
- Open the design studio
- On the left pane, select Styling.
A picture showing the styling workspace in Power Pages
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 adjust each theme. Text options include font, weight, size, and color.
- Choose between Save Changes or Discard Changes after you've made your edits.
- To reset a theme to its original state, select the ellipsis (...) and then select the Reset to default option. (This is optional)
A picture showing how to reset a theme for a site in Power Pages
If you want to see all of the knowledge in action, you can watch the session on Power Pages now on demand
