60 Tips in 60 Minutes App

Heidi Neuhauser and I prepared our 60 Tips in 60 Minutes session recently for Community Summit and I presented with Mallory Lawhorne. This year we wanted to make it even more exciting by presenting our tips at random! We had a bank of almost 150 tips! I built a Canvas Power App that displayed a random tip for 45 seconds then would switch to the next tip. Let’s walk through how this was built so you can try it yourself. You must come up with your own tips of course 😊

Getting Started

First, this app would not be possible without the help of ChatGPT and Matthew Devany! Thank you!

Before you create your app, you will need to create your tips. We created these in PowerPoint then exported them as JPEG. We then saved these to a SharePoint Document folder.

The app can be connected to this document folder as data.

App onStart

On the new app, we want to add these details to the App onStart to create the variables we will use later. We will also create a collection based on the SharePoint list and shuffle it.

Set(varTimer, 45000);
Set(varTipCount, 0);
Set(varCurrentTip, 1);

ClearCollect(colPowerAppsTipsIDs, Documents.ID);
ClearCollect(colPowerAppsTipsIDs,Shuffle(colPowerAppsTipsIDs))

Screens

There are 3 screens in this app:

1. Start Screen – we just inserted an image here to introduce the session and a button to navigate to the tips screen. This screen is not required.
2. Tip Screen – this is the screen where all the magic happens!
3. End Screen – we navigate here after we run out of time to talk about tips. It just contains our contact information. This screen is not required.

Tips Screen

Let’s talk about the magic that is happening on the Tips Screen. The following components are part of the screen:

• Heading – make this look pretty and call it what you want.
• Timer – this will be used to keep our tips moving automatically every 45 seconds (this is a variable so we can change it too)
• Start Button – kicks off the first tip and starts count
• Hurry up Button – advance to the next tip early
• End – end presentation and navigate to the last screen with contact information.
• Image – to display the tip.

Now let’s talk about the code and properties we need on these items.

Timer Button

This is where the work is happening to increase our count of tips and get the next tip. The code for the OnTimerStart looks like this:

Set(varTipCount, varTipCount+1);
Set(varTipImage, GetTipImagebyNumber.Run(Text(Index(colPowerAppsTipsIDs, varCurrentTip).ID)).tipimage);
Set(varCurrentTip, varCurrentTip +1);

This calls a Power Automate Flow which simply gets the content of the file and sets it to a variable that is used in the Image area. It is possibly to do this through our connection to the SharePoint documents as well.

Also remember to set the Duration to the variable created before.

Start / Hurry Up

The start and Hurry Up buttons have similar code. Basically, we will be starting the timer so that the tips can generate. For Hurry Up we stop then restart the timer on the new tip.

UpdateContext({startTimer:false});
UpdateContext({startTimer:true});

Power Automate

You will want to create your Power Automate Flow from within the app. Then add the following steps to your flow. Basically, we are getting the file path based on the file ID that we have from our collection in the Power App. Then using the file path to return the image to the Power App.

Try it Yourself

I can’t tell you all my secrets, but this should be enough to get you started on your tip app. Try it out! Maybe you will learn some tips of your own to share at a future event!

Check out my Events page for upcoming events where you might see this app in action!