Taking control of your Controls in Power Apps

Sandy Ussia

0 comments

In this article we are going to show you how to take control of your controls with a tour of the ‘Controls’ menu in PowerApps, which can be found on the ribbon under the ‘Insert’ menu here:

Here is a list of the main controls we are going to look at:

  • Buttons
  • Radio buttons
  • Drop down
  • Combo / list box
  • Date picker
  • Check box / toggle
  • Slider / rating
  • Timer
  • Export / Import
  • PDF Viewer
  • Power BI Tile

There is no way we can show every parameter and property of every control, so we will look at each control and build some basic examples of how they can be used as well as interact with the App and the controls around them.

The aim is to build an App that looks something like the picture below, which will give you some good basic use cases of each control so that you can go on and experiment further. We will build it so that selecting each radio button will show a group of corresponding controls with our sample functionality:

Button Controls

So, let’s start with Buttons.

It’s good to start by adding buttons to a screen and see which properties of a button we can change, for example using the relevant properties we can:

  • Change the size on your screen (Width and Height).
  • Change color of a button and the color of it when you hover over or click it (Fill, and HoverFill, PressedFill).
  • We can fade the color of a button (Fill property and the ‘ColorFade‘ function).
  • Round the corners of a button (RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, RadiusTopRight).

There are then other properties of a button we can use to allow us to control what the button does. The main one for a button is, of course, the ‘OnSelect’ property where we can use functions to set what happens when it is clicked e.g.

  • Navigate to another screen.
  • Update or Set a variable to be used in a function elsewhere.
  • Update a collection.
  • Update or Set a property on a control.

The following sections will show some examples to help explain some of the ways to use button properties.

Change The HoverFill Fade on click of a button

HoverFill is the color that a button shows when you hover your mouse over it, and we can use the Fade function to make that more or less transparent. We are going to control one button’s HoverFill at the click of another button.

Step 1 – Start by Adding a ‘button’ to your screen from the ‘controls’ menu. Make it quite large and towards the top left of our screen. This will become our main button for this example.

Step 2 – You can set any of the properties of a control to be equal to a Variable. This gives you the ability to set the value of that variable based on other actions that occur in your PowerApps.

In this Example set the ‘HoverFill’ property of the button we just added to the screen, to be equal to the value of the variable ‘varHoverFill’.

Step 3 – Then set this value by adding a second ‘button’ control to the screen and setting its ‘OnSelect’ property as shown below:

This means that when the app is running, whenever this second button is clicked the main button’s hover color will be set to 50% color fade of the color set in the RGBA part, in this case, blue.

So prior to clicking our second button, the main button would remain dark blue when you hover over it. Once you click the second button (Fade 50% button) the main button would display with 50% fade when you hover over it, as it is in the screenshot.

Change HoverFill Color Setting on click of a button

Step 1 – Now add another ‘button’ from the ‘controls’ menu and set ‘text’ property to whatever you want your button to be called, in our example it is ‘Gray’.

This button is going to be used to change the value of the ‘varHoverFill’ variable, in order to set the HoverFill color of the main button to be Gray.

Step 2 – Following the same process, we used for the Fade button, set the ‘OnSelect’ property of this button as shown below… NB: Notice the different RGBA numbers for this color.

Step 3 – Run the PowerApp or hold down the ‘Alt’ key, your screen should be looking something like this. After you click the button called ‘Gray’, the hover over color for the main button is now gray.

Increase and Decrease Radius Settings on click of an Icon

Radius properties on a button will set how large the curve is on the corners of a button. We are going to use a variable again, this time to change the 4 different Radius properties of the button (RadiusBottomLeft, RadiusBottomRight, RadiusTopLeft, RadiusTopRight). We are going to control what to change them to by using up and down arrows on the screen that the user can click.

Step 1 – Ensuring you select the main button again, select each of the Radius properties mentioned above in turn and set them all to the variable ‘varRadius’, like this:

Step 2 – Now, we need a method of updating the ‘varRadius’ variable value so that the Radius of the button will change when we want it to. We can do this by creating our own little control using icons and a Label to look something like this:

Select an ‘up’ arrow and a ‘down’ arrow from the ‘Insert’ and then ‘Icons’ menu and place them on the screen.

Step 3 – Next we are going to set the ‘OnSelect’ property of each of these icons to increase or decrease our ‘varRadius’ variable accordingly, and in doing so we change the corner shapes of our main button.

For the Down arrow set it as per this screenshot, reducing the setting by 10 each time it is clicked:

For the Up arrow, it would, of course, be the opposite and be ‘+10’ at the end.

Step 4 – Just so that you can see what it is currently set to you can add a ‘Label’ to your screen and set the ‘Text’ property to equal the value in the variable ‘varRadius’ as shown below:

Feel free to also add the label next to these two items and set the Text = “Radius”, so that when you come back to this you know what property this is changing.

Now we should have the main button with its Radius properties all being set to our ‘varRadius’ variable value. The homemade control will now allow you to change that value up and down.

Run your PowerApp and test it, in the example below you can see it has been set to 50% and our button now has curved edges. If you were to set it to 100% then the button would be round.

Show and Hide a label on click of a button

For this example, we are going to use the click of the main button on our screen to show and then hide a label underneath the button each time it is clicked.

Step 1 – Select the main button and choose the ‘OnSelect’ property, and set it as per the screenshot below:

This will mean that the variable is set to the opposite of its own value each time it is clicked, this is achieved by using the ‘!’ NOT operator.

Step 2 – Add another ‘Label’ control to your screen, place it under the main button, set the ‘Text’ property to some sample text of your preference e.g. “This is my text” or similar.

Step 3 – Select the ‘Visible’ property of the label to the name of our variable ‘varButtonDocVisible’.

On doing this the first time your label will be not visible, as the variable has not been set anywhere yet it will be read as ‘False’. Don’t worry you can still select your ‘label’ to edit and change it from the left-hand panel.

Now when we click on the button, the label becomes visible and when we click it again it becomes not visible.

You can run the app from the top right of the screen to try this or simply test it by holding down ‘Alt’ key and clicking the button. Your screen will now look something like this once the button is pressed:

NB: In this example, our Label text has been set to a description of some of the uses of the ‘OnSelect’ property.

Add Controls to a Group

Next, we want to put all these controls on your screen into a Group. Doing this allows us to control some of the properties of the entire group of controls at once.

To do this:

  • Select all controls on the screen, you can do this by:
  • Using the Mouse and lassoing them.
  • Hold down the ‘Ctrl’ key whilst you click each element.
  • Or, as these are the only controls on the screen at the moment select ‘Ctrl-A’, to select all.
  • Whilst they are all selected, choose ‘Home’ from the top menu and then the ‘Group’ option.
  • You will see ‘Group1’ appear on the left-hand menu. Select the ‘…’ and rename the group to ‘grpButton’.

We should end up with something like this, that when you click on it all the controls in a group are listed:

Radio Controls

In this section, we are going to add a set of Radio buttons to show each type of control we are going to discuss and build. The aim is that when each Radio button is selected then the related controls for that section will display. e.g. When ‘Button’ is selected the controls we just Grouped will display, but when another Radio button is pressed they will not be displayed.

We will end up with something looking like this:

Step 1 – From our ‘Insert’ menu go back to the ‘Controls’ list and select ‘Radio’ and name it ‘radioControls’:

Drag the Radio button control that appears on the screen over to the left-hand side of your screen.

Step 2 – We now need to set the Radio button control to have an item per control we are going to discuss. To do this select the ‘Items’ property of the ‘Radio’ control set it to: = [“Button”,”Drop down”,”Combo / List box”,”Date picker”,”Check box / Toggle”,”Slider / Rating”,”Timer”,”Export / Import”,”PDF Viewer”, “Power BI Tile”]

Like this

NB: When using this kind of control in a production App you are more likely to set this using a data collection or data source like a SharePoint list. In this example, we are using a static list.

Our Radio Control will now look like this:

Step 3 – Now we only want the ‘grpButton’ Group created earlier to show when the ‘Button’ Radio button is selected. To do this select the ‘grpButton’ on the left-hand navigation bar, select the ‘Visible’ property as below.

This means the Group will only be visible when that function = ‘True’, which is when the selected value on the Radio Control is “Button”.

NB: This setting will need to be repeated for each Group we are going to create, and you will need to ensure the value in the formula matches the text on the Radio button, in this case, “Button”.

Drop Down Control

Select the ‘Drop down’ Radio button option, to give us a blank screen to start the next section.

The Dropdown control as you might expect allows you to have a list of values, and you have the ability to drive other actions from the user’s selection. In our example, we are going to display a list with two choices of PowerApps and Flow, and on selecting each one it will change which logo image is displayed:

A couple of notes on the Drop Down Control:

  • Similar to a Radio control, we can enter a set of static data using the ‘Items’ property e.g

[“PowerApps”,”Flow”] or you could use a data source of some sort.

  • To get to the value of what the user has chosen we use the <CONTROL NAME>.Selected.Value.
  • To trigger an action when an item is selected on the list we use the ‘OnChange’ property.

As I mentioned above, before we start we need to make the Button group not visible by holding down the ‘Alt’ key and selecting the ‘Drop Down’ Radio Control option, now we have space to work with the Dropdown control.

Step 1 – First we need to add the two logo images (or any two Images you wish to use) to our PowerApp media library. To do this from the top menu select ‘File’ and then ‘Media’. Here you can upload Images, Video and Audio.

Select ‘Browse’ on the right-hand side and select your two logo images, or the two images you decide to use.

Step 2 – Go back to the PowerApp screen and from the ‘Insert’ menu from the ‘Controls’ list select the ‘Drop down’ option. This will add a Dropdown control to your screen.

Set the ‘Items’ property to = [“PowerApps”,”Flow”]

Set the ‘OnChange’ property as shown below to set the variable ‘varDD’ to be equal to whichever value is selected in the Dropdown.

Step 3 – Next we need to add an ‘Image’ control onto our screen. Select the ‘Insert’ menu and then from the ‘Media’ menu select ‘Image’. This will add image control to your screen.

Select the Image control, and set the ‘Image’ property as shown below:

This logic will set the Image to the Flow image if Flow is selected ELSE set it to the PowerApps image.

NB:

  • This assumes your two image files are named “Flow” and “PowerApps”. You may have used different image files.
  • If you had more options, then a more complex statement would be required to achieve the same.

There we have it. Test that it is working by running the App or holding down the ‘Alt’ key and selecting each option from the Dropdown. The image should change each time.

Step 4 – Put our controls into a group. We need to create a group for these controls in the same way we did for the Button controls. Refer back to remind yourself how to do this. The main steps are:

  • Select both the controls and add them to a Group and this time call it ‘grpDD’.
  • Select the Group in left-hand navigation and set the visible property to –

radioControls.Selected.Value=”Drop down” (to match the text of the related radio button).

Now, these controls will only show when the ‘Drop down’ radio button is selected.

With the ‘Alt’ key pressed, select the ‘Combo/List Box’ Radio button option, to give us a blank screen to start the next section.

Combo / List Box Controls

The Combo box is like a Dropdown and can be used in the same way; however, a Combo box allows you to select multiple items from the list, and also allows you to search for items in the list.

The List box allows you to display a list of items. Notes on these controls:

  • As with the Drop down box both these controls can have their ‘Items’ set with a static list or using a data source of some sort e.g. Excel document or SharePoint list and can be updated dynamically based on actions taken in other controls on the screen.
  • As you can select multiple items in the Combo box, you can access the array of the values the user has selected using the argument – <ControlName>.SelectedItems . This is different to the Drop down where we have to use <ControlName>.Select.Value

These controls can be used in many different ways in your App to create a powerful UI.

To give a simple example we are going to add a Combo box and a List box to the screen and set the ‘Items’ showing in the List box to be the ones that have been selected in the Combo box.

Something like this:

Step 1 – From the ‘Controls’ menu choose the ‘Combo box’ option from the list, to add a combo box to our screen. Position it as shown above.

Also from the same menu choose a ‘List box’ option from the list, and Position it as shown above.

Step 2 – Set the data items to show in our Combo Box. In a live App, you are more likely to use a data source for this, however for the purpose of demonstration we are going to add a static list.

This is done in the same way as it is for a Dropdown. Select your Combo box and set the ‘Items’ property to = [“Brown”,”Bowen”,”Smith”].

NB: You can add your own items if you prefer, add enough to allow you to experiment with the Combo box search function.

Step 3 – Set the data items that show in the List box to be equal to the items that the user has selected in the Combo box.

Select the List box and set the ‘Items’ property as shown below:

You can now test your App by holding down ‘Alt’ key, making selections from the Combo box, and they should appear in the List box.

Step 4 – Put our controls into a group. Refer back to the button section for full details of the steps. The main steps are:

  • Select both the controls and add them to a Group and rename the group to ‘grpCB’.
  • Select the Group in left-hand navigation and set the visible property to – radioControls.Selected.Value=”Combo / List box” ( to match the text of the related radio button).

These controls will only show when the ‘Combo / List box’ radio button is selected.

Now with the ‘Alt’ key pressed, select the ‘Date Picker’ Radio button option, this will give us a blank screen to start the next section.

Date Picker Control

The Date picker control as the name suggests provides a nice UI for users to select a given date from, similar to the ones you will have seen in many applications and websites.

Notes on this control:

  • You can use the date that has been selected in your formulas using the following argument –

<ControlName>.SelectedItems.

  • You may want to use this in calculations e.g. Today() – <ControlName>.SelectedItems would give you the number of days from today.
  • You can change or set the ‘format’ property to dictate the format you want the date to appear in. e.g. ‘Shortdate’, ‘longdate’, or ‘dd mmmm yy’, along with many more options.
  • You can either manually set this or dynamically set it based on other actions or conditions in your App. In the below example we are using a Drop down control to set the date format.
  • You can set the ‘DefaultDate’ property to decide which date shows initially.

In the example below, we have the date format of the Date Picker control being set to whatever format is selected in the Dropdown control and we also have a label showing the number of days from today’s date.

So, to build this example.

Step 1 – From the ‘Controls’ menu add a ‘Date Picker’ and a ‘Drop down’ control to your screen. Add a ‘Label’ control to add our calculation into, and position as shown on the screen above.

Step 2 – Set the data items to show in our Dropdown box. Again, for this example, we are going to use a static list.

Select your Combo box and set the ‘Items’ property to = [“shortdate”,”longdate”, “dd mmmm yy”]. You could do other formats to test them out if you wish.

Step 3 – Set the Date Picker control ‘Format’ property to be equal to whatever the selected value is in our Dropdown control. As per the screenshot below (In this case, the control is named ‘ddDateFormat’):

Step 4 – Show the calculation of the number of days from today’s date, as in the example. Select the label you added earlier, and select the ‘Text’ property of that label and set it as per the screenshot below:

This will now set your label to show the formula you have added and concatenate that with the result of the formula to show the number.Now, these controls are ready to test by launching the app or holding down the ‘Alt’ key and try selecting a few dates and some different formats.

Step 5 – As with the other sections we need to Group these controls, and set the ‘Visible’ property of that group to – radioControls.Selected.Value=”Date picker” (to match the text of the related radio button).

This will mean that these controls will only show when the ‘Date Picker’ radio button is selected.

With the ‘Alt’ key pressed, select the ‘Check box/ Toggle’ Radio button option, this will give us a blank screen to start the next section.

Check Box / Toggle Controls

These two controls are both boolean controls, meaning they are on/off, yes/no, true/false, etc. A couple of notes on these controls:

  • To get the current state or selection of them you can use – <ControlName>.Value (the value will always be True or false).
  • You can use the NOT ‘!’ operator to get the opposite of the value.
  • For the check box, you can perform actions on ‘OnCheck’ and ‘OnUncheck’. e.g. Hide or show other controls.
  • Toggles are a good way to show the status of something graphically or to be used to Toggle something on and off.

To look at this we will add a check box and two toggle buttons. We will then drive the default state of the two toggle boxes from the value of the checkbox. We are going to create something like this:

Step 1 – From the controls menu, add one ‘Check box’ control, and two ‘Toggle’ controls to your screen and layout something like they are above.

Step 2 – Select the top toggle control and set the ‘Default’ property to = Checkbox1.Value

Select the second toggle control and set the ‘Default’ property to = !Checkbox1.Value (Note the use of the NOT ‘!’ operator in this case).

NB: This assumes your check box is called ‘Checkbox1’.

Hold down the ‘Alt’ key and give it a go, when you select or unselect the check box at the top it should toggle the two toggle controls to be the opposite of each other.

Step 3 – As with the other sections we need to Group these controls, and set the ‘Visible’ property of that group to – radioControls.Selected.Value=”Check box / Toggle” (to match the text of the related radio button).

This will mean that these controls will only show when the ‘Check box / Toggle’ radio button is selected.

Now hold down the ‘Alt’ key and select the ‘Slider / Rating’ Radio button option, this will give us a blank screen to start the next section.

Slider / Rating Control

The slider control is a great way to allow the user to select the size or an amount of something without having to type or to display an indication of the size or amount of something to the user.

The Rating control is kind of similar but designed of course with ratings in mind, either to allow a user to rate something, or to show the rating of something on the screen. e.g. 3 stars.

Notes on these controls:

  • Good for entering/displaying scale values.
  • Use the ‘Default’ property to set a value.
  • Use <ControlName>.Value to get the current state or value set, e.g. after a user has interacted with the control.
  • Use ‘Min’ and ‘Max’ properties to set the from\to scale of the control.

To understand this control a little further we are going to use 1 slider to control the scale of another slider and rating control.

The second slider and the rating control will also be set to the same value as each other, and from this value, we will build a pie chart as a way to show the data. It should look something like this:

Step 1 – Add two ‘Slider’ controls, a ‘Rating’ control, and from the ‘Charts’ menu add a ‘Pie chart’. Position them something similar to the above example.

The first slider control is going to set the scale on the other two, we can call this ‘sldMax’.

The second slider control is going to be linked to the rating control, but also provide the data source to our Pie chart. We can call this ‘sldRating’.

Step 2 – Set the ‘Max’ property of the ‘sldMax’ slider control to = “10”.

Step 3 – On the second slider and the rating control, we want to set the Scale (or the number of stars available on the rating control) to be equal to the value set by moving the first slider. To do this set the ‘Max’ property of both of these controls as shown below:

Now whenever you change the top slider, the number of stars on the rating control and the size of the scale on the second slider control will go up and down.

Step 4 – Now we are going to use the Pie chart control to show the values represented by the second slider.

Select the Pie chart control and update the ‘Items’ property as shown below:

This will set the 2 values in this pie chart, the first one to the value of the slider, the second to that value subtracted from the maximum. Now hold down the ‘Alt’ and test if your controls are interacting as described.

Step 5 – Final step is to Group these controls, and set the ‘Visible’ property of that group to –

radioControls.Selected.Value=”Slider/Rating” (to match the text of the related radio button).

This will mean that these controls will only show when the ‘Slider / Rating’ radio button is selected.

Hold down the ‘Alt’ key and select the ‘Timer’ Radio button option, this will give us a blank screen to start the next section.

Timer Controls

The Timer control is a very powerful control. Some notes on the Timer control.

  • The Timer control will not work by holding the ‘Alt’ key down like most other controls and functions, you must be in the play mode for the Timer to trigger.
  • By default, the ‘Duration’ property will be set t0 60000 milliseconds, which represents 60 seconds.

To explore some of what you can do with a Timer control we are going to:

  • Create a count down.
  • Create an animation – make a plane fly across the screen.
  • Show the value of the timer on a label in milliseconds.
  • Add a reset button.

Something like the screenshot below:

Add all the Controls and set up the Group

Step 1 – From the ‘Controls’ menu add a ‘Timer’ control to your screen.

Step 2 – Add two Labels to your screen one to show the value of the Timer and the other to do the countdown.

Step 3 – From the ‘Icons’ menu add the Airplane icon to your screen.

Step 4 – From the ‘Controls’ menu add a Button to your screen, call it ‘btnReset’. Position the all as per the screenshot above, and then we will add them to a group.

Step 5 – Create our Group – We need to create our Group upfront this time as we use properties of it in some of our formulas.

Select all the controls we have on the screen so far and add them to a Group called ‘grpTimer’, and set the ‘Visible’ property of that group to – radioControls.Selected.Value=”Timer”. (to match the text of the related radio button).

This will mean that these controls will only show when the ‘Timer’ radio button is selected.

Timer label

This label will simply display the value of the Timer control in Milliseconds.

Set the ‘Text’ property of the first label as per the screenshot below:

Doing this is not likely going to be useful in a PowerApp when it is live, however, it is very useful when building your PowerApps to be able to see what the timer milliseconds value is. A similar approach is useful with many of the other controls.

Count Down

Set the ‘Text’ property of our second label as per the screenshot below:

This is setting the label to show a maximum of 0 or [20 minus the timer number of seconds]. The Number of seconds being arrived at by dividing the ‘Value’ of the timer in milliseconds by 1000.

Plane Animation

We are going to make an Icon move across the screen using the Timer control to set the X value of the icon.

Step 1 – From the ‘Icons’ menu add the icon of your choice to the screen. For our example an Airplane.

Step 2 – Set the ‘X’ property value as per the screenshot:

This will set the X position to the value of the Timer control divided by 50. You can play around with that 50 figure to speed up or slow down how fast your plane moves.

NB: The X value of an icon indicates its horizontal position on the screen or within the group the icon control is in. The Y value of an icon would work in a similar way for the vertical position.

Reset Button

Step 1 – Select the Reset button and set the ‘OnSelect’ property as below:

This will set the variable ‘VarTimerReset’ to equal true, and this variable will be used in the Timer to trigger the reset.

Step 2 – Select the timer control and set the ‘Reset’ property to – ‘varTimerReset’

This means that when the Reset button is clicked the variable will be set to true and therefore triggering the reset property of the timer to reset it.

To test this app you will need to click play in the top right-hand corner of the screen, click the timer and watch the plane move across the screen. The first label shows the timer in milliseconds, the second label counts down from 20, and the reset button should reset it all.

Now select the ‘Export / Import’ Radio button option, this will give us a blank screen to start the next section.

Export / Import Controls

Import and Export controls are pre-configured buttons that allow you to Import and Export PowerApps data to and from collections. When you export data, you create a compressed file that you can copy to another machine or location, but you can’t read it in any program other than PowerApps, then when you import, it is these files you can import from.

Notes on these controls:

  • These controls are designed to work on mobile, and Microsoft say that the export functionality is not supported in web browsers. Although it will sometimes work in some browsers, it’s best to test it on mobile.
  • When you select each control from the menu, they will appear as buttons on your screen.
  • The ‘Data’ property is available for an ‘Export’ control but not an ‘Import’ control. This property is where you set the name of an existing data collection that you want to export. You can set it to the same data collection every time or dynamically set it based on selections made by the user in other controls on the screen.
  • Whilst there is an ‘OnSelect’ property for the ‘Export’ it is not used, clicking the button will trigger built-in functionality of the button.
  • Enabling this functionality in your app may expose it to security vulnerabilities and data leakage. It is recommended to advise users to import only recognized and trusted files and only export data that is not confidential or sensitive.

To show how these work we are going to add a button to our screen to create a data collection, that we can export with export control, and then import to a different collection using the Import control. We will build something looking similar to this:

Step 1 – Add a ‘Button’ control to your screen, this will be used to create a data collection for us called ‘Products’.

Set the ‘OnSelect’ property to equal: – ClearCollect(Products, {Name:”Europa”, Price:”10.99″},

{Name:”Ganymede”, Price:”12.49″}, {Name:”Callisto”, Price:”11.79″})

We are using ‘ClearCollect’ function, this will clear the collection if it already exists and repopulates it, or if it doesn’t exist it will create it and populate it. We could also have used the ‘Collect’ function, this would have created the collection if it doesn’t already exist and added this data, or if it does exist it would add these rows of data to it.

We could also add a ‘Data table’ control to this screen and set the ‘Items’ property to be our data collection. This would show the records in our collection as we experiment with the controls.

Step 2 – Hold down the ‘Alt’ key and click the button to create our data collection. You can check it has worked by selecting ‘File’ and ‘Collections’ and you should see your Products collection:

Step 3 – Set the ‘Export’ control ‘Data’ property to equal – ‘Products’.

This means that when the button is clicked you will be able to specify the name of the export file, and it will export your ‘Products’ data collection to that file.

Step 4 – Set the ‘Import’ control ‘OnSelect’ property to be – Collect(ImportedProducts,

<ImportControlName>.Data)

This will create a data collection called ‘ImportProducts’ and set the values that are in your ‘Data’ property of your import control.

The Data gets in that property using the built-in functionality that the control has. When you click the control, a window will open for you to select the file to import and once you click ‘Open’ our ‘OnSelect’ formula above is triggered.

As mentioned above you may not be able to test this in your web browser.

Step 5 – Final step is to Group these controls, and set the ‘Visible’ property of that group to –

radioControls.Selected.Value=”Export / Import” (to match the text of the related radio button).

This will mean that these controls will only show when the ‘Export / Import’ radio button is selected.

Now select the ‘PDF Viewer’ Radio button option, this will give us a blank screen to start the next section.

PDF Viewer Controls

PDF Viewer is quite a new control and is still marked as ‘PDF Viewer (experimental)’, therefore don’t rely on this in any production PowerApps yet.

Notes on this control:

  • The main property that you set is called ‘Document’, this setting has to resolve to a URL that is https only, has no authentication required, and has no restrictive cross-origin resource sharing (CORS) settings.
  • App users can work around these limitations by opening PDF documents in an external browser, as prompted if the control can’t open a document.
  • There may be times due to these limitations that the file is not visible in the browser session but will be visible to the desktop or mobile app.
  • In a live app the PDF documents might be ones that you have in a SharePoint Library, maybe for a field worker to review some instruction documents on a tablet when on a client site.

To demonstrate this, we are going to create a PDF Viewer control that shows the schedule of 3 teams when the Logo for that team is clicked. You may want to use your own teams and logos, but it will create something similar to the screen below:

Step 1 – Choose which PDF documents you are going to use, it doesn’t have to be team schedules it could be PDF files for anything, get the ‘https’ URL link for each.

You don’t have to use images for the selection it could be 3 buttons, if you are using images then you need to go get those uploaded to the Media library in PowerApps. To do this click on the ‘Files’ menu and then ‘media’. Then at the top right click ‘Browse’, navigate to your images and upload them to this Media library.

Step 2 – Add a ‘PDF Viewer’ control from the controls menu and add the image controls or buttons for the number of PDF documents you are going to preview.

Step 3 – For each of your images or buttons, set the ‘OnSelect’ property of it to set a variable to the URL of the related PDF document (in this case the schedule for the Pittsburgh Penguins):

Each button or image will need the relevant URL for the PDF related to it.

NB: You might (as with our example) use images or buttons in a live app, but you might also use a Dropdown or List control linked to a SharePoint Document library showing each document for the user to select and preview.

Step 4 – Select the ‘PDF Viewer’ control and set the document property to the name of your variable, in our example ‘varTeam’.

Now when you run the app, each time you click on one of the images, it will set that variable to the related PDF URL, and the PDF viewer control will show a preview of the PDF document.

Step 5 – Final step is to Group these controls, and set the ‘Visible’ property of that group to –

radioControls.Selected.Value=”PDF Viewer” ( to match the text of the related radio button).

This will mean that these controls will only show when the ‘PDF Viewer’ radio button is selected.

Now select the ‘Power BI Tile’ Radio button option, this will give us a blank screen to start the next section.

Power BI Tile

This allows you to display a Tile from a Power BI desktop within your PowerApp. Notes on this control:

  • This requires the users that are viewing the PowerApp to have a Power BI license.
  • You need a Power BI pro license to be able to share the Tiles and Dashboard being used.
  • The Dashboard in Power BI has to be shared with the people that are going to view the Tile in the PowerApp.
  • It’s not recommended to have more than three Power BI tiles loaded at the same time within an app.

You will need to have a dashboard set up in Power BI to display, in this example we are showing a Tile called “checkins” as per the screenshot below:

Step 1 – Add the ‘Power BI’ control from the ‘Controls’ menu to your screen.

On the right-hand settings panel, select the ‘No Data’ link as shown in this screenshot.

Step 2 – Choose your Power BI Workspace, Dashboard, and the Tile you want to show from that dashboard.

Click the cross to close this window and within a couple of seconds, the Tile should show in your PowerApp control.

You can run the App and see your Power BI Tile on the screen.

Step 3 – Final step as with all the others, is to Group these controls and set the ‘Visible’ property of that group to – radioControls.Selected.Value=”Power BI Tile” ( to match the text of the related radio button).

This will mean that these controls will only show when the ‘Power BI Tile’ radio button is selected.

Summary

If you have followed every step and done something similar to the example, you will have created a Radio control that lists each of the different controls we have discussed and built examples for. When you run the app and click each radio control, it should make each of the groups of controls visible. e.g. when the ‘Button’ radio button is selected, then the example controls for buttons should display.

These examples only scratch the surface of what can be done with these controls but should give you a good insight into what the main controls are for, how they can interact with each other and the app, and some ideas on how you might use them in your application.

This link will give you some more information on each of the controls and is a great reference to help with some further learning – https://docs.microsoft.com/en-us/powerapps/maker/canvas- apps/reference-properties.

0000-00-00 00:00:00


Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}