In the first article about Power Pages, I went through the key features and process of site creation. Now we can go through all available components and start creating content pages. Let’s go and check components, navigation options, how to connect the pate with Dataverse tables, and more.
Power Pages Design Studio is the tool that you need to create and manage your pages. There are 4 sections that you can use:
- Pages – use this workspace to create and edit your pages
- Styling – use predefined styles or create a custom one and apply it to your page
- Data – in this section you can manage your Dataverse tables, modify them, and add other ones
- Set up – additional settings for your sites (Identity providers and Table permissions)
Create a blank page
1. Navigate to the Power Pages portal (https://make.powerpages.microsoft.com/) and click Edit your site
2. Open the Pages (1) section and click the +Page button (2)
3. Enter a title for page (1) and select a Template (2). There are 4 templates (blank, Landing page, Page, and Subpage). Click Add button (3) to create the page.
4. Your new page is ready!
Page sections
Sections enable page layout customization. There are 6 types of layouts:
- 1/2/3 column
- One third left
- One third right
- Spacer
You can mix different layouts on one page to properly arrange content.
Page components
There are 10 components available for a page. You can add multiple components to the page.
- Text
The component is designed to enter text with basic formatting.
- Button
The button with a custom title and redirection to a page or an URL.
- Image
Add an image from your computer or enter an URL
- Video
Add a video from YouTube, Microsoft Stream, or using a video URL. You Can configure start time, show/hide player controls, enable Autoplay, and enable loop.
- Spacer – a visual spacer
- List
This component displays data from a selected Dataverse table in a table. You can use existing tables or create a new one.
Important – You must configure permission for the list displayed data.
- Form
A form connected with a selected Dataverse table. You can use this form to create a new entry or edit an existing one.
You can configure actions connected to the submit form and enable/disable Captcha.
- Multistep form
Use this component if you want to create a multi-step form. It uses the same options and data sources as a Form component but this time you can use multiple forms to create more advanced structures.
- Power BI
Display Power BI Dashboard or Report on your page
- iFrame
Embed a website on your page
Manage page and Site map
You can manage your page by clicking the ellipsis.
Available options:
- Move a page to the Other pages This option hides your page from the main navigation.
- Move up/down – move a page in a site structure
- Add a new subpage – add a new page as a subpage to the existing one
- Make this a subpage – move the selected page as a subpage
- Page settings – allows you to change a name and URL of a page
The site sitemap is dynamically created based on the Main navigation. If you change the position of a page, it will be quickly synchronized on the page sitemap. No need to manually update the sitemap.
Summary
Out-of-the-box components provide a lot of options to create and publish website content. You can mix components, move them, or remove unused ones. You can play with layouts to tailor a page to your needs. Design Studio is simple and intuitive so you can focus on a site, not on a tool (I noticed only one freeze during very long sessions).
If it’s not enough, you can always switch to Advanced Editor and modify the HTML code. There is even a way to modify CSS and JS!
