Add fields to SharePoint List using Flow

Last week I’ve explained how to create SharePoint list or library using Microsoft Flow. This time I’ll show you how you can add fields to your SharePoint List using Microsoft Flow, and add items to your list. This will complete the scenario so you’ll get a full solution for dynamic creation SharePoint List along with fields and values.

Automation is the key

Just before I’ll deep dive into the details let’s first cover the question of: why you may even need such dynamic list creation with fields and values?

So imagine you have multiple PowerApps apps for different purposes each ie:

  • time tracking
  • resources booking
  • goals review
  • team members praise
  • retrospective meetings notes

Each app stores data in SharePoint and is team specific – this means some team may want to have it, others not. Also the app data should be team related.

Other often scenario is when you have an app that you want easily deploy in your client’s environment. This was my case when I’ve created my Delegation Playground app that uses SharePoint list – I wanted to automate the process of list creation so app user don’t need to create it manually. I wanted it to be as simple as possible.

In PowerApps there is a Solution concept but it applies only to PowerApps with data stored in Common Data Service (which I highly recommend – check this post of mine) so if your app works with SharePoint Online lists or libraries you may need the below Flow.

The Plan

Ok, so last time we end up with created SharePoint list. Now we need to:

  • Add Number and Boolean fields
  • Add 3000 rows to the list
Image result for over 9000 meme
I wish to make it 9001 but…there are some limits 🙁

Add new fields to SharePoint list using Microsoft Flow

To create new SP field we’ll going to use SP REST API (by using Send an HTTP request to SharePoint action). However this time we need to use new Uri – the one dedicated to list modification. As you can see in this POST request example we need to know list guid to make proper operation. The Uri need to be like:

http://<site url>/_api/web/lists(guid'<your_new_list_guid')

But how to get a newly created list GUID? Oh that’s simple – make a sample call of the Flow we’ve made last time and use data it returns.

Disclaimer: Some of you may already know that there is a simpler Uri API endpoint _api/web/lists/GetByTitle(‘<list name>’) as described here but the way I present brings an additional learning value.

Just follow guideline below 🙂

1. Run Flow that creates list in SharePoint site location
2. Copy its output JSON
3. Add Parse JSON action
4. Put “body” in Content property
5. Click “Generate schema”, paste JSON and click Done
6. Add new string variable
7. As value add id field
8. Selected it and paste into the Expression field
9. Remove closing } and opening @{
10. Add split( on the beginning – we’ll use Split function and use id field value as first argument
11. Add ,’_api’)[1] on the end – we’ll split the string by ‘_api’ substring and take second element from the output collection
The whole expression looks like this:

Now once we have the Uri of our newly create SharePoint list we can use example from this documentation page and use a field type value related to expected field type (all possible sharepoint field types values are here).

Disclaimer: As you can see we’re now working a lot with Microsoft official documentation. I recommend this as a really well written and complete reference source for any O365 developer.

Your action should be configured this way now:

Warning: please note that for number field I used Number field type type value, not the Integer field type value. The latter won’t work

Create similar action to create Boolean field:

Protip: Use copying action to clipboard – it’s new and fancy and I love it. And everyone was waiting for it 😀

Add SharePoint items to SharePoint list using Microsoft Flow

To add 9001 items we’re going to use Microsoft Flow “Do Until” loop. It will do defined operations and at the end of the iteration it will increase the iterator. Once the iterator exceed 9001 flow will know that it’s the right time to go out of the loop.

So add new variable called “Iterator”

Now add Do Until loop and select Iterator variable as value property. Set the check to be “is greater than 3000”. Remember also to unfold Change limits section and increase Count to 3000 items and Timeout to PT5H (just in case 1 hour will be to short)

Warning: Do Until has hard limit on 5000 iterations at maximum.

At this point we’ll normally use “Create item” action for SharePoint in Microsoft Flow. However we’ve just created the list and the mentioned action won’t work with dynamically created list. So…for the forth time we’ll use Send HTTP request to SharePoint 🙂

Protip: “Send HTTP request to SharePoint” is sooo universal and powerful. You can do almost ANYTHING using this action. One of my favorite.

You can find here documentation page where the example Create List Item POST HTTP request is made (see? I told you it’s well written and helpful). Let me show you configured action and code first and then I’ll describe it:

                type: "SP.Data.Delegation_x0020_PlaygroundListItem"  
Title: 'Item @{variables('Iterator')}',

So what I’ve done is (follow my steps):

  1. Add “Send HTTP Request to SharePoint” action inside Do Until loop
  2. Fill Site Address, Method, Uri and Headers as in the screenshot
  3. Paste above code but please make sure to:
    • swap Delegation_x0020_Playground with your list name
    • have ListItem suffix. So for your list named “MyList” the type string will be SP.Data.MyListListItem
    • swap all special characters (like space) in the list name. Good article about it was written here by Stefan Bauer
    • When providing field names remember about special characters rule described above
    • In my case I used expression with modulo function so every even item has Bool field = true

Last thing we need to do is to increase the iterator by 1 inside Do Until loo to not end up with infinite loop.



You’ve just created flow that create list with fields and list items. And everything done with one push of a button to trigger your flow 🙂

Automation is beautiful.

And just in case you want to download ready made solution – you can download it from here 🙂

Hope this post was helpful. Write me a comment if you have any question or used my flow.

Create SharePoint list using Flow

Microsoft Flow is a great automation tool. It integrates with over 230 services using connectors where each of them contains multiple triggers and actions. One of those connectors is a SharePoint Online connector with a set of 10 triggers and 47 actions(!). Such big set allows to create many scenarios. Starting from managing simple resource list to invoice approvals along with permissions on different levels. Even though, SharePoint Online connector does not contains actions like “Create list”. Such actionmay be useful if you want to create those elements dynamically. Before you think “what a bummer” and turn your eyes on custom code solutions please read this article. I’ll show you how you can create SharePoint List or SharePoint Library using Microsoft Flow.

Create list from list template

Before I’ll show you how I did that let me explain why I need this kind of solution.

Last week I’ve publishing Delegation Learning App. The app was an extension to what has been described in article How to overcome 500 items limit in PowerApps. Using my app a user is walkthrough different integration scenarios – static data, excel from onedrive and SharePoint Online. To make all steps easy I wanted the data sources to be already prepared for the user. With static and excel data there was no problem – I’ve simply attached them to app package. But how to prepare SharePoint Online list? I had 2 options:

  1. Give access to my environment – however I didn’t want to add external access for anyone who want to use an app. I didn’t want to create an account which I would be shared to others too.
  2. Prepare an excel that a user can import to his SharePoint Online – however this option has some import column limitations and I my aim was to create an universal solution.
  3. Create a list dynamically using Microsoft Flow – for me this method was perfect. I could defined any list definition and add items to this list. The only thing that the user had to do is import import flow (which is done automatically if you import PowerApps package) and run it.

Now you know why I decided to go with this option. Now let me explain what I’ve used and how it works.

Create SharePoint list using Flow

To achieve my goal I need use “Send as HTTP request to SharePoint” action which allows to execute any action that is available through SPO REST API.

SharePoint Online REST API is a special way of sending instructions to SPO using HTTP requests. I.e. by making HTTP GET call to https://<Site ABCD url>/_api/web/lists you can get a list off all lists in ABCD site.

Did you know?
Your browser is constantly using such way of communication. Every time when you open some web site your browser is making an HTTP GET request. Go ahead, open a new browser tab and try it: paste https://<Site ABCD url>/_api/web/lists URL (of course swap <Site ABCD url> with your own SPO site url) to see the XML representation of all lists that exists in the site along with metadata

To create a SharePoint list I need to do what is described in this section. In above section you can find below example:

1. url: "http://<site url>/_api/web/lists"
2. type: "POST"
3. headers:{
            "content-type": "application/json;odata=verbose",
            "accept": "application/json;odata=verbose"
4. body: { '__metadata': { 'type': 'SP.List' }, 'AllowContentTypes': true,
 'BaseTemplate': 100, 'ContentTypesEnabled': true, 'Description': 'My list description', 'Title': 'Test' }

Let me quickly translate it for you.

1. Hey SharePoint, I'm going to do something with your lists...
2. ...and that'll be a modification (create or update)...
3. ...And in step 4 (that is body) I'll send you the details using JSON notation ("content-type" header). If you want to communicate with me please use the JSON notation ("accept" header)...
4. Ok, so the message is this: <the body>

Normally you would also need to authorize yourself providing an token – OAuth token to be precise – but thanks to MS Flow action, the connector is taking care of it 🙂

The last question you may have now is: “how should I know what to put in the body?”. There is a wonderful resource that explains everything you can do using SharePoint REST API: REST API references and samples (add it to your bookmarks, trust me).

Now, in above knowledge base there is a sub-page where you can find all properties you can use in the body: List Properties. You can find there the definition of all used properties. I.e. Base Template represents a ListTemplateType value (see ListTemplateType reference for template type values).

So the last thing is to…

Bring everything back together

Now let’s convert theoretical knowledge into our Microsoft Flow solution.

Disclaimer: Normally I would paste some image below and describe what it shows + what you need to do to achieve the presented result. But thanks to Clarissa Gillingham I realized that if an image is worth a thousands words, a movie is worth a thousands images (23 images per second to be precise #GeekContent). That’s why I’ll just leave with a movie – I hope it’s self explanatory 🙂

Code used for Send an HTTP request to SharePoint is below:


content-type = application/json;odata=verbose
accept = application/json;odata=verbose

{ '__metadata': { 'type': 'SP.List' }, 'AllowContentTypes': true, 'BaseTemplate': 100, 'Description': 'List with items to work with delegations in PowerApps', 'Title': 'Delegation Playground' }

Ready Flow you can download from here.

PERFECT! Now you can click Flow button, provide ANY SharePoint Site URL you have access to and the defined list will be created there. Is that everything? OF COURSE NOT! A list with the default settings contains only built-in fields which won’t be enough in 99% cases. So now we should add some fields…but this part I’ll cover next week 🙂

Stay tuned!

Delegation Learning App

For last few weeks I was preparing a special app for all my readers. And today it has been finally finished. The Delegation Playground App is ready for you to be downloaded! What this app is all about?

Short brief

In january and february I was struggling with delegation in my PowerApps. I’ve noticed that it was not only problem for me – many people have it as well. Interesting part is that was not because of poor documentation – the official PowerApps documentation is really done well (I was a SharePoint On-Premise developer, I know what I’m talking about). Anyway – after reading documentation, few blogs and resolving all delegation warning in my PowerApps apps, I decided to gather all my knowledge in my own article: How to overcome 500 items limit in PowerApps. For my surprise it was very warmly welcomed by community and is the most read article in my blog

And even more than that – it is the most popular in the internet. I perceive that as a effect of giving true value to people learning and developing PowerApps. Every content author cannot imagine better price for helping others.

Learn by doing

There is a saying that says: “To write a code one must write a code” which means that if you want to do something well you must practice it. There is no way around. There is no shortcut and no book that will give you more than you can achieve by trying, making mistakes, fixing and finishing your job.

That’s why I’ve decided to create an app Delegation Playground App.

Using this app you can play with delegation and check how it behaves in scenarios like static assets, excel from onedrive and sharepoint online list.

And of course all resources are in the zip package so you won’t need to prepare anything.

Download Delegation Playground App, import it and bring learning to a higher level.

Have a great delegation time 🙂

Multiple RSS feeds to LinkedIn using Flow

In this blog post I’ll show you how you can build your own Microsoft Flow that is triggered by RSS feed and then re-post it to your social media channels eg. LinkedIn, Twitter or Facebook. I’ll give you example scenarios as well as show how you can aggregate multiple RSS feeds and handle them using Microsoft Flow.

Oh, and I also share my flows – download them, import and use them 🙂

Keep updated

Today, it is not enough to be good at something. To be an expert in technology, to sell services / products or to be an influencer (vloger, blogger, podcaster) one should constantly observe changes in the area subject he specializes in. And here comes the challenge – we have a lot of sources on the Internet (news sites, blogs, internet forums, facebook groups, twitter etc) that create information content. Some of them, especially the most official ones (eg the official PowerApps blog), create content at irregular intervals. So in order to be up to date you can:

  • Check manually every day using a web browser if the new content appeared on the site. However, this solution is not very scalable (at 10 sources it starts to be uncomfortable. At 30 we start to think about the meaning of life).
  • Use tools such as Feedly, which observe the latest content using a special summary page with the latest information, the so-called RSS. Today, RSS has the majority of blogs, forums and information services. However, such a solution still requires that we regularly check the selected tool in search of new content.

But if it could be more…

“Keep updated” automated

I love automation. I really do. Automation free my brain memory and processing units so I can focus on more important things. It’s like setting up the alarm instead of constantly checking “what time is now?”.

Some examples of how a one can automate being update:

  1. When a new post appeared on Microsoft Flow blog add me a task to my Todoist (or any other task organizer). BUT! If the new post has been published after 12 PM add the task for tomorrow (so I can keep myself well organized).
  2. When a new app appeared in Power Users PowerApps Gallery reshared in on my LinkedIn

Create RSS feed to LinkedIn Flow

Using Microsoft Flow it’s very easy to do.

3 steps:

  1. In Microsoft Flow portal go to templates and search for RSS (and LinkedIn in my case)
  2. Hit “Create Flow”.
  3. Provide RSS URL


Want to do it from scratch? No problem.

3 steps:

  1. Add a new Automated Flow and use the RSS trigger
  2. Provide RSS URL
  3. Add LinkedIn (V2) action and fill up the fields

RSS feed connector

The heart of the Flow is the RSS connector. It contains multiple fields which you can use in further Flow actions. The list of all fields is displayed below:

If you’re curious how the example RSS trigger data would be look like check code below – it contains everything I received in the Flow once my previous article has been published:

  "id": "",
  "title": "5 steps that increased Office365 adoption",
  "primaryLink": "",
  "links": [
  "updatedOn": "0001-01-01 00:00:00Z",
  "publishDate": "2019-07-05 16:42:42Z",
  "summary": "<p>Implementation of the Office365 environment in an organization is a complex process. It is not enough to create a company account in Office365, buy subscriptions, add users and connect the organization’s domain. You also have to take care of the transfer of company resources, as well as transfer the solutions used in the organization (or … <a href=\"\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> \"5 steps that increased Office365 adoption\"</span></a></p>\n<p>The post <a rel=\"nofollow\" href=\"\">5 steps that increased Office365 adoption</a> appeared first on <a rel=\"nofollow\" href=\"\">Michał Guzowski Consulting</a>.</p>\n",
  "copyright": "",
  "categories": [
    "In english",
    "SharePoint Online",

Multiple RSS triggers

Once you’ll use RSS trigger you’ll notice that it allows only to put one and only one RSS URL. What to do if you have 3 or 10 RSS feeds to follow? Is there a way to subscribe to multiple RSS feeds using Microsoft Flow?

Answer: yes there is but instead of using simple action or action configuration you need to use a bit of architecture pattern of your whole Flow solution. For reference and instruction please check my video below:

#ProTip: it’s good idea to pass an extra information from a RSS triggered Flow to your Aggregator Flow with the name of the origin Flow. When something goes wrong this field shortcut the time of inspecting the communication flow (which flow send the specific data to aggregator).

And that’s it – hope you find this post helpful. If you have any question feel free to leave a comment below or DM on my twitter account.


Thanks to Brad Sams for an inspiration of this post

When to use PowerApps and Microsoft Flow

In my last post I’ve described how security & compliance are solved in PowerPlatform. This post is a summary for all posts series. Moreover I want to give you simple rules when you should and when you should not use PowerApps and Flow. The main reason is just to avoid the dead ends. I hope you’re curious so let’s move on!

What we already know about when to use PowerApps

The whole post series started in affect to the discussion that followed my post about Low-Code platforms (why they’re so popular and the overall market demand constantly increase). During this post series you could read:

  1. What are Low-Code Development Platforms
  2. Real examples of Low-Code solutions
  3. Who can build on Low-Code platforms
  4. Is the PowerPlatform secure?
  5. Summary & Key Takeaways (this post)

I recommend reading them if you’ve not already done that. They cover big picture of Low-Code development platform, especially PowerPlatform (PowerApps, Flow). In case you would like to have a simple bullet-list to follow by, please keep reading – I’ve prepared it for you 🙂

When the PowerPlatform should be a No-Brainer

There are situations in your work or in your personal live when using PowerApps and Flow should be the first thing that comes to your mind. Let me exposure such situations:

  1. Simple repeatable operation occurred frequently and it takes a lot of time in total of a user (e.g. scan business card and import to CRM, book company resource, get holiday approval)
  2. You want to integrate different components or platforms of your digital workplace (e.g. SharePoint + Outlook + Mailchimp)
  3. You want to save time by cutting down the overall implementation time
  4. From my experience most of task-oriented processes (get data from user, add a task in planner, send email…basically things you could define as a tasks list) can be implemented on PowerPlatform.
  5. You want to improve productivity in your Office365 environment
  6. Security and contextual data trimming is important for you
  7. You have a business process implemented in Excel 😉

Of course PowerPlatform is not a universal tool. Having that said it’s crucial to be aware when using those platforms may get us into a dead end (if you’re no developer).

When you need to reconsider using PowerApps or Microsoft Flow

There are specific limitation of PowerApps and Flow – if you meet any of these then be careful and think twice if the PowerPlatform is the right tool. Disclaimer: It doesn’t mean you cannot achieve any of listed below but rather providing such functionality may require advanced software developer skills.

  1. If the UX design (i.e. front-end) has very restrictive requirements (specific controls, drag-n-drop support, support for legacy browser or mobile devices without PowerApps app)
  2. Your application need to support multiple users interaction in real time – yes, you can simulate simple chat in PowerApps but to be honest – PowerApps is not for that.
  3. Gaming – even though you can create simple animations in PowerApps (and sometimes it is very desired), the general purpose of PowerPlatform is far from it. And in the first place performance of the apps does not suit to gaming industry requirements.
  4. Complex calculations in Microsoft Flow – as I tested and confirmed PowerApps has much higher computing power than Microsoft Flow. (even 30x!). This is possible because PowerApps use user device for the computations. However if you need good computation capabilities outside the user device use Azure Function or Logic Apps instead (Logic Apps has so called Integration Service Environment (ISE) which allows for adjusting processing efficiency)
  5. App need to be used by anonymous users or users outside your organization. Although there will be some support for such cases (PowerApps Portals has been already announced) it will provide some limited functionality over normal PowerApps apps.
  6. Role-driven forms and screens in Canvas Apps – this is however greatly supported by model-driven apps
  7. When compliance & logs are very important for you and your business – so for now PowerPlatform has simple support for security and compliance management. But that would definitely change in time.

If not PowerPlatform – then what?

The last questions is if you may not want to use PowerPlatform- then what? You have few options:

  1. Change business requirements – it’s a common misunderstanding that business requirements are untouchable. They are! And sometimes it’s easier and even desired that business could adjust to the whole software solution (application or process)
  2. Use 3rd party solutions for automation – there are other solutions and software tools ready to be use (e.g. UIPath, CodeTwo)
  3. Develop your custom app or script <developers applause> – yes, when your toolbox is not enough you need to manufacture your own tools. C#, React, Frameworks: GO!

Hope this post clarifies few things related to PowerPlatform, PowerApps and Flow.

Thank you for reading up to here.

Let me know if you like it or not!

Build PowerApps component from scratch in 15 minutes

PowerApps components appeared in the beginning of this year and so far are one of my favorite features. In a way they do not change anything – before PAC (PowerApps Components) developers were able to implement the same business logic in their apps. However from the other side PACs changed everything – developers are now able to create and reuse custom app parts which makes their solution cleaner, easier to maintenance and paced up the whole development process. In other words PAC are powerful tool in the hand of LCDP (low-code development platform) developers but unnoticeable for end-user.

In this post I want to show you one of my components and guide you through the process of creating it. Above all, please do mind I won’t cover what PAC is (here you can read great article about it) and I assume you have basic knowledge about PowerApps and PAC (if not, read this post first)

Step-By-Step Guide component

The component we want to build is an app guide/tutorial that describe the application sections to user that opens the app for the first time. For instance check an example of such guide below (the source comes from one of best of its kind:

We will use above example as an inspiration. Based on it we can note following features:

  • Highlighted area
  • Text box with instruction
  • Next/Prev steps buttons

We already can imagine what kind of information our component will need:

  • steps table
  • current step information (to allow our component to communicate with PowerApps screen controls)

Knowing that we can break creation of our component to following steps:

  1. Main controls
  2. Semitransparent cover
  3. Component custom properties:
    • (Input) Guide Steps Table
    • (Input) Start step
    • (Output) Current step
  4. Component controls dependencies

Main controls

To add controls:

  1. Create new PowerApp > go to Components(1) > add new component(2) > add controls (3) as below. For arrows icons I used ChevronLeft and ChevronRight. To displaying description text I used simple label. However do mind I used a label control because of its configuration simplicity and the multiline text box control should work better.

2. Now let’s add simple styling to our controls to make them more indicative. To do that I’ve made info text white on a bit transparent black background, white arrows and highlighting frame only with red borders (no fill).

Arrows styling: Color = White
lblInfoText: Color=White; Fill=RGBA(0, 0, 0, 0.7);
shpHighlightingRectangle: BorderColor=RGBA(168, 0, 0, 1); Fill=RGBA(0, 0, 0, 0)

3. At this moment we can also add our first simple logic. The logic will create
arrows position dependency from lblInfoText position. Moreover we can also snap lblInfoText to shpHighlightingRectangle bottom border

PaddingLeft = icoPreviousArrow.Width
PaddingRight = icoNextArrow.Width

That was easy. As a result your component should now look and behave like below:

Semitransparent cover

Now, let’s talk about semitransparent cover. As you may noticed on the Teams demo gif, every step highlights only part of the whole visible area, covering the rest with a semitransparent layer that ease user focus on only elements that are important in the current step.

Achieving similar effect can be done using 4 rectangle shapes that fill all the space between screen borders and our highlighting rectangle. Below image visualize the idea:

To create such semitransparent cover add 4 rectangle shapes and configure it according to following setup:

Fill=RGBA(0, 0, 0, 0.6)
Fill=RGBA(0, 0, 0, 0.6) 
Fill=RGBA(0, 0, 0, 0.6)  
Fill=RGBA(0, 0, 0, 0.6)  

As a result, your component should now behave like below.

Disclaimer: along the place of covering rectangles contact there are visible white stripes. It’s kind of PowerApps bug which I’ve reported on PowerUsers forum and wait for the solution – please support it for the commonwealth good.

Component custom properties

As we’ve already mentioned we need 3 properties:

  • (Input) Start step – in case of situation when user would close application without finishing app guide. To be honest it’s optional and add a lot of if_else blocks to check if the StartStep value is blank. From the other hand it gives learning value so I decided to implement it anyway.
  • (Output) Current step – important property. Based on its value the screen controls can change their visibility. You can also trigger an action (ie. change screen when user reach step 4) – to do that you can use component outside action pattern
  • (input) Guide Steps Table – Table that contains all information according to which the component will behave. However we don’t have single record scheme, so it is the right time to design it. For our needs I used below scheme:
    • Highlight Rectangle X value
    • Highlight Rectangle Y value
    • Highlight Rectangle Width value
    • Highlight Rectangle Height value
    • Text – information text to display in info text control
    • TextPosition – by now text block is below hightlight rectangle. But the text block will be out of screen boundaries if highlight rectangle will be on the bottom of the screen, right? So this field should indicate where the text block should be placed in relation to highlight rectangle position.
    • Example single record:
  HR_X: 100, 
  HR_Y: 100, 
  HR_Width: 100, 
  Text:"This is text",

Having everything planned we can start to implement it.

  1. On tree view select your component

2. Then add new custom property

3. Then fill up the property form fields using below data

4. Finally, select component Advanced tab and fill the fields as below.

Important note
Adding sample record to custom property table allows later on to pick a record field ie. for some control value

Component controls dependencies

Let’s begin adding dependencies in tree view controls order starting from the top. The next screens will indicate which controls will apply to the following code snippets. Code snippets are self-explanatory, rarely put comments explain a bit more complex logic

//GuideStepNumber - component local variable that keeps current step number
    ) - 1,
        GuideStepNumber - 1
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,

Important note
Create a note somewhere in a component what variables are you using and why – there is nothing similar to app variables that will list all component variables. I’ve posted an idea to create component variables section – vote for it if you agree it’s a good idea to have such component variables list

//GuideStepNumber - component local variable that keeps current step number
    ) + 1,
        GuideStepNumber + 1
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,
//displays text field of AppGuideSteps[GuideStepStartNumber] element
//displays text field of AppGuideSteps[GuideStepNumber] element

Last thing is to set output property of our component

=========AppGuideCurrentStepNumber (Output)=========

Component usage

To use component go to App screens section and fill it with some example information. In my case I created mock up of dpt team app. Note that the visibility of the screen controls (ie. a gallery) can depends on the current guide step!

And that’s it! Congratulations! Your Step-by-step guide component is done! Now you can use it in your app or improve it by adding other features (ie. set dynamic info text height based on number of characters or replacing info text label control with multiline text box control)

References & Downloadables

I hope you’ll love PAC even more if you haven’t loved them enough yet. Also take below resources as a follow up of this article:

If you like this post please share it – it helps others and motivates me 🙂

Business Card Reader

On my session during last SPS Warsaw I showed 5 examples how I save my time by automating things that steal my time almost everyday. In this blog post I’ll show you one of those solution. And that’s not all. I’ll show you how it’s been built so you can build it for your own…or just install my package and save your time!

But firstly sketch shortly the context – is this solution really helpful for me (or you)?

Business card business

If at some point of your career you’ve worked close to business development or you know what networking is all about then probably you already know that business cards are still very popular. Yes, there are apps that support NFC business info exchange but somehow classic paper business cards are still number 1.

Image result for meme business cards

And I agree: business cards are awesome! They look fancy, are easy to share, their size fit into pocket or wallet and if you hit a very unique business card (i.e. made of rare material or fabric) it’s always a good topic to chat during coffee break. However in the end of the day you always end up with a whole pile of those. And the worst part in it is…your workplace! It’s digital. And paper is not compatible with computers (sic!) unless being digitized.

So once after such networking events when I ended up with almost 10 business cards I said to myself that I have to do something with it. I opened one of my favorites productive apps and scanned the first business card from the pile: Capture > Import to > ….only Onenote? Eeee. I opened App Store and briefly look for some business card scanner that could import a business card to outlook. 5 minutes later I decided that actually I have everything I need to relatively quickly and flexibly develop my own business card scanner!

PowerApps and Flow give me flexibility, efficiency and reliability I need. No code solutions with almost a full potential of code solutions. Legit.

Business Card Reader architecture

The architecture of the solution is this:

  1. PowerApps takes photo and passes stream to Flow
  2. Flow convert photo stream (as URI) to binary and passes it to Cognitive Service Vision OCR
  3. Cognitive Service Vision OCR is a beautiful blackbox which accepts image content and returns JSON as described here (note that each text is linked to a bounding box coordinates so theoretically you could use this information to highlight text in a picture. Check Paul O’Flaherty great video for reference)
  4. Flow returns JSON with all recognized strings to PowerApps
  5. PowerApps parses results (i.e. joins number values) and waits for a user to match all fields. Once a user done it PowerApps pass fields values to Flow…
  6. …so it could create new contact in my Outlook contact group

The whole solution works like this

Describing the whole code of the solution wouldn’t make sense (it will be so long that I doubt anyone will read it) but let me put emphasis on some of the most neat constructs in my solution.

PowerApps Business Card OCR Flow Response

Until now I used to use standard PowerApps response from Flow actions. (i.e. I used and described it in this solution which you can also download and play with). But this time I didn’t do that and used HTTP Response action instead.

Thanks to this move I didn’t have to parse JSON results in PowerApps (as I did when I was integrating SharePoint Search results in PowerApps) because PowerApps already was able to interpret such JSON object as Record type. In other words I could save JSON results as record variable (or even a collection if I would) and use it as any other variable. Everything done smoothly, using one, sexy line of code (yes, code can be sexy. The same as math equations).


Matching recognized strings with fields

This step has been done with an intention to be universal so I could use it not only with business cards but any other OCR use case where matching could/should not been done automatically i.e.: invoice scanning, diploma scanning, sign scanning, random paper text scanning etc.

Cognitive Service Vision OCR number parsing

Normally Cognitive Service Vision OCR recognizes number sequences with
white spaced as seperate strings. So what I did is wrote a simple logic which separate numbers from text values, joins numbers together and pushes back to recognized text collection. Code looks like this:

Avoiding code duplication

In matching screen there is a logic which control which variable will be updated once user select an item from recognized text collection gallery. Because this code could be used in multiple places (or at least that was the idea at the beginning) I didn’t want to maintain more than once. So I used a trick which I describe in this post. Long story short the idea looks like this:

  • Add a new button and make it invisible
  • Put your redundant formula in OnSelect event of the button
  • Use Select(YourInvisibleButton) function to execute formula inside OnSelect event of your invisible button
  • For any dependencies (you can think of them as the functions arguments) use variables (global or local).

Styled confirmation screen

Styled confirmation screen makes that every time I confirm new contact I’m smiling. Seriously. No joke. It feels like all code logic in designed to be transparent for a user. No hidden catches, back-end formulas and processing that results in user’s “WTF?!” when he confront app results with his expectations. As a developer I know that there is nothing happening to business card contact fields values and confirmation screen is overhead. But as a user it’s just nice to be able to make sure what will be imported to my outlook contacts. Do you agree with me?

Download my solution

Feel free to download my solution. When you’ll install it you should have 1 PowerApp, 2 Flows and 2 additional connectors.

Remember to configure connectors and be aware that for Cognitive Service you’ll need Azure subscription with set up Cognitive Service resource. To sign up for cognitive service read this documentation section.

And that’s it! I hope you enjoy this post. Let me know if you like it or have any questions!

PowerApps components patterns

Long-awaited PowerApps Components [PAC] appeared on the end of January 2019 to everyone’s delight. From then on PowerApps developers can create their own controls that can be reused on a screen or across multiple screens and at the same time being central-manageable and migrate-able due to import/export option. PowerApps components can has it’s own custom properties (input and output) of multiple types which makes them really flexible. In this article I want to cover following topics:

  • My own opinion on PAC
  • 9 pros and cons of PowerApps Components
  • PAC development patterns
    • Referencing to PAC controls from within built-in properties
    • Enforce proper setting default values for component
    • Run event-driven component actions (OnStart,OnVisible,OnHidden,Reset)
    • Run function outside component based on component behavior

I won’t cover step-by-step PAC creation in this article although presented patterns contains logic/code pieces. I plan to provide such tutorial in the future but until that time I refer to official tutorial.


I love PAC. Really. I use them in every new app of mine. And personally I think every PA developer should at least consider mastering PAC. Why? Let’s consider following PowerApp-math dissertation:

  • PowerApp component = Multiple controls and mutual dependencies in 1 control
  • Multiple controls and mutual dependencies in 1 control = less code + less controls
  • Less code + less controls = lower app complexity
  • Lower app complexity = faster development + easier maintenance
  • Faster development + easier maintenance = Developer’s love

PowerApp component = Developer’s love.

Below example shows image toggle control that is built from toggle button, 2 images (on/off) and glued with few lines of simple code.

Used icon: “meditation clipart 86677” by

Building 5 of above image toggles on a screen requires 5×3 controls and as much more of code. Now imagine you want each toggle to have different icon and still keeps to naming convention (tglMeditation, tglAnotherIcon etc.) for both controls and their variables. Seems like lot of work, right? And now assume that you need to change 3 icons to something different (remember about keeping naming convention!). Or even worse – you want to update image toggle control so it dims once clicked…and your app has 5 screens…and at least 2 of such controls on each…and…Ok, I stop here. You know what I mean :).

So now quickly analyse similar scenario using PAC. You use 3 controls + code + 4 extra custom properties (Image Toggle Default, Image Toggle On Icon, Image Toggle Off Icon, Value) and reuse the component 5 times which gives only 5 controls (PAC section is separate from Screens). No naming convention to keep (except in the component itself). Need to change icon? Easy, that’s why we’ve added custom properties for. Need to add dimming? Sure, we do it in one place (in PAC definition) and don’t care about the rest. Isn’t it beautiful?

9 pros and cons of components

PAC pros

Probably most of my readers are aware of following advantages of PAC but just in case some of you are not I’ll list them:

  1. Wrap up multiple controls
  2. Functions support
  3. Component scoped variables
  4. Input/output custom properties of any of following types:
    Text, Number, Boolean, Date and time, Screen, Record, Table, Image, Media, Color, Currency
  5. At any point of the time you can switch type of a custom property to any other type (no limitations like i.e. in SharePoint columns)
  6. Fetchable component size from within
  7. App scoped component
  8. Import/export option
  9. PAC is in preview: we can use it with confidence

PAC cons

Once you reach perfectness you’ll stop your development. Fortunately PAC is imperfect (as everything in the world actually) but as professionals we should be aware of both: pros and cons of a tool we’re mastering. In further part of this article I’m focusing on those imperfections, share knowledge of consequences they cause and how to overcome them.

PowerApps Components limitations are:

  1. Collections are not fully supported (key word: fully. They work to a certain point)
  2. Connectors are not fully supported
  3. Nesting a component inside gallery, form or a datacard isn’t supported
  4. No possibility to add media files to PAC package
  5. Unsupported referencing to PAC controls from within PAC built-in properties.
  6. Default values are wrongly set in specific situations
  7. No OnStart, OnVisible or OnHidden action for PAC means no simple way of setting default values in centralized way
  8. Unsupported executing functions in the context of the screen on which the PAC is embedded
  9. PAC is in preview: ok, that’s not really an issue but a inconvenience. Some features may not work as designed (i.e. undoing changes cause unexpected deletion of random custom property) and some minor bugs may appeared here and there.

Does everything from above bullet point list is a showstopper? Which of the above can be easily workarounded and which not? Let’s elaborate a bit on that.

Con 1: Collections are not fully supported

I’ve done simple test and confirmed that collections work at least in my example.

So when collections don’t work? What are the boundaries of a “not full support”? I tried to explore the topic but unfortunately I cannot find anything on it.

HELP ME: If you know in which scenarios collections are not working – please let me know in the comments below. I will update this article so others could make use of it.

CON 2: Connectors are not fully supported

So it is partly working. I couldn’t find any sufficient source in documentation, powerapps blog or powerusers forum but from tests I can confirm that:

  • What works
    • Trello, LinkedIn, Microsoft Flows. I didn’t check other connectors.
  • What does not work
    • static data from Excel, OneDrive, SharePoint Online. I was not able to reference them from within PAC.

HELP ME: If you know which connectors are not working in Components and why it’s now working (or maybe you just have another good explanation for that) – please let me know in the comments below so maybe we will be able to take the case on us.

Cons 3 & 4: No support for testing a component inside gallery, form or a datacard; No possibility to add media files to PAC package

I will be honest with you: for know there isn’t much you can do ¯\_(ツ)_/¯

Let’s hope it will be changed in the future. And by observing Microsoft progress on PowerApps development there is non-zero chance that it may happen this year.

PowerApps Components patterns

There are 4 more cons of PAC that I’d like to share with you. I’ve also prepared a PowerApps app with the described in this article components patterns as well as example use of them:

  • Components Patterns contains components patterns like:
    • Custom property reference pattern
    • Default variable pattern
    • Componenty inside action pattern
    • Image toggle
    • Customized Combo Box with Ok/Cancel option
  • Confirmation Popup Component contains example of:
    • Component outside action pattern
  • App Guide Component contains example of:
    • Default variable pattern

I’d be happy and proud if at least one person will make a use of them. I’m also encouraging you to contribute in this patterns – let me know if you have other ideas.

Referencing to PAC controls from within built-in properties


PAC con #5: “Unsupported referencing to PAC controls from within PAC built-in properties”

You want to achieve following behavior for your component:

Component fill is orange or white depending on toggle value.

Normally to make it works you would open your component properties advanced tab and use following formula in the Fill property:


I thought similar but once I’ve done it the result surprised me:

It occurred that I cannot reference to component controls or any variables from within component built-in properties (Fill, Width, Visibility etc).

Solution: custom property reference pattern

Fortunately component built-in properties can reference input/output custom properties so make use of this capability.

Steps to workaround:

  1. Add an input/output custom property with a proper logic in it
  2. Reference component built-in property to that custom property value

To finish presented background color switch I’ve added a custom output property of type Color. Then I’ve referenced to that property from Fill property of my component:

Example scenarios when this pattern may be useful:

  • Hide component depending on its controls values (i.e. hide component once user pick an option)
  • Change component background color based on its control value
  • Resize component size based on its input data

Enforce proper setting default values for component


PAC con #6: “Default values are wrongly set in specific situations”

To make this con more understandable let’s consider following: you want to extend previous component (the one with changing background) adding default setting for component toggle.

Seems easy, right?

  • Add custom input property of type Boolean
  • Set toggle default value to Component.InputCustomProperty

You’re adding your component to the first screen of your app, set InputCustomProperty to ‘false’ (background should be white), save, publish, run app and…

Emm…ok…maybe there is something wrong. You check all settings twice, three times but no – everything is as it should be. Time for debugging. Let’s add extra toggles to the screen with your component and by using them let’s indicate input and output values of the component. Result?

What the…Oh boy…it seems like the output value of the component (and its background in consequence) refers to the value set in component instance (which you’ve added to the screen). From the other side the input value of the component refers to the value set in component definition.

The output value of the component refers to the value set in component instance
The input value of the component refers to the value set in component definition

SOLUTION: Default variable pattern

Theoretically setting InputCustomProperty value to false could solve the problem in this case but what if there will be more instances of this component and some of the should have InputCustomProperty set to true and some to false? So there is easier solution to that.

Steps to workaround:

  1. In component instance set InputCustomProperty to a variable i.e. gblDefaultValue
  2. On App start switch you variable to true and false like below:


Example scenarios when this pattern may be useful:

  • Set component default visibility
  • Preset multiple of component controls to specific values
  • Define component size based on app resolution (in case of implementing custom responsive design)
  • App like below (you can download it from here)
Example App Guide control. It contains StartStep Input property so using presented pattern you can easily return to step that user left app on.

Run event-driven component actions (OnStart,OnVisible,OnHidden,Reset)


PAC con #7: “No OnStart, OnVisible or OnHidden action for PAC means no simple way of setting default values in centralized way”

Let’s start with following example: a component with 3 buttons (Green, Red and Default) set a color to component background each. There are also 2 extra custom properties: Default Color (input, color type) and Background color (output, color type).

This time for background I use rectangle shape. Output custom property formula is:

And the formula for rectangle color is:

Formula for Green button OnSelect action is:

For the Red button the second parameter in the formula will be Red, for the Default button the second parameter will be ‘Event-driven actions’.DefaultColor

Nothing spectacular so far. You change the color using buttons and the color is properly passed to the output value.

But now imagine you share this component to a colleague of yours. He played with it and…you received an email from him: “your component is not working properly. I set color for DefaultColor custom property but it’s not used until I click the button!

You colleague expects that once he’s set a DefaultColor the rectangle color will be white

At first glance you might thought that setting Rectangle.Fill to Component.DefaultColor would resolve the issue but of course you’ll quickly notice that this would break the link between Rectangle.Fill and gblBackgroundColor variable.

Normally (I mean on screen level controls) you would use i.e. OnVisible screen event to set your rectangle.Fill to whatever is set for a default value. But PAC doesn’t have any event-driven actions. That’s why I would like to share with you with following pattern.

SOLUTION: Component Inside action PATTERN

Idea is this: add a toggle to your component and link it to some component input custom property. On toggle change run a formula you need.

Steps to workaround:

  1. Add input custom property of type Boolean to your component
  2. Add toggle button to your component
  3. Set toggle default value to ‘You-Component-Name’.InputCustomPropertyName (i.e. ‘Event-driven actions’.ComponentReset)
  4. Set toggle OnChange formula to anything you need. In my case it is following formula:
Set(gblBackgroundColor,'Event-driven actions'.DefaultColor)


I left component toggle visible for demo purposes but normally I hide it (set visibility to false).

If you want to set many variables in Reset Toggle OnChange consider passing InputCustomProperty of type Record.

Example scenarios when this pattern may be useful:

  • Expose less parameters to set and make your control more hermetic
  • Below Additional Items picker component (you can download it from here)
Image Toggle and Additional Items picker are separate components. Table at the bottom is a common screen control.

Run function outside component based on component behavior


PAC con #8: “Unsupported executing functions in the context of the screen on which the PAC is embedded”

We can do almost everything using components except one part – context awareness. It means your component won’t know nothing about app nor screen that keeps it (however in case of a screen you can pass it to your component as parameter). In most cases that isn’t a problem but one specific action is noticeably missing: navigation. Simple as that.

The workaround lays not fully inside component but on the border of the component and screen in which it is embedded.


For workaround we’ll make use of Component Inside Action Pattern but outside the component 🙂

Steps to follow:

  1. Add Output Custom Property of type Boolean to your component
  2. Add 2 buttons: Ok and Cancel that sets Output Custom Property to true and false respectively (of course via some variable)
  3. In the screen that embeds your component add a toggle
  4. Set the toggle default value to Output Custom Property value of your component
  5. On toggle OnCheck run a formula you need

Result (you can download ready component from here):

Example scenarios when this pattern may be useful:

  1. Navigate (of course)
  2. Control one component behavior based on another component output (like below)
Image Toggle and Additional Items picker are separate components. Note how Image toggle is Off once user Cancel his picks.

The last word

Components are very powerful tool in PowerDev toolset. I encourage you to use them often – the mastery in using them will pay back quickly (even though PAC are going to evolve in the future to even more perfect form). Also remember that you can download and play with my components:

  • All above patterns components
  • App Guide component
  • Additional Items component
  • Popup confirmation component

I hope you enjoy this article.

Have a great coding.

Animation in PowerApps

In this post I’m going to put some light on the topic of animation in PowerApps. Animation is what probably most of PowerApps devs have never tried to use in their application and you may also think now: “That’s true, because hey, why should they? PowerApps platform is for business, not games”. So let me give you couple examples:

  • Mastering timer control – Timer control is heavily used in animations but you can also use it in different ways like app behavior delays (change screen after 5 seconds), counters (time limited surveys) and statistics (time per page)
  • Awesome loading screen or eye catchy busy indicator – just to amuse your users
  • Improve your business apps – sometimes simple highlight or
    animated illustration can really improve UX of your solution
  • Understand PowerApps platform even better – animations exists on cross line between possibilities and performance
  • Cool games – because a kid is inside each of us
  • Inspire yourself – any learning create a “dots” in your mind. Every idea is a connections of different dots all together but you never know when a new dot make a real difference. So collect them to not narrow your options

From my experience playing with PowerApps animations significantly improved my proficiency in programming in declarative paradigm language (I have C# programming backgrounds which is an imperative paradigm language), helped in understanding of what and how I can implement in PowerApps and also boost my confidence in my PowerApps skills.


This post was supposed to be much shorter. However the more I spent time on it the more I was convinced that showing whole process without making shortcuts like “ok, we know what we want to achieve so here you have final code and let’s briefly describe it” will give much more value to readers who come here not only to look for a solution but also to understand the process and learn. Furthermore I did not split this article for a separate 2-3 post series because that will ruin the whole workflow and the context of work (What are we doing now? Why are we doing it? Hold on, I got to remind the last part…?).

As the result the following article stays in one piece bringing the most value of it, in my humble opinion.

Different ways of creating animation in PowerApps

To add an animation to your PowerApp app you can use different ways. You can:

  • Add a video file – simple as that. In PowerApps you can switch controls off and auto play it so for a user it will look just like an animation. However be aware that if your video contains any sound you cannot autoplay it in Chrome. Also video cannot interact with user or react on screen changes. Like below:
  • Add a gif file – this method is really similar to a video file without a sounds and is also limited in how it can interact with user or other controls. However it’s ideal for i.e. busy indicator.
  • Constrain timer, controls (i.e. images) with functions – this method is the most powerful, interactable and flexible but also the one that needs some knowledge about animations, programming and platform specifics (like functions in PowerApps) for which you want to create an animation.

In this blog post I want to focus only on the last of above list.

Briefly about animation

Before we start with animation implementation in PowerApps it’s good to know what the animation really is. Especially that no matter which platform you pick the main concepts are always the same.

So what is animation? Short answer may be not really helpful: it’s a short sequence of a film. So what film is? To understand that let’s go back to 1872 when there was an ongoing debate among people interested in horses: “whether all four feet of a horse were off the ground at the same time while trotting?”. Today you will probably google that or just record a horse with your mobile and play video really slow (or should I say frame by frame…but let’s not overtake the facts 😉 ) but back then common opinion was that horse has always at least one foot on the ground while at a trot (and this beliefs shared most paint artists that time). Anyway, one of the race-horse owners named Leland Stanford wanted to end debate once for all and felt that relatively young and still imperfect technology, a photography, might help him. So that he hired Eadweard Muybridge – 38 years old imigrant from England who was world – famous for his large photographs of Yosemite Valley – for some photographic studies. Muybridge began to experiment with an array of 12 cameras photographing a galloping horse in a sequence of shots. Those shots were far from perfect but one negative proved that trotting horse is fully airborne. In 1878 Muybridge published 12 frames of trotting horse:

Source: wikipedia

Once you quickly display pictures one-by-one (like in a flip book animation) you will see something like this (frame 12 is not used).

Source: wikipedia

To summary all above: animation is picture change in time. This brings us towards conclusion we need if we want to make an animation:

  • a pictures of the object in different positions
  • a timer to “animate” (quickly change displayed pictures)

And commonly that will be it if we want to make an animation.
– “Em…so now I have to make picture of my airplane image in each position on the screen and animate it using timer? Wow, that will be a number!” – of course not, this would be insane :D. Fortunately in computer programming there are many situations where actually you can use only 1 picture and on timer tick (smallest portion of time in which timer counts the time) simulates specific behavior of the image (like movement, rotation, size etc) by modifying image properties using functions. And this is exactly what we’re going to use:

  • single image
  • a timer
  • functions to compute property values (describe relations)

Create an app with animated airplanes

If you don’t know where to start it’s always good to breakdown your task to smaller steps. Do it until you will know how to do the task.

  • Create an app with animated airplanes
    • Add screen
      • Add header
      • Add Reset & Start/Stop controls
      • Add board for airplanes
    • Add airplane animation
      • Add image
      • Make airplane “fly”
        • Move plane down the board
        • Bounce plane from board boarders
        • Move plane nose towards its direction
      • Add speed control
      • Add rotation on U-turns

I hope it makes sense but if you think the list should looks differently just remember – that’s fine. The final result is what matters – not the path you follow.

Adding screen and its components

This task along with its sub-tasks is pretty straight-forward. For header we use simple label. Next for controls we use buttons: reset button will puts all components to their starting positions, and start&stop button will animate our objects. For the animation board I used rectangle shape just with blue borders and white filling (transparent filling is also ok).

Because for now we don’t need to put any logic inside controls, I think simple screen will be enough for you to implement this part of our demo app.

Add airplane animation

Add image

This will be our object that we’ll animate. Easiest way is to google some .png icon that is free to use (I used icon from here and rotate it in to face it upwards) and import it to app assets.

To add image click file > Media > Images > Browse > pick your file and hit ok

To your app screen an image control (1) and point added file in Image property of the control (2)

Make airplane “fly”

By “flying” I mean moving back and forth bouncing from board edges. And as it has been already mentioned in “Different ways of creating animation in PowerApps” section move is a defined change in time. And there are 2 ways of achieving that: imperative-alike and declarative-alike. For now don’t bother that, I’ll explain it later, what is important now is that we’ll start with imperative-alike way. Reason: this was natural way of implementing dependent logic for me since on the beginning of my professional career I was starting as C# developer.

So what we need is a timer that will produce ticks. Each tick triggers a change for registered object by calling its update function. In PowerApps for update function we’ll use OnSelect() event and this approach has 2 main advantages:

  1. Execution of object’s OnSelect() event can be done by using Select(<object>) function
  2. Debugging of an object on-tick behavior cannot be simpler – by clicking on an object with your mouse button (or finger) you can fire OnSelect() event

So without further hesitation let’s get back to PowerApps.

  1. Add a timer (I replaced Start/Stop button) and configure it in following way:
    • Duration: 50 – This means that between each tick (a “frame”) 50ms pass which gives 20fps. Unfortunately this is the minimal value for timer ticks which limits the smoothness of our animation. Why limits? Because, as popular opinion says, human eye sees ~30fps which is equivalent to 33.3ms per timer tick (on the margin: I’ve found here an opinion that 50% of the population can see in 45+ FPS and trained fighter pilots can even see in 255 frames per seconds. I found no serious research that will prove that opinion except this reasearch from Uppsala University that only concludes “The minimum acceptable framerates is 60 frames per second”)
    • Repeat: true – this provides repeating nature of the timer ticks
    • Auto start: false – we’ll control that using our buttons
    • Auto pause: true – just to switch off timer in case of navigation to another screen if any
    • OnTimerEnd – see below code snippet. I use it as objects register

As I mentioned: whole logic of airplane move and bounce will be place inside OnSelect() function. Let’s start with something simple:

//object properties
//move behaviour

I hope above code is self explanatory but just in case:

  • Vspeed is vertical change in position of our plane
  • planeY stores plane Y position. Of course to make it work we also need to put placeY variable in imgPlane.Y property value

Once you hit “Play” your plane should start falling like this:

WOOHOO! That’s one small code step for us, one giant leap for our animation skills :). As you can see our plane is now moving downwards and dissapears under the screen bottom.

To restart animation (place plane in starting position) add below code to reset button OnSelect code:


Ok, now let’s move to next part: “Bounce plane from board boarders“. Here small math part comes to play – in every tick we’ll check if the top/bottom border of the plane image is above/under board border.

First let’s mark plane nose direction PDirection. For its value I’m using a number (0 = up, 90 = right, 180 = down, 270 = left) so it will be easier to make all the direction and rotation checks later on. Depends on the plane’s direction we will add or subtract VSpeed:

//we substract to fly up and add to fly down because Y-axis is inverted relative to the Cartesian axis
//if we're flying top and cross the top boarder -> go down
If(PDirection = 0&&planeY<=BoardBorders.Y,Set(PDirection,180)); 
//if we're flying down and cross the bottom boarder -> go up. 
If(PDirection = 180&&planeY+imgPlane.Height>=BoardBorders.Y+BoardBorders.Height,Set(PDirection,0)) 

Probably you will see and error – PDirection hasn’t been initialized. Add following code line to Reset button OnClick


Play the animation. Your plane should bounce now!

Labels on the left shows value of: imgPlane.Y, BoardBoarders.Y, PDirection

Looks quite good but can you see something awkward? See how the tail (for some configurations it may be the nose or the both) pass the border before the plane change its direction?

Any ideas what is causing that?

Give yourself a minute and try to answer this question by yourself.

Answer: this happens because we have STATIC VSpeed and always check for the borders collision after making the step. If we would like to keep the animation speed the best way will be change VSpeed if expected step will cross the borders and if so reduce it to the maximum of border distance. Equivalent code can look like below:

//Near-edge behaviour
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));

Now the bouncing should looks as it should to.

Your imgPlane OnSelect() function should be similar to below (notice I’ve refactored Bounce behavior code a bit):


//Near-edge behaviour
Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));

//Move behaviour

//Bounce behavior
If(Dist2Top = 0,Set(PDirection,180));
If(Dist2Bottom = 0,Set(PDirection,0))

Last part for this sub task is to make plane’s nose to point the direction plane is flight. To do that we make use of image property called ImageRotation


Add speed control

For a speed control I use slider control but of course you can use whatever you like: number text field, rate control or even text recognition property of the pen input field ;). PowerApps is very flexible and so you should be.

To add slider control select Controls > Slider

Integrating our new shiny control with our plane will be unexpectedly easy. Modify first line of imgPlane OnSelect() function to this (SpeedSlider is the name of my slider):


Play with it to test it and to congratulate yourself. You’ve just did piece of good job. Well done!

You deserve a break, use it: fresh your mind, eat some peanuts (good for your brain) and once you ready come back to continue animation project – there is still some work to be done.

Add rotation on U-turns

So far what we did is the simple animation of a plain flying up and down. However adding u-turn once a plane reach borders requires to make some changes to what we’ve done. Because you see – how to rotate image in PowerApps? My first thought was to use ImageRotation property. But unfortunately ImageRotation accepts only ImageRotation enum object that has 4 flags: None, Rotate90, Rotate180, Rotate270. Auch 🙁

Using gif or video controls slipped through my mind but I quickly kill those ideas – I wanted to have control over rotation speed of the plane which both controls cannot provide.

Using pure math to compute movement of the image by the circle was also not an option because it will only simulate the movement and not the rotation.

Finally (why the best ideas are always the last one?) I thought that maybe I can use HTML control with img tag in it and rotate the image using html and css manipulation.

But before we start implementing, let’s plan our work – it’s very important to follow the plan.

  1. Add HTML plane img to screen
  2. Change plane rotation manually just to understand html/css rotation logic
  3. Add rotation logic to the plane OnSelect()

Step 1: Add HTML plane img to screen

Click Text > HTML Text

Set its paddings to zero, size to 80 x 80 (I want the image to be of that size and also that the size of the whole control was the same as the size of the image) and in HTMLText property write following code:

"<Img src='<your img URL here>' style='width:80px;height:80px;'>"

Please note that not every kind of URL you can put as <your img URL here>. For the src attribute value of the Img tag in HTML Text control remember following:

  • Provide absolute URL to your resource
  • resource must be publicly accessible
  • Redirections are not supported
  • Authentication is supported

Below URLs WON’T work:

  • appres://resources/plane-icon

Below URLs WILL work:


If you put proper URL for your img you should see something like this

To remove a slider that you can see on the right side of the HTML Text control just add to style attribute “position:absolute”

"<Img src='' style='width:80px;height:80px;position:absolute;'>"

Step 2: Change plane rotation manually just to understand html/css rotation logic

We have our HTML Text control that displays image but how to rotate it. In CSS there is a property called transform that allows for rotating, skewing and scaling the object. Let’s try something simple now and make our image to rotate 90 degrees:

Hm, that is some progress but as you can see the image rotates relative to its center. We will deal with that in a second but first let’s take care of one more thing – make the rotation dependent on a variable value.

To do that we want break the HTML code string in the place of degrees numeric value and replace that numeric value with our variable. Following code shows how to do it:

"<Img src='' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg)'>"

Remember to initialize PRotation variable (using Set() function ie. in Reset button). In below gif you can see the plane rotation dependent on a slider value.

Now we can get back to problem of rotation relative to the center of the image. What we want is that the airplane image moves by the circle and rotate accordingly to its position relative to the center of that circle path. One way will be to use mathematical formulas for movement computations. Although it should be absolutely achievable, the synchronization of the movement and rotation sounds like a juggling with too many balls at the same time to me. I don’t want to stuck in one problem for days – at least not for now :). Is there another way of solving that problem? Of course there is and once again we can use CSS for that!

In CSS there is another cool property called transform-origin which move the center relative to which the rotation will take place. We want rotation to take place relative to end of the right wing of the plane. Let’s implement below code and observe outcomes

"<Img src='' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg);transform-origin: right'>"

Ah, rotation is happening but our plane move off the HTML Text control borders. Let’s change its size to 160 x 160 (double the size of the image)

Hm, not bad, but plane still disappears above top border. So let’s move it away from the top border by 40px (half of its size)

"<Img src='' style='width:80px;height:80px;position:absolute;transform: rotate("&PRotation&"deg);transform-origin: right;top:40px'>"

GREAT! Now it’s rotating! Perfec…oh, hold on a second. See how tips of the wings are cut off by HTML Text control borders on rotation?

Do you have any idea why it’s happening? Think for a second before continue reading.


So this cutting off happens because of the relation between square shaped image, the center of the circle path and its radius. The easiest form of explanation will to draw these relations:

Red square is double the size of plane image and illustrated the HTML Text control borders we have currently implemented. Red circle radius indicates the most far point of the image that will be visible at any time of the rotation. You can clearly see the cutting there on the tip of the planes wing. In such situation ideally will be to enlarge HTML Text size up to the green square size (math formula: a*sqrt(5)/2, where ‘a’ is the size of the side of the square). However in our case we need only few more pixels. So let’s do following:

  • Add 5px padding on each side of the HTML Text control
  • Add 10px to the HTML Text control width (170 now)
  • Add 10px to the img style property (top:50px)
  • Add 20px to the HTML Text control height (180 now)


HAHA! Awesome! Now take a break, go run, eat some fruits and come back. Last part of the animation development process ahead!

Step 3: Add rotation logic to the plane OnSelect()

Now we need to combine above rotation animation with the whole plain movement.

Open up your plane’s OnSelect() function to remind you its logic: near-edge behavior, move and bounce logic. Now we want following changes to take place:

  • when plane hits border stop moving and start rotation procedure
  • Until the plane makes 180 rotation total do the following:
    • don’t move (of course)
    • rotate for a value of SpeedSlider
    • stop rotating once reach 180 degrees or 360 (watch out for unwanted crossover – don’t repeat the mistake from movement logic. Learn 🙂 )
  • Continue movement

Changes in the code we’ll begin from creating rotation logic. It will be very similar to the move logic so the only lines that requires explanation is the second line and the last one. Add below code right after first line of code where you set VSpeed variable.

//Protection from crossing over the full U-turn
//Continue movement

Variable named isRotating is a flag that indicates if the plane is rotating or not. If it’s ‘true’ it’ll keep rotating. Once we finish rotation we set our flag to ‘false’. How do we know when we finish? This is why
Mod(PRotation,180)<>0 condition is for. Function Mod returns the remainder after a number is divided by a divisor. If the PRotation value is equals to 180 or its multiplications, the function will return 0 and the condition will be false. With one simple function we cover 2 u-turns. I like such code 🙂

All the remaining code we can safely put inside If(!isRotating,(…)) block.

Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
//Near-edge behaviour
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));
//Bounce behavior
If(Dist2Top = 0,Set(PDirection,180));
If(Dist2Bottom = 0,Set(PDirection,0)))

You may ask yourself now – “why didn’t we just throw away this isRotating variable and just put the whole move logic on false result of the first if condition (in the place of where Set(isRotating,false) line is)?”. We can! But for the cost of code readability in my opinion. I like to keep code that is self explanatory so me or someone else understand it even after months of not reading it. From my perspective comments are not always enough and such flag (and extra if condition) perfectly do the job. But of course – do as you like :).

Last thing that left is to adjust bounce behaviour. We need to set isRotating flag and give a plane first rotation push (otherwise Mod(PRotation,180)<>0 will never be true). Swap last 2 lines of your code as follow:

If(Dist2Top = 0 && PDirection = 0,Set(PDirection,180);Set(isRotating,true);Set(PRotation,PRotation+Rspeed));
If(Dist2Bottom=0&&PDirection = 180,Set(PDirection,0);Set(isRotating,true);Set(PRotation,PRotation+Rspeed)))

The “&& PDirection = 0” extra condition is to secure our plane from entering If block twice – when the rotation start and just after it ends (when the plane should continue moving forward).

Your whole code should looks like similar to this:


//Protection from crossing over the full U-turn
//Continue movement


Set(Dist2Top, planeY-BoardBorders.Y);
Set(Dist2Bottom, BoardBorders.Y+BoardBorders.Height-planeY-imgPlane.Height);
//Near-edge behaviour
If(PDirection=180, Set(VSpeed,Min(VSpeed,Dist2Bottom)),
PDirection=0, Set(VSpeed,Min(VSpeed,Dist2Top)));
//Bounce behavior
If(Dist2Top = 0&&PDirection = 0,Set(PDirection,180);Set(isRotating,true);Set(PRotation,PRotation+Rspeed));
If(Dist2Bottom=0&&PDirection = 180,Set(PDirection,0);Set(isRotating,true);Set(PRotation,PRotation+Rspeed)))
Completed plane animation with u-turns

WOW! That was hell of the road but we made it! You made it! If you follow all the steps up to here I’m really really thankful and proud of you. You are awesome!

Here you can download my project with finished planes animation with some extras! I’ve added a screen with multiple planes and movable
boarder bottom border. When you play it and start to move bottom border you’ll observe interesting thing – an animation slows down and sometimes even lag spikes

If you have enough energy you can read next section…or just read it later 🙂

Performance in animations

So you probably you already know that PowerApps is using declarative code. Declarative means that the code expects results instead of giving instructions (orders) of how to do something (this is imperative). But I feel that in PowerApps declarative also means that it doesn’t really like a controller alike pattern where one object activates other object(s) (like we did in timer control which select plane on timer end).

I’ve googled a bit looking for some solution and found this video where Brian (a.k.a. @8bitclassroom) built a simple animation of shooting space ship. He used observer pattern where each projectile object (kept in gallery) has it’s own timer and object behavior depends on it in a way like projectile Y property uses timer.value/timer.duration for its position calculations. So I’ve built copy of his approach and must admit that his method was very effective and even tens of shots did not slow down the whole animation (note that no object is removing once reach top)

Oh, as a side note – feel free to download also this app with comparison from here.

To verify my theory I’ve build the same app but this time I use my method (each projectile was a gallery item and each item has its own timer and image. On every timer end the projectile was selected). Additionally once the projectile reach the top I removed it from collection so I can be sure that it’s not the ongoing timer that is slowing down animation. And as you can see my app is still lag spiking

Taking 20 shots comparison

You can clearly see that’s even though the total number of shots in my method is smaller the animation is still slowing down. It must be the Select() method and the architecture of my app where one object calls another.

So how to fix the plane animation app? Honestly – I’m not really sure. You see, declarative dependency for projectiles is generally easy to do – one direction, straight line, simple computation. Unfortunately when looping movement comes to play, especially such with u-turns I feel a bit confused how to implement that. Put all the code in Y property function? Then how/where to set the rotation value?

If you have any idea please share it in comments below – I will gladly check it.

Phew, I know, this was a loooong blog post. Nevertheless I hope you enjoyed it, took your value from it, learn something new and now know PowerApps even better!

Have a great day and happy PowerApps coding 🙂

Enable Whistleblowing in your Office365

PowerApps can participate in organization modernization in many ways. And I’d like to show you some example. Imagine following scenarios:

  • You’ve seen how a colleague sends confidential documents to his private email. Or…
  • By accident, you heard two colleagues talking about “dorabianiu” at the expense of the health of patients by ordering unnecessary radiological examinations. Or…
  • In the network, one of your colleagues has published an offensive text that hits the brand of the company in which you work. Or…
  • You and a few colleagues from work are the object of mobbing and microaggressive behaviors

I hope you don’t know what I’m writing about but unfortunately many of the above situations really happened: example1, example2, example3.

Such incidents may put significant questions marks on your organization reputation, reliability and honesty followed by financial penalties depending on the seriousness of the offense. So to protect your organization Microsoft provides multiple different tools such as Azure RMS (Azure Rights Management), DLP (data loss prevention) and retention policies. But non of those tools gives you an easily accessible way to pass on information concerning wrongdoing in safe and anonymous manner. That inspired me to create a solution that will fill the gap.

Enable whistleblowing

72 per cent of Canadian survey respondents recognize cyber crime as a risk, many still don’t fully understand the potential impact a cyber breach can have on the business

Financial Post article

The original article of the above quote also noticed that enabling whistleblowing allow for early identification of issues and is critical for ability to manage risk. That inspired me to create a solution integrated with O365 that will respect user anonymity – at least on the data access level.

I’m a huge fun of PowerApps but unfortunately they do not allow for guest access (at least not yet! 😉) and I was wondering if that’s hard limitation. Maybe there is some workaround? There must be. And with a small help of Microsoft Flow I was able to create a solution that:

  • Allow for anonymized creation of new submission
  • View, Edit ones submissions in anonymized manner
  • Correspond with assigned admin in anonymized manner
  • As Admin you can access all submissions as well as filter submissions by status (i.e. only those submissions that waits for your action)

Power Whistleblowing app – user view

This is animated view – If gif is not animating click here

Another view (this time just a screenshot)

Power Whistleblowing app has also an admin view

This is animated view – If gif is not animating click here

Power Whistleblowing architecture

The architecture of above solution is simple:

  1. PowerApp gets information from a user and pass to flow. On this stage everything is personalized. We know who send what.
  2. Flow pass over HTTP request to another flow with parameters of newly created item (for submission it’s: Title, Description, Category; for Comment it’s: Author GUID, Submission GUID, Comment). This is the moment where we lost all context information (except data that are essential for the business logic) and imply anonimization
  3. For newly created submission we need to generate Author GUID (I’ll explain later what is its role) and pass it back to first Flow.
  4. For newly created submissions the Flow expects the Author GUID and pass it back to PowerApps app
  5. Both for new submission and new comment all information are saved in SharePoint Online impersonated as Service Account. We don’t know who is original creator of the record, we only have some Author GUID

Why do we need Author GUID?

Author GUID is the new credentials for submitter to:

  • Check status of his submissions
  • View all his submissions
  • Leave a comment in any of the submissions (to correspond with the admin)

I find this solution really useful for an organization – what do you think? Leave me a comment! Oh and also feel free to ask freely on any other topics i.e.:

  • How to create HTTP connected Flows
  • Is it possible to build admin panel with vertical tabs (yep, it’s tricky 😉)
  • How to build Regular Expression to check GUID cohesion

I don’t bite but do drink beer. You can also catch me on my fb, twitter, linkedIn or PowerUsers forum.

Just in case you want to:

  • Deploy this solution on your environment
  • Customize it for your own needs
  • Create new solution based on this one

Contact me and I will help you

…Oh, and I have a small gift for all of you that read until now – you can download this solution here. Sharing is Caring. Enjoy!