Components in Power Pages, a quick overview

As we saw in my most recent post about Power Pages, content of pages are made up of components. In this post I will go through the existing Power Pages components

Available components

The following components are available in Power Pages

  • Text
  • Button
  • Image, Video
  • Spacer
  • Power BI
  • List
  • Form
  • iFrame
Components in Power Pages

The Text component

The text component might look like the simplest of components, but it is actually even simpler than you think.

In the below example there are 4 text components. For each component you can select which style to use. It is possible to make part of your text bold, italic or underlined, however the styles apply to the whole block. The colour of the font, also applies to the whole component.

Components in Power Pages, a quick overview Microsoft Office 365 image 44
Components in Power Pages, a quick overview Microsoft Office 365 image 45

AS we will see in some future posts, it will be possible to go a bit further than this, but when you are looking for the low-code options the Text control may feels a bit limited at the moment.

The Button component

The second component is the Button component. The button component will let you add a button on the page that will the user go to either a page or a URL.

Components in Power Pages, a quick overview Microsoft Office 365 image 46

Note that the button will open the URL or page within the current browser window. If you wanted to make the link open in a new tab, then you could adjust the html code to include something like this:

onclick="window.open('https://sharepains.com','_blank')"

To do this click on the </> icon and your html editor will appear

Components in Power Pages, a quick overview Microsoft Office 365 image 47

The Image Component

The image component lets you add images to a page ( you wouldn’t have guessed that!)

Components in Power Pages, a quick overview Microsoft Office 365 image 48

Please don’t forget to set the Alt text to make your site more accessible. You can find the option under the settings wheel.

Components in Power Pages, a quick overview Microsoft Office 365 image 49

The Video Control

The video control can help you make your site more interesting by display videos from YouTube, Stream, or any other video URL that you might want to display videos from.

Components in Power Pages, a quick overview Microsoft Office 365 image 50

To complete this Video web part you can also specify where you would like the video to start, if video controls are available to the user and if the video autoplays or repeats itself.

Components in Power Pages, a quick overview Microsoft Office 365 image 51

The spacer component

The spacer component beats all other components in simplicity. When you want some empty space in the colour that you specify, this is the web part to use.

Components in Power Pages, a quick overview Microsoft Office 365 image 53

Power BI

The next component to look at is the Power BI component. When you try to edit the Power BI component the first thing that you will come across is the Power BI is not enabled for this portal message.

Power BI is not enabled for this portal message.

For each portal you will have to enable Power BI ( if you want to use it!) in the the Power apps Portal admin center.

Components in Power Pages, a quick overview Microsoft Office 365 image 56

Select the Enable Power BI visualization.

Components in Power Pages, a quick overview Microsoft Office 365 image 58

Once that has been enabled, note that there will be a bit of a delay and reloading your page may be needed.

But before we configure the component, I will also look at the Manage Power BI Embedded Service integration. This is where we select the workspaces available to the portal.

Components in Power Pages, a quick overview Microsoft Office 365 image 57

Once that has all been enabled and the page has been reloaded, the Power BI component will give us a dialog to complete.

Components in Power Pages, a quick overview Microsoft Office 365 image 59

Just select the Access type, Workspace, Type, Dashboard/Report and Tile/Page.

Components in Power Pages, a quick overview Microsoft Office 365 image 60

and now when you select the preview of the page you will find that your Power BI report has been included.

Components in Power Pages, a quick overview Microsoft Office 365 image 61

List

The next component is the List component. The list component displays data from a Table in Dataverse

Components in Power Pages, a quick overview Microsoft Office 365 image 62

Once the List component has been added to the page, you can select the table, and the view of the table.

Components in Power Pages, a quick overview Microsoft Office 365 image 64

The 3rd option on the above form is for you to name the list. This will be how you refer to the data within your pages.

Once you have selected the data you will find that your component will diaplay.

Components in Power Pages, a quick overview Microsoft Office 365 image 65

However, if you haven’t set the permissions on your data before you might get the following error:

Components in Power Pages, a quick overview Microsoft Office 365 image 38

Permissions can be sorted out by using the permission settings. New table permissions can be configured. by clicking the New Table permissions button.

Components in Power Pages, a quick overview Microsoft Office 365 image 66

Form

The form component, gives you an easy option to configure a form on a page.

Components in Power Pages, a quick overview Microsoft Office 365 image 67

You could think about contact us forms , but really you can use any view on any table in Dataverse to feed your form configuration.

Components in Power Pages, a quick overview Microsoft Office 365 image 68

Then you can either create a new record when you use your form or update an existing record or just a display only form.

Components in Power Pages, a quick overview Microsoft Office 365 image 69

When users submit the form, they can either be directed to url or page or a message can be displayed to inform the user that the form has been submitted.

Components in Power Pages, a quick overview Microsoft Office 365 image 71

By default a CAPTCHA is also displayed for your users. However you can switch this off if you prefer this not to be displayed.

iFrame

The last component available in Powr Pages is the iFrame component. iFrames can be used to display content from any url on your page. Simply click on the iFrame URL button and chnage the url to anything you like and the required content will be displayed.

Components in Power Pages, a quick overview Microsoft Office 365 image 72

More about Power Pages

Do you want to know about security in Power Pages? Or how to customize your Power Pages further than just adding components?

If you want to learn more about Power Pages then visit Power Pages – The ultimate user guide.

Continue Reading Pieter Veenstra’s Article on their blog

Components in Power Pages, a quick overview

As we saw in my most recent post about Power Pages, content of pages are made up of components. In this post I will go through the existing Power Pages components The following components are available in Power Pages The text component might look like the simplest of components, but it is actually even simpler than you think.

Blog Syndicated with Pieter Veenstra’s Permission

Author: Pieter Veenstra

Share This Post On