HomeAbout MeContact

Create a Bingo Game Using Power Apps

Published in Power Platform
December 07, 2022
2 min read
Create a Bingo Game Using Power Apps

Table Of Contents

Create a SharePoint Lists
Developing the PowerApps
Uploading Picture Functionality
Save Functionality

Do you want to create a Bingo game using just PowerApps and Power Automate?

Here are the steps on how to do it.

Note: To make it fun, I will use Bingo Game to record the activities I need to do form my Pet.

Each time I finish a Activity, I can mark that activity as completed in my Bingo.

Create a SharePoint Lists

Let’s start by creating our SharePoint List First.

We will create 3 Custom SharePoint to store our data for our Bingo Game.

  • Bingo Pet Activities - This is we are going to store the list of Activity that needs to be done

    Column NameColumn TypeDescription
    TitleSingle Line of TextThis would be use for short description of item
    Image UrlThumbnailThis would would hold the picture of each activity
    PositioningNumberPositioning in the Bingo card
    VerticalPatternSingle line of textThis is hold the winning pattern
  • Bingo Pet Activities - This would hold the completed activities

    Column NameColumn TypeDescription
    TitleSingle Line of TextThis would be use for short description of item
    ChallengeLookupReferncing to our Initial Lists
    Submitted DateDate and Time
    Submitted ByPerson or Group
    VerticalPatternSingle line of textThis is hold the winning pattern
  • Bingo Pet Winners - This would store list of Winning Pets

    Column NameColumn TypeDescription
    Winning PatternSingle Line of TextThis is to show what winning pattern they won from
    WinnerPerson or GroupName of the Winner

Developing the PowerApps

Let’s create a home screen first of our App that will welcome our Players


Now let add another screen(let’s call it Bingo Screen) that will and then add a Horizontal Gallery


We will not Connect this gallery(BingoGallery) to the “Bingo Pet Activities” SharePoint Lists we created earlier.


Try to adjust the image, so it looks like this.

I adjusted the following properties in my Gallery.

Property NameProperty Value
Wrap Count5
ItemSort(‘Bingo Pet Activities’, Positioning)

After doing manual adjustment it should look like this


I added a button as well for completing an activity


On the “Mark as Done” button, I will just change the “OnSelect” property of the button and put in

ClearCollect(colSelectedChallenge, ThisItem)


We pass the item we click to a collection, and we will use that on the next screen we create. We will call it “ConfirmationScreen.”

The “ConfirmationScreen” should look like this/ The purpose of this screen is for them to upload their picture as they do the activity.


To populate the Label and the Image at the top, you can just put in the following:

ControlProperty NameProperty Value
ImageImageFirst(colSelectedChallenge).’Image Url’

We are just using the Collection we populated earlier and used to fill in the information on our new screen.

Uploading Picture Functionality

To add the functionality that allows users to upload a picture. Just put in an “Add Picture” control.


Now select the “AddMediaButton1” control inside the “AddMediaWithImage1” control, then change the “OnSelect” Property.

Property NameProperty Value
OnSelectClearCollect(colCardImage,{Title: AddMediaButton1.FileName, DataStream: UploadedImage1.Image})
ChangePictureText“Add a Picture”
UploadedImage1: Visiblefalse


Make the background of the “AddMediaButton1” transparent, then move it on top of your button so the upload prompt will show up when they try to click on it.


Now to show the image that the user uploaded, we add another image object with “First(colCardImage).DataStream” for each image property. We add the following condition to the “Visible” property of both images

Property NameProperty Value
DefaultImage: VisibleIf(CountRows(colCardImage) > 0, false, true)
NewImageControl: VisibleIf(CountRows(colCardImage) > 0, true, false)

We are doing this to give the illusion that the image in the middle of the screen switches from the image from the “colSelectedChallenge” Collection to the picture they uploaded earlier.


Save Functionality

Now allow them to complete multiple activities at the same time, we can is every time they hit “Submit,” I will save the ID from “colSelectedChallenge” and do the following:

UpdateIf(colChallengeList, ID = First(colSelectedChallenge).ID, {IsDone: true});
Collect(colCartChallenge, {
ID: First(colSelectedChallenge).ID,
Title: First(colSelectedChallenge).Title,
PictureTitle: First(colCardImage).Title,
PictureStream: First(colCardImage).DataStream,
Requestor: "i:0#.f|membership|" & User().Email,
RequestorEmail: User().Email,
Positioning: First(colSelectedChallenge).Positioning,
HorizontalPattern: First(colSelectedChallenge).HorizontalPattern

Navigate(BingoScreen, Fade);

Don't forget to add the following code in the "OnVisibile" property of the "ConfirmationScreen." So that the image screen always reset


## Submit to SharePoint
I added functionality when an activity is completed; I just coloured the background green
Now to save everything to SharePoint, I created a Workflow that gets triggered when I click it.
And you can just send the "colCartChallenge" Object Aray as a Variable to your workflow.


O365M365SharePoint OnlinePowerApps


Previous Article
Replace your Title Column(Single line text) with People Picker Column using PowerApps

Related Posts

Troubleshooting Power Automate -  Non-default Environment Bug in SharePoint
Troubleshooting Power Automate - Non-default Environment Bug in SharePoint
November 06, 2023
1 min

Quick Links

About MeContact Me

Social Media