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: https://teamsdemo.office.com/)

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

=========icoPreviousArrow=========
X=lblInfoText.X
Y=lblInfoText.Y
Height=lblInfoText.Height
Width=30
=========icoNextArrow=========
 X=lblInfoText.X+lblInfoText.Width-icoNextArrow.Width
Y=lblInfoText.Y
Height=lblInfoText.Height
Width=30 
=========lblInfoText=========
X=50
Y=shpHighlightRectangle.Y+shpHighlightRectangle.Height+10
Width=AppGuide.Width-100
Height=100
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:

=========shpRightCover=========
x=shpHighlightRectangle.X+shpHighlightRectangle.Width
y=0
Height=AppGuide.Height
Width=AppGuide.Width-shpHighlightRectangle.X-shpHighlightRectangle.Width
Fill=RGBA(0, 0, 0, 0.6)
=========shpBottomCover=========
x=shpHighlightRectangle.X
y=shpHighlightRectangle.Y+shpHighlightRectangle.Height
Height=AppGuide.Height-shpHighlightRectangle.Height-shpHighlightRectangle.Y
Width=shpHighlightRectangle.Width
Fill=RGBA(0, 0, 0, 0.6) 
=========shpLeftCover=========
x=AppGuide.X
y=0
Height=AppGuide.Height
Width=shpHighlightRectangle.X
Fill=RGBA(0, 0, 0, 0.6)  
=========shpTopCover=========
x=shpHighlightRectangle.X
y=0
Height=shpHighlightRectangle.Y
Width=shpHighlightRectangle.Width
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, 
  HR_Height:100,
  Text:"This is text",
  TextPosition:"Bottom"
}

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

=========OnSelect=========
//GuideStepNumber - component local variable that keeps current step number
If(
    IsBlank(GuideStepNumber),
    Set(
        GuideStepNumber,
        AppGuide.GuideStepStartNumber
    ) - 1,
    Set(
        GuideStepNumber,
        GuideStepNumber - 1
    )
)
=========Visible=========
If(
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,
    false,
    true
)

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

=========OnSelect=========
//GuideStepNumber - component local variable that keeps current step number
If(
    IsBlank(GuideStepNumber),
    Set(
        GuideStepNumber,
        AppGuide.GuideStepStartNumber
    ) + 1,
    Set(
        GuideStepNumber,
        GuideStepNumber + 1
    )
)
=========Visible=========
If(
    (IsBlank(GuideStepNumber) && AppGuide.GuideStepStartNumber <= 1) || GuideStepNumber <= 1,
    false,
    true
)
=========Text=========
If(
    IsBlank(GuideStepNumber),
//displays text field of AppGuideSteps[GuideStepStartNumber] element
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).Text,
//displays text field of AppGuideSteps[GuideStepNumber] element
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).Text
)
=========X=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_X,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_X
)
=========Y=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Y,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Y
)
=========Width=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Width,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Width
)
=========Height=========
If(
    IsBlank(GuideStepNumber),
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            AppGuide.GuideStepStartNumber
        )
    ).HR_Height,
    Last(
        FirstN(
            AppGuide.AppGuideSteps,
            GuideStepNumber
        )
    ).HR_Height
)

Last thing is to set output property of our component

=========AppGuideCurrentStepNumber (Output)=========
If(
    IsBlank(GuideStepNumber),
    AppGuide.GuideStepStartNumber,
    GuideStepNumber
)

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).

Set(CapturedRegions,PowerAppsBusinessCardOCR.Run(Image4.Image).regions);

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.

PAC-math

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.
Q.E.D.

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 Clipartroo.com

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. If there will be reasonable need we can also move this content to github or whatever for the sake of easier contribution.

Referencing to PAC controls from within built-in properties

Problem

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:

If(Toggle.Value,Orange,White)

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

Problem

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:
Set(gblDefaultValue,true);Set(gblDefaultValue,false)

Result:

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)

Problem

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)

Result:

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

Problem

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.

SOLUTION: COMPONENT outside ACTION PATTERN

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:

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.

DISCLAIMER:

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 paint.net 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
Select(imgPlane)

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

//object properties
Set(Vspeed,30);
//move behaviour
Set(planeY,planeY+Vspeed)

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:

Set(planeY,BoardBorders.Y);

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(PDirection=0,
Set(P1Y,P1Y-Vspeed), 
Set(P1Y,P1Y+Vspeed)); 
//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

Set(PDirection,0)

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):

Set(VSpeed,30);

//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
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));

//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

Result:

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):

Set(VSpeed,SpeedSlider.Value);

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
  • https://contoso.sharepoint.com/:w:/g/SADQWEDRmfJIh5AdjoFBgWoBV9pJ_uvIX-3Vw2Ag8y90Mw?e=fTuaxu

Below URLs WILL work:

  • https://contoso.pl/wp-content/images/plane-icon.png
  • https://contoso.sharepoint.com/SiteAssets/plane-icon.png

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='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' 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='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' 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='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' 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='https://mgtrainings.sharepoint.com/SiteAssets/plane-icon.png' 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.

Ready?

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)

Result:

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.

Set(Rspeed,SpeedSlider.Value);
If(isRotating&&Mod(PRotation,180)<>0,
//ROTATION
//Protection from crossing over the full U-turn
Set(Rspeed,Min(180-Mod(PRotation,180),Rspeed));
//Rotate
Set(PRotation,PRotation+Rspeed),
//Continue movement
Set(isRotating,false));

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.

If(!isRotating,
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)));
//Move 
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));
//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:

Set(VSpeed,SpeedSlider.Value);
Set(Rspeed,SpeedSlider.Value);

If(isRotating&&Mod(PRotation,180)<>0,
//ROTATION
//Protection from crossing over the full U-turn
Set(Rspeed,Min(180-Mod(PRotation,180),Rspeed));
//Rotate
Set(PRotation,PRotation+Rspeed),
//Continue movement
Set(isRotating,false));

//MOVEMENT

If(!isRotating,
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)));
//Move 
If(PDirection=0,
Set(planeY,planeY-VSpeed),
Set(planeY,planeY+VSpeed));
//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 tenant with PowerApps

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!