Power Apps on Hat Full of Data

Power Platform Solution and Power BI – Part 2

Sat, 20 May 2023 19:08:20 +0000

Intro – Add a Dashboard

In Part 1 we added a Power BI dataset and report to a Power Platform Solution. In Part 2 we will create a dashboard and add it to the model driven app.

Series

YouTube Version

Create the Dashboard

In the solution click on +New and select Dashboard and then Power BI embedded. When the pane on the right hand side loads, enter in a name for your dashboard. Then make sure Power BI report is selected and select your report from the drop down.

Add the Dashboard to the App in the Power Platform Solution

After the dashboard has been added, you can add the dashboard to a model driven app. Edit the app by clicking on the name of it in the Power Platform Solution. Then click on Add Page and the New page dialog appears. On the first page select Dashboard and then click Next. Then on the next page, select your report, probably at the bottom of the list. Finally click Add to add the dashboard to your app.

Note

At the time of publishing there is a small bug that the report doesn’t show correctly in edit mode but if you publish all customisations it fixes it in play mode. Remember this feature

Testing the Report

As with any addition to a development you should test the report works. In my example the report is a direct query. So my test is check the dashboard, then add a new expense record and then return to the dashboard to check the new record is showing.

Conclusion

For some projects this is enough, an embedded dashboard in the model driven app. The next post will be to add an embedded report into a form.

As in Part 1 here are the resources I’ve used

About Power BI in Power Apps Solutions – Power BI | Microsoft Learn

Power BI Series

Power Platform Solution and Power BI – Part 1

Fri, 19 May 2023 08:26:43 +0000

Power BI reports can be an important part of a Power Platform solution. Microsoft has added a new feature to Power Platform Solutions to add a Power BI dataset and report. Then you can add the Power BI report in as a dashboard or as an embedded report in a form and add context filtering. Part 1 will cover adding the Power BI dataset and report to the solution.

Series

YouTube Version

Preparation

For this post I have a Power Platform solution already. I have a Power BI report connected to the environment and published to a workspace.

Add Power BI to Power Platform Solution

First task is to add the Power BI report to the solution. Start by clicking on Add Existing and from Analytics selecting Power BI report. This will bring the underlying dataset in as well. Then click on From Power BI which will show you a workspace drop down*.

From the drop down, we select the right workspace and then the right report. Then we click on Add.

It takes a while for the dataset and report to be added. Behind the scenes a new workspace is created and the report is copied to there. If you don’t have permission to create a workspace you will get errors.

Checking the New Workspace

I recommend that you check the workspace. Check the credentials in the dataset and refresh the dataset and finally make sure the report opens and shows data. Remember to setup a refresh schedule if your report needs it.

Note the message across the top telling you that this is a workspace connected to a solution and the workspace icon is the Power Apps icon.

Finishing the connection part

The report is connected to this environment’s Dataverse. When the solution is exported and imported the report needs to be connected to the new environment’s Dataverse.

In the solution, I clicked on the three dots and selected Edit. Then a pane will appear on the right. Then select Yes from for the existing connection question and click Save.

Conclusion and Resources

Congratulations, you now have a solution that includes a Power BI report.

This is just Part 1. The future parts will cover adding a dashboard and an embedded report. Here are the resources I have used.About Power BI in Power Apps Solutions – Power BI | Microsoft Learn

Power BI Series

Power Apps – Embed a Power BI Chart

Sun, 31 May 2020 12:57:14 +0000

This post covers how to embed a Power BI chart from a published report into a Power App, handling a tile that doesn’t appear and then filtering the embedded chart.

YouTube Video

Creating the Chart Tile

The report must be published to a workspace that the app users will have access to. When you open in the Power BI service in the visual header is a pin, clicking this will prompt to “Pin” your visual to a dashboard.

When the dialog appears select either an Existing dashboard or a New dashboard. If you are using Themes do remember to select Keep current theme on the left hand side. Click Pin to finish pinning your chart to the dashboard.

When the visual has been pinned you will get a notification in the top right of the browser window with a button to navigate you to the dashboard. The dashboard can also be found in the workspace list. On the dashboard you can see the pinned tiles.

Embed a Power BI Chart

Within your Power App, from the Insert ribbon under Chart, select Power BI Tile. This will open a pane to select the Workspace, Dashboard and Tile. When selected the chart will appear in your app.

Fixing the missing Chart

When I first did this no charts appeared. So a few google searches later I found Power Apps is looking for a title to be set. All of my charts had altered titles. When I tried a chart that just had the automatic title, it worked. A little more digging and I found you can set the title of a tile on a dashboard. Just opening the editor and pressing Apply fixed the problem.

If you have a missing chart try the following:Open the dashboard. On the tile that Power Apps does not see, in the top right hand corner are 3 dots, click to open an options menu. From the menu select Edit details.In the Tile details pane click Apply.Save and refresh your Power App and try re-adding your tile.

The above fix has worked for every problem I’ve had so far. Please add comments if it doesn’t work for you.

Filtering the Chart

Power BI is powerful because charts can be sliced easily. When you only have a single chart from a report you don’t have the option to include slicers and filters. If you examine the Power BI control in Power Apps you will see the TileUrl property for the control is a long url.

An extra parameter can be added to this url to filter the chart. The filter is written as an OData filter. You need to know the table and field names to write the filter. In this example if I look back in the Power BI report in Desktop I can see the Colour field is from the Toys table.

So the filter string to filter to Red will be:

1

"&filter=Toys/Colour eq 'Red'"

The colour could come from a drop down or a variable. Remember to include the single quotes needed around the filter value. Also spacing is important so don’t add any extras!

Conclusion to Embed a Power BI Chart

Embedding a Power BI Tile is a great addition to a Power App but it does have limitations. The dataset behind the Power BI report will need to be refreshed to reflect any changes and refreshed are limited to 8 times a day or 48 times in a premium workspace.

Power Apps – Build a Responsive App – Adding Dynamic Containers

Thu, 09 Apr 2020 16:00:16 +0000

In this post we will use dynamic containers to arrange out content so it moves to the planned location at the different screen sizes. We will need to calculate the screen size and then use it to position and size the containers.

This post assumes you’ve done everything in the first 2 posts.

YouTube version

This series is to support my YouTube video.

The posts for this series are

Calculate Screen Size

In order to make the calculations simple we are going to add a label called AppScreenSize which contains a calculation to classify the screen size to one of small, medium, large and extra large.

For this we are going to use a property of the App object, SizeBreakpoints. It contains a list of numbers for the dividing points of the screen sizes. So under 600 will be small, 600 to 900 will be medium, 900 to 1200 will be large and above 1200 will be extra large.

We then add a label, renamed to AppScreenSize and change the text property to the following formula.

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126


If(
 App.Width

Now the label shows “Extra Large”.

### Adding Title Bar Container

In my example the title bar is the same for every screen size so is the simplest to position and size. It will start in the top left hand corner so x,y will be 0,0. The height is going to be 80 and the width needs to fit the full screen width. The screen is the parent of the container so we can use Parent.Width.

Within the container I’ve placed a text label that will start in 0,0 and the width and height match are Parent.Width and Parent.Height. I also set the text to be AppScreenSize.Text & ” App”. Finally I formatted the text label.

![Title bar dynamic containers](Responsive_203.jpg)

#### MainTitleContainer

X0Y0Height80WidthParent.Width

### First Test

The app is now ready to save and publish. The main test is to check the app resizes correctly and the title bar changes.

![first test of dynamic container](Responsive_204.jpg)

## Adding Dynamic Containers

Now we are going to add the containers that will move based on the screen size. In total there are 4 containers to add. The left hand side people selector, the right hand side people information which will contain the final 2 containers that sit side by side in large and extra large and above each other on a medium screen.

The next container we add is the container down the left hand side. It needs to fit in below the title bar container and fill to the bottom of the screen. For the small screen size the width will be the whole screen width, for all other sizes it will be 350 wide.

![LHS Dynamic Containers](Responsive_205.jpg)

#### PeopleSelectorContainer

X0YMainTitleContainer.HeightHeightParent.Height-MainTitleContainer.HeightWidthSwitch(
    AppScreenSize.Text,
    "Small" , Parent.Width ,
    350
)

The next container is the People Info container for the right hand side of the screen. This will fill the remaining part of the screen for all sizes except small when it will be 0 width and not seen.

Note I coloured the containers just so we could see the sizes.

![People info dynamic containers](Responsive_206.jpg)

#### PeopleInfoContainer

XPeopleSelectorContainer.WidthYMainTitleContainer.HeightHeightParent.Height-MainTitleContainer.HeightWidthSwitch(
    AppScreenSize.Text,
    "Small" , 0 ,
    Parent.Width - PeopleSelectorContainer.Width
)

### Second Test

With the two dynamic containers added we can publish and test again to make sure the PeopleSelector resizes to full screen for the small size and the PeopleInfoContainer takes up the right hand side when for any size except small.

![testing People info dynamic containers](Responsive_207.jpg)

### Nested Dynamic Containers

The last two containers will be child containers of the PeopleInfoContainer. For Large and Extra Large screen size they will sit side by side, for Medium screen size they will be one above the other, and for Small it won’t matter because the parent container will be 0 width.

![nested People info dynamic containers](Responsive_208.jpg)

#### PeopleInfo1Container

XPeopleSelectorContainer.WidthYMainTitleContainer.HeightHeight400WidthSwitch(
    AppScreenSize.Text,
    "Medium" , Parent.Width ,
    Parent.Width /2
)

#### PeopleInfo2Container

XSwitch(
    AppScreenSize.Text,
    "Medium" , Parent.Width ,
    Parent.Width /2
)YSwitch(
    AppScreenSize.Text,
    "Medium" , PeopleInfo1Container.Height ,
    0
)HeightSwitch(
    AppScreenSize.Text,
    "Medium" , Parent.Height - PeopleInfo1Container.Height ,
    PeopleInfo1Container.Height
)WidthSwitch(
    AppScreenSize.Text,
    "Medium" , Parent.Width ,
    Parent.Width /2
)

## Final Test

We now have 4 dynamic containers that should all be responsive to the screen size, so we save and publish.

![final test](Responsive_209.jpg)

## Conclusion

Responsive design takes time, lots of time. This is why good web coders are paid the rate they are paid, it is a skilled job. Building an app to be fully responsive will take time. I hope this post gives you enough to get going along with the resources from Microsoft.

### Resources

Microsoft have some resources found at

[https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout](https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout)

## More Power Apps Posts

- [Transparency Update](https://hatfullofdata.blog/powerapps-transparency-update/)

- [Using JSON Feature to Save Pictures](https://hatfullofdata.blog/powerapps-using-json-function-to-save-pictures/)

- [AI Builder Object Detect Model](https://hatfullofdata.blog/ai-builder-object-detect-model/)

- [Function Component](https://hatfullofdata.blog/powerapps-function-component/)

- [SVG in Power Apps series](https://hatfullofdata.blog/powerapps-svg-introduction/)

- [12 Days of Components](https://hatfullofdata.blog/power-apps-12-days-of-components/)

- [Build a Responsive App series](https://hatfullofdata.blog/power-apps-build-a-responsive-app-planning/)

- [Embed a Power BI Chart](https://hatfullofdata.blog/power-apps-embed-a-power-bi-chart/)

Power Apps – Build a Responsive App – Initial Setup

Wed, 08 Apr 2020 16:09:24 +0000

A responsive app resizes the app based on the browser window and moves parts of the app to make the app work in different screen sizes. The most common sizes to handle are monitor, tablet and mobile phone.

YouTube version

This series is to support my YouTube video.

The posts for this series are

Create the Responsive App

In the video and for my example I design the app based on a the larger size and then calculate where things will move or transform to become the smaller sized app for a phone for example.

App Settings

The first change to make inside the app is to turn off Scale to fit which allow us to control sizing etc.

From under the File tab, click on Settings and then Screen size + Orientation. Scroll down to the Advanced settings and turn off Scale to fit.

Enabling Containers

As of April 2020 containers are still an experimental feature. For the html writers, containers are like the div element. They allow the developer to group items that are sized and positioned within the container, and then specify the size and position of the container. This makes a responsive design possible rather than a very complex design nightmare.

Features can be turn on from File > Settings > Advanced Settings, scroll down and find Containers

Settings Screen Size

By default the screen height of every screen in an app is set to Max(App.Height, App.DesignHeight). This assumes the app is designed small and the screen should expand. I prefer to do the reverse and design the larger size and work out how to scale down. So I set the screen height and width to be App.Height and App.Width.

Conclusion

The app is now ready to add containers to fit the plan we created earlier. The next post will be adding the containers.

Resources

Microsoft have some resources found at

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

Power Apps – Build a Responsive App – Planning

Wed, 08 Apr 2020 15:54:03 +0000

Introduction

Planning a responsive app is vital. A responsive app resizes the app based on the browser window and moves parts of the app to make the app work in different screen sizes. The most common sizes to handle are monitor, tablet and mobile phone. Just like a choreographer has work out the position of every dancer in a dance you need to work out the position and form of different elements at every screen size.

YouTube version

This series is to support my YouTube video.

The posts for this series are

Screen Sizes

Although the app can be made to react to even the smallest screen size change it makes logical sense to work with a few screen sizes and these are based on the width of the screen. The sizes we will work with are small, medium, large and extra large.

Layout Planning

For this series we will be working with a simple people app that will have three layouts. The Extra Large and Large size have the same layout, the Medium size rearranges the info boxes to be on top of each other and the small hides the info box completely and will have navigation to another screen for the info boxes.

Further Planning

Each container will need some planning to select how they will look in the different layouts. For example the Gallery in the Large and Extra Large layouts could container less data as you have the info boxes, where as the small only shows the Gallery on the front screen so although its a smaller screen you might want more information in the gallery.

Conclusion

You need at least a simple wire frame before you start creating the app. Each section of the screen probably needs extra planning but this can be done once you have the app structure working.

Resources

Microsoft have some resources found at

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout

Power BI Series

Power Apps – 12 Days of Components

Fri, 27 Dec 2019 23:37:45 +0000

Madly I decided I was going to do 12 videos on Power App components and they have had a heavy focus using SVG. This post is to provide the code and resources for each video.

Day 1 – Create a Component

Video walks through turning on components, adding an SVG image and then adding the component to a screen within the app.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 2 – Add an Input

This video adds an input, called BaubleColour which is a HEX string, to the Christmas tree component to allow the component user to select a colour for the baubles.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 3 – Use Table Input

This video uses a table of HEX strings called BaubleColours to provide a list of colours for the baubles. The colours are cycled through using a timer control.

SVG Code

1
2
3
4


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "
)

Day 4 – Use SVG Transform

This video does a simple transform in SVG to make the star on the top of the tree rotate.

SVG Code

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 "

)

Day 5 – Flexible Resizing of SVG

Using percentage values within the SVG make the image flexible when the component is resized.

SVG Code

1
2
3
4
5
6
7
8
9


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 
 
 "
)

Day 6 – Patterned Presents

Using SVG patterns and a list of patterns we can add patterns to the present wrappings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 " & LookUp(Parent.Patterns,PatternName=Parent.PatternName,Pattern) & "
 
 
 
 
 
 
 
 "
)

Excel File for SVG Patterns

Day 7 – Add a Tag using SVG Text and Rotate

Using SVG Text and rotate we can create another component to draw a tag that uses an input of the name to label each present.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & Parent.TagName & "
 "
)

Day 8 – Star Rating

Rate your New Year Resolution progress with a star rating drawn with a little SVG and a gallery.

1
2
3
4
5
6


With(
 {StarColour:If(
 ThisItem.Value
 "
 )
)

Day 9 – Fill a shape using SVG Clip

Fill up a heart in colour to visualise a percentage value using a component containing SVG using a clip path.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


With(
 {
 SVG: "",
 ClipWidth: 100 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & SVG & "
 " & SVG & "
 " & ClipWidth & "%
 "
 )
)

SVG Code to fill from the bottom up

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


With(
 {
 SVG: "",
 ClipHeight: 100 * Parent.Score,
 ClipY: 100 - 100 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & SVG & "
 " & SVG & "
 " & ClipHeight & "%
 "
 )
)

Day 10 – Fill Part stars using SVG Clip

Combining the star rating from Day 9 with the clip path from Day 10 we can improve the star rating to show part stars for a score of 2.5 etc.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


With(
 {
 StarSVG: "",
 ClipWidth: 100 * ('Day10 Star Rating Improved'.Score - ThisItem.Value + 1)
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 
 
 " & StarSVG & "
 " & StarSVG & "
 "
 )
)

Day 11 – Draw a Gauge

Draw a simple gauge to show a percentage value using an arch and rotating a line with a simple transform.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


With(
 {
 SVGArch: " ",
 SVGRotate: 180 * Parent.Score
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & SVGArch & "
 - "
 )
)

Day 12 – Add Colours to that Gauge

Lets add some colour to the gauge from day 11 of this series. We look at rotate again and how moving items partly outside the view box hides that part.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


With(
 {
 SVGArch: " ",
 SVGRotate: 180 * Parent.Score,
 RedRotate: -180 * (1 - Parent.RedScore),
 AmberRotate: -180 * (1 - Parent.AmberScore)
 },
 "data:image/svg+xml;utf8, " & EncodeUrl(
 "
 " & SVGArch & "
 " & SVGArch & "
 " & SVGArch & "
 
 "
 )
)

Conclusion

I thoroughly enjoyed building the different components and working out the SVG code to use. I hope you have enjoyed watching. Below is the link to download a zip of the MSApp file for the components.

https://hatfullofdata.blog/wp-content/uploads/2020/01/12-Days-of-Components.zip

Power Apps – Animating SVG Fill Colour and Size

Sat, 23 Nov 2019 23:54:27 +0000

This is the second post in the SVG in Power Apps series. In this post I will introduce animating SVGs by altering the colour and size of the SVG graphic using variables and a timer control.

Series

This series is to introduce ideas for using SVG within PowerApps to add graphics to your Apps.

Introduction to SVG in a PowerApp
Animating SVG colours and sizes
Multi-part SVGs
Rotation and Clip Paths

Selecting Fill Colour

For this post we shall start with a simple circle SVG shape to modify using controls. The code shall start as one circle and the image control will have a border.

The first control will be a drop down to select the colour. We add a drop down with a list of colours as the items and rename it to ColourDropDown.

We then modify the SVG code of the shape to use the selected colour in drop down. The code is now as follows.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

Now the circle changes colour based on the drop down value.

Animating SVG Size

The next stage to use a slider to resize the circle. We add a slider and change the Min and Max values to match the requirements and renamed the slicer to SizeSlicer.

We then modify the code to use the slicer value as the radius.

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

Animating SVG Colour

Getting a user to select a colour or size is a simple introduction idea to modifying the SVG image. The next step is to create a simple animation using a timer to modify the size. On another screen we will add a SVG shape with the fill colour and size based on two variables.

First step is to add a button to setup the variables. Then we change the SVG code to use the 2 variables

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

The next step is to add a timer. In order to make the shape resize smooth I change the duration to 10, ie 10 milli-seconds. Also change the Repeat and Auto start to be on, so the animation will start automatically and continue to repeat.

The next step is calculate what will happen every 10 milliseconds. The size of the shape should increase by one until it reaches a maximum value and then reduce by one until it reaches a minimum. We will need to change the code behind the setup button to set the vvChange to 1.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


If(
 // Reaches maximum so start decreasing
 vvSize >= 60,
 UpdateContext({vvChange: -1}),
 // Reaches minimum so start increasing
 vvSize 

### Colour Animation

The colour of animating SVG can be specified using a hex rgb string. For example #FF0000 is red and #CCCCCC is grey. Power Apps do not include a function to translate from a number to a hex string so in a separate post I explain how to use a component as a function which can be found [here](https://hatfullofdata.blog/powerapps-function-component/) . I add this component and name it DECtoHEX_Blue.

So the we add code to the setup button to create variables vvBlueValue set to 0 and vvBlueChange set to 1. The component is to convert the vvBlueValue into a HEX string, so we put into the component custom property DEC to be vvBlueValue.

Then we add very similar code to the size changing. The final step in the code builds the colour string ready for the SVG.

```xml
If(
 // Reaches maximum so start decreasing
 vvSize >= 60,
 UpdateContext({vvChange: -1}),
 // Reaches minimum so start increasing
 vvSize = 255,
 UpdateContext({vvBlueChange: -2}),
 vvBlueValue 

The animation will now have a circle that grows and shrinks and cycles from black to blue and back again.

### Conclusion

This introduces a concept of using SVG and a timer to create animations for any app. These methods could be expanded to modify the position of elements within the SVG.

## More Power Apps Posts

- [Transparency Update](https://hatfullofdata.blog/powerapps-transparency-update/)

- [Using JSON Feature to Save Pictures](https://hatfullofdata.blog/powerapps-using-json-function-to-save-pictures/)

- [AI Builder Object Detect Model](https://hatfullofdata.blog/ai-builder-object-detect-model/)

- [Function Component](https://hatfullofdata.blog/powerapps-function-component/)

- [SVG in Power Apps series](https://hatfullofdata.blog/powerapps-svg-introduction/)

- [12 Days of Components](https://hatfullofdata.blog/power-apps-12-days-of-components/)

- [Build a Responsive App series](https://hatfullofdata.blog/power-apps-build-a-responsive-app-planning/)

- [Embed a Power BI Chart](https://hatfullofdata.blog/power-apps-embed-a-power-bi-chart/)

PowerApps – Function Component

Sat, 26 Oct 2019 18:24:41 +0000

This post is to describe how I solved a problem using a component. The problem was I wanted to have calculation I could reuse. In a more traditional programming environment I would write a function. Components are reusable so it kind of made sense to use one of them as a function component..

Calculation Details

The calculation I wanted to do was convert a decimal number to a hex number. PowerApps doesn’t have a function to do this so I worked out the calculation. I added a text input to take the decimal number and then a label to contain the calculation.

Create the Function Component

In my app I had already turned on components and added a new component. Shane Young does a great intro to components found here. I then added 2 custom properties. DEC is the decimal value as an input to my component like a parameter to a function and HEX as the returned value.

I then clicked on the HEX Value to enter in a the formula as the following code.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


With(
 {
 FirstBit:(DECtoHEX.DEC-Mod(
 DECtoHEX.DEC,
 16
 ))/16,
 SecondBit: Mod(
 DECtoHEX.DEC,
 16
 )
 },
 If(FirstBit>9,Char(55+FirstBit),FirstBit) &
 If(SecondBit>9,Char(55+SecondBit),SecondBit)
)

Using the Function Component

Back on the screen of my app I can use the component using a slider value as the input. I can hide the component as it doesn’t need to be seen.

I needed a HEX value to use in some SVG for an image. In this example I used a slider to determine red value from 0 to 255. I add the component and pass in the slider value into the DEC. I then use the HEX in the SVG code I’m using in an image. See my Introduction to SVG to explain the SVG part.

I could then add a slider and component for green, blue and transparency to make my image fully adjustable.

Conclusion

Components as function opens many possibilities and as 2 of my favourite PowerApp builders Hiro and Brian Dang use them I’m going to explore them some more.

Update

Thanks to Brian Dang for giving me a tidier version of the calculation using nested WITH functions. So the calculation inside the component is now:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


With(
 {
 CalcValue: Mod(DECtoHEX.DEC,16)
 },
 With(
 {
 FirstBit: (DECtoHEX.DEC-CalcValue)/16,
 SecondBit: CalcValue
 },
 If(FirstBit>9,Char(55+FirstBit),FirstBit) &
 If(SecondBit>9,Char(55+SecondBit),SecondBit)
)

PowerApps – SVG Introduction

Fri, 25 Oct 2019 08:23:17 +0000

This is the first post in the PowerApps SVG series. In this SVG Introduction post we will cover adding a simple SVG drawing to a PowerApp screen. Future posts will show how to manipulate that image.

Series

This series is to introduce ideas for using SVG within PowerApps to add graphics to your Apps.

Introduction to SVG in a PowerApp
Animating SVG colours and sizes
Multi-part SVGs
Rotation and Clip Paths

SVG Introduction

SVG stands for Scalable Vector Graphics and is a language to define a drawing. The drawings are defined by co-ordinates and dimensions which means they can be stretched without loosing definition.

I am not going to give a full introduction to SVG here in this post. I recommend you look at my intro SVG post at https://hatfullofdata.blog/svg-in-power-bi-part-1/ for resources and a brief overview.

Using SVG in a PowerApp

Given the resources in the post above we can write a very simple SVG statement that would work on a web page with the following code.

1
2

The above code draws a circle filled in with red. It is centered in the drawing area and if the area is 100px its radius will 40px, and if expanded to to 400px square the radius will expand to 160px.

In order to use the above code we need to do two things, firstly encode the code using the function EncodeUrl and then add a string onto the front stating the format of the image data. So the above code becomes

1
2
3
4
5


"data:image/svg+xml;utf8, " & EncodeUrl(
 "
 
 "
)

We use the above code by adding an image control to the app and replacing SampleImage with the above code.

The image can be re-sized and moved and it will remain a sharp red circle.

More Complex SVG images.

The above example is a very simple red circle. SVG is a complex language that can define very detailed shapes using paths. You can search online or use latest version of Microsoft Office’s Icons saved to disk to get SVG images. For this example I’m going to draw an owl. I saved an icon from PowerPoint as a picture to create this one but I could have found one on the internet.

When I open the SVG in a text editor I can see I have similar top part and bottom parts and and between them multiple paths and other drawing elements. I have replaced all double quotes ” with single quotes ‘.

In order to keep my image code simple I am creating a variable, vvSVGOwl, to store the SVG, in the start code of the app.

We can then use the variable in an image to draw the owl in the app. (Remember to execute your start code, I always forget!)

Conclusion

This post is a quick SVG introduction for PowerApps. Due to the SVG code being flexible and including lots of other options the possibilities for using SVG are endless.

AI Builder Object Detect Model with Power Automate and Power Apps

Mon, 09 Sep 2019 09:38:06 +0000

This series of posts is to introduce using an AI Builder Object detect model with Power Automate to get and save predictions and then display these predictions over the images in a Power App.

Build the Model
Save Predictions
Use Predictions in a PowerApp

Introduction

In this post I will document building an AI Builder object detect model. We will create the list of items to detect, upload images, identify each image and then train and publish the model. I will be using 2 different types of Lego bricks, 1×2 block and 2×2 block.

This post will be split into multiple parts

Create Entity to store object names
Create Model
Upload and Tag images
Train Model

Create Entity to store object names

Before we can start building model we need to create a list of object names stored in the Common Data Store (CDS) in an entity. We need to create the entity and load object names.

We start in Flow.Microsoft.com and then on the left hand menu click Data and then Entities.

From the top ribbon select New entity which will open a pane on the right hand side. Enter a Display Name for the entity. It will complete the other fields for you.

Click Create to create the entity.

The next stage is to add data to the entity. The easiest way to do this is via Excel. Click on the Edit Data in Excel. A file will be downloaded which you need to open in Excel.

You might need to enable the feature to get the pane to the feature in Excel. Enter in the Object Names and then click Publish to save the values to your entity.

Once the values have been published you can check back in your entity by back on the website and clicking on Data.

If Excel won’t play ball, and for one client it just won’t, then you can use a very simple flow to add the entries.

Create the AI Builder Object Detect Model

On the left hand menu select AI Builder and then Build. The AI Builder currently offers 4 types of model. For this post we are going to build an Object detection model, so click on Object Detection. Then enter a name for your model and click Create.

Select Object Names

The next stage in building the model, is to select the names to be used in the model. Click on select object names. From the panel select the entity you created and tick the Name column and click Select Fields.

On the next screen select the values and click Next.

Add Images

After the object names have been selected you then need to add images for the model to be trained from. Click on the Add Images and this will open a file selection window, select files and click Open.

On the next window it will show all the selected files. Click on Upload to start the upload. When the upload has completed click Close to move onto the next stage.

The next window will show you a summary of your uploads. You can click on +Add Images to add more images to improve your model. You need at least 15 images but more is recommended. Click Next to start tagging your images.

Tagging Images

The next stage is tagging the images. I recommend a cup of tea, some music because this takes time.

Click Next to start the tagging. Thumbnails of the images will be shown. Click on an image to enlarge that image and start the tagging. You can drag a box of an object or it will suggest objects with a white dotted box. Select the tag to apply.

On the right is a summary for this image and on the top ribbon you can choose to not use an image. When you click on the arrow it will move you onto the next image.

When you have tagged all the images, click on Done Tagging in the top right hand corner.

Train Object Detect Model

When you click Next you get shown the details of your model so far. Click on the Train button to start the training.

Training takes a while, the above one took 5 minutes to train. I assume its longer when there are more images and more tags. Eventually your list of models will show a time of being trained.

The last step is to publish your object detect model. Click on the model name in the model list and it will show you a score for the training and give you a Publish button. Click the button to publish your model ready to use.

Conclusion to Object Detect Model

This is a new feature still in preview, so it has its clunky parts, but it brings machine learning firmly into the hands of the citizen developer without any Azure bills.

I really hope in 6 months time I need to write this post again because they’ve added new features and made it slightly less clunky.

PowerApps – Using JSON Function to Save Pictures

Mon, 08 Jul 2019 10:21:38 +0000

In this post I will be explaining how to use the JSON Function to simplify the saving of multiple pictures from a PowerApp to a SharePoint library using Flow. There have been many wonderful workarounds to do this, finally we now have a slightly less Heath-Robinson method.

Set up the PowerApp

I start with a blank app, canvas or phone layout. Because my main client uses Windows 10 tablet / laptops to take the pictures I add a camera control. Then I change the OnSelect property to store the picture into a collection. I include an index column so Flow can calculate a unique filename later.

I then add a blank gallery and change the Items to be the collection populated by the camera, e.g. ccPictures and to make a grid I change the wrap to be 3. I add an Image control to the gallery so as I take pictures it will populate the grid.

Then I take some pictures to populate my collection. Obviously everyone needs photos of their Lego character collection.

In order for the pictures to be passed to Flow to be saved to SharePoint I need to convert the collection into JSON. So I add a button with the following code. Please note the second parameter of the JSON function is IncludeBinaryData as we want to include the pictures which are binary data.

Building the Flow

In the previous section, I created the app to make the JSON string to be processed by a Flow. So I now I will create a new flow with a PowerApp trigger.

The first step to add is a Parse JSON action to convert the JSON into an array. In order for the parameter requested by Flow to be named nicely I rename the step to just “JSON” and then in the Content box I click on Ask in PowerApps. Now the parameter is called JSON_Content. Afterwards you can rename the action back to Parse JSON and it won’t rename the parameter.

For the Schema you need to understand JSON a little. The JSON you return will be multiple rows each with 2 columns, Picture which is a string and Index which is a number. So in a text editor I create small example JSON string with multiple rows of data and copy it.

Then in the Parse JSON action I click on Use sample payload to generate schema and I paste my example in, clicking Done will create the schema.

The next step is for every item in the array to save a picture. So we start with an Apply to each action which will use the Body from the Parse JSON step.

Then we add a SharePoint action to Create file. Site address and path you will need to get from the SharePoint destination. The File Name I create using the Index value.

The File Content uses an Expression. So click on Expression and find the function decodeDataUri. The parameter for the function is the Picture value, which doesn’t appear in the offered Dynamic content, so we need to use the Item() function and then add ?[‘Picture’].

Connecting PowerApp to the Flow

We now have a Flow ready to receive JSON data and save pictures. So we now just need to connect them. In my experience adding a flow to a button that already has code does not end well, I usually loose the existing code. So I add a second button and from the Action ribbon click Flows and connect up my Flow and pass in as the parameter the variable containing the JSON, e.g. vvJSON. Then I copy and paste this code into the button that creates the JSON string.

The app is now ready to test.

Conclusion

The above solution is a very simple example of how the JSON function could be used. Before this went into production I would do better file naming. I have tested the above app to take 30 photos and save them to SharePoint and it worked fine. I assume there is a limit to the size of the JSON.

The JSON function does allow a whole collection to be passed to Flow easily. I will be looking for other possible uses.

PowerApps – Transparency Update

Fri, 07 Jun 2019 17:53:58 +0000

A small update was sneaked in this week to help handling transparency with colours in PowerApps.

ColorValue Function Update

ColorValue function takes a colour value as a hex string and converts it into a colour values. In the example below #FF0000 fills a rectangle in Red.

The update now allows another 2 characters to the string to specify transparency. Like the red,green and blue values the transparency ranges from 0 to 255 or in hex 00 to FF

In the example below the red is made 50% transparent, 80 in HEX is 128 in decimal which is 255 / 2, hence 50%.

Transparent Colour

In the list of available preset colours such as AliceBlue, Aqua etc now includes a colour Transparent.

Conclusion

Small update but one thats very welcome! Now I just want to be able to use ColorFade or similar function to take an existing fill and give a more or less transparent version.

Power Apps on Hat Full of Data

Power Platform Solution and Power BI – Part 2

Intro – Add a Dashboard

Series

YouTube Version

Create the Dashboard

Add the Dashboard to the App in the Power Platform Solution

Note

Testing the Report

Conclusion

More Power BI Posts

Power BI Series

Power Platform Solution and Power BI – Part 1

Series

YouTube Version

Preparation

Add Power BI to Power Platform Solution

Checking the New Workspace

Finishing the connection part

Conclusion and Resources

More Power BI Posts

Power BI Series

Power Apps – Embed a Power BI Chart

YouTube Video

Creating the Chart Tile

Embed a Power BI Chart

Fixing the missing Chart

Filtering the Chart

Conclusion to Embed a Power BI Chart

More Power Apps Posts

Power Apps – Build a Responsive App – Adding Dynamic Containers

YouTube version

Calculate Screen Size

Power Apps – Build a Responsive App – Initial Setup

YouTube version

Create the Responsive App

App Settings

Enabling Containers

Settings Screen Size

Conclusion

Resources

More Power Apps Posts

Power Apps – Build a Responsive App – Planning

Introduction

YouTube version

Screen Sizes

Layout Planning

Further Planning

Conclusion

Resources

More Power BI Posts

Power BI Series

Power Apps – 12 Days of Components

Day 1 – Create a Component

Day 2 – Add an Input

Day 3 – Use Table Input

Day 4 – Use SVG Transform

Day 5 – Flexible Resizing of SVG

Day 6 – Patterned Presents

Day 7 – Add a Tag using SVG Text and Rotate

Day 8 – Star Rating

Day 9 – Fill a shape using SVG Clip

Day 10 – Fill Part stars using SVG Clip

Day 11 – Draw a Gauge

Day 12 – Add Colours to that Gauge

Conclusion

More Power Apps Posts

Power Apps – Animating SVG Fill Colour and Size

Series

Selecting Fill Colour

Animating SVG Size

Animating SVG Colour

PowerApps – Function Component

Calculation Details

Create the Function Component

Using the Function Component

Conclusion

Update

More Power Apps Posts

PowerApps – SVG Introduction