Display a Random Collection Item in Canvas Apps

When we’re building Canvas Apps, one of the most important factors in your design is whether you can give your users a reason to come back to your app. Some of these solutions may be sophisticated, such as automated notifications that prompt the user to check the application when updates are made, but others can be ‘nice to have’ or whimsical just to satisfy an end user’s curiosity and to have a little fun.

Amongst other features built in this internal Canvas App, today I wanted to experiment with selection of random collection items, and I thought ‘what better way to do this than to show a quote to the end user that differs every single time that the user logs in?’. No two users would ever see the same quote at the same time unless it was by pure chance.

Here’s a short explainer on how I achieved the end result.

Step 1: Create a Collection of Inspirational Quotes!

There’s nothing particularly special about this Collection except that we’ve assigned a value to every quote. This is absolutely critical, as we’re going to use a function that requires a numeric value shortly.

You should create your collection within the OnStart Property of the App, as this will ensure that your quotes are ready to be randomised when the home screen loads.

A screenshot of a Collection within the Power App, which holds a Quote and an assigned Value.

Step 2: Create the Label control to randomise the quote shown.

By combining a few functions, we can request that our Canvas App sets the label to one of many random quotes from the collection every time the app loads.

LookUp(QuotesCol,Value = RandBetween(1,6), Name)
  • The Lookup function allows us to return the Name value from the QuotesCol collection, and,
  • Using the RandBetween function within the Lookup allows us to grab a random quote that has a Value between 1 & 6 to identify the correct Name value to display.

Step 3: Run OnStart to test the functionality.

And that’s it! Right-click on the three dots next to the App heading in Tree view and you’ll see a random quote appear within your Label control.

A screenshot showing the finished app with a random quote from the collection being displayed.

Final Thoughts…

Now this example was extremely simple and quite amusing to build, but the point of this exercise was to add yet another reason for my end users to come back to the app, whilst also learning a little more about how you can use functions to identify one item in a Collection dynamically.

As this data was extremely limited I chose to store my data in the Collection itself, but in most cases, you’d probably want to create the Collection from a SharePoint List or Microsoft Dataverse to have better control over the data you’re using.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

%d bloggers like this: