Building a website with Power Pages Part 1

6/30/2022

3. 

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

 

 

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

 

 

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

• 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

• 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.

• 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.

• 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

 

 

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:

1. Go to Sign-up for Power Pages, and then select Try it for free

2. Follow the onscreen guidance to enter the work or school email address, backed by Azure Active Directory, to sign up for a trial license.

3. 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.

4. 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.

5. Review the template description, and then select Choose template.

6. 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.

7. After you've added all required details, select Done.

8. 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.

9. 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.

10. 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.

Building your first site with 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

1. Go to Power Pages

2. Select the Microsoft Dataverse environment in which you want to create a 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.

3. On the home page, select Create a site.

4. Select Default design template, and then select Select template.

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.

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

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.

6. After the site is created, you can begin to edit or preview your site.

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.

1. Go to Power Pages

2. Select the site you created on the previous step, and select Edit to launch the design studio.

3. 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

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:

1. Open the design studio to edit the content and components of your Power Pages site.

2. 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.

•  
• 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.

3. Choose a page from standard layouts provided to you, or choose a custom layout

4. You can add components to your page by customizing your page

5. 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.

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:

1. Open the design studio

2. On the left pane, select Styling.

Note the list of themes in the Styling workspace. Further customization can be done with the styling menu.

3. 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.

4. Choose between Save Changes or Discard Changes after you've made your edits.

5. To reset a theme to its original state, select the ellipsis (...) and then select the Reset to default option. (This is optional)

 

Nếu bạn muốn xem tất cả kiến thức trong thực tế, bạn có thể tham khảo thêm video về Power Pages

 

Source: techcommunity.microsoft.com