I started working on Power Apps more than a year and half now and it’s really fun working with Power Apps. In this article, I want to show you how you may have some fun too with a business applications platform. Creating games is NOT the purpose of this platform, but this exercise will help you understand some of its capabilities and show off at the end to your friends or family.
Power Platform is Microsoft’s technology which provides low code solutions in creating business applications (Power Apps), Power Automate previously known as Flow, metadata-driven database (Common Data Services, CDS), analytics and reporting (Power BI) and a Power Virtual Agents. It’s purpose to enable business create useful application quickly, without lots of time and money investment and low to none programming involved.
While Power Apps themselves can be of the different types — canvas apps, model-driven apps and portals — we’ll explore today just one of them, the Canvas apps.
Before we start, have a look at this GIF animation, this is what we’ll build – a Tic Tac Toe game.

Ready to go? Great, let’s do it!
1. Inside PowerApps studio, create a Canvas app from blank, in the new window give this app a name and select “Phone” as format.


2. Set Global variables on OnStart function
There are 2 players in the game “customPlayer” with id=0 and “powerAppsPlayer” with id=1
Set(customPlayer,{id:0,name:Blank()});
Set(powerAppsPlayer,{id:1,name:"PowerApps"});
Set(activePlayer,0);
Set(flashColor,false);
Set(customPlayerWinsColor,ColorValue("#b9e567"));
Set(powerAppsPlayerWinsColor,ColorValue("#742774"));
3. Add Logo and change Screen background

4. Add label for displaying welcome message to the player
Change the visibility of the label as shown below.


5. Create a popup to capture player’s name
On submit the name popup will be hidden and player’s name will displayed in the label created in the previous step.

Set Popup’s visibility to true is player name is blank

Once user submit the name, popup is hidden and user’s name is visible in the message label.

6. Add a blank gallery
Set Gallery Items to n array of number 1 to 9
[1,2,3,4,5,6,7,8,9]
Set the Wrap Count to 3 to create a table of 3 rows and 3 columns
Add a button to the gallery after that layout will look as the following screen.

Button OnSelect Logic:
Switch(
activePlayer,
0, Collect(customPlayerSelections,ThisItem.Value),
1, Collect(powerAppsPlayerSelections,ThisItem.Value)
);
Switch function above will add the clicked item’s value to a collection of the respective user
UpdateContext(
{
checkCustomPlayerStatus:If(
And(CountRows(customPlayerSelections)>2,
If(
Or(
(LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 2, Value )=2 && LookUp( customPlayerSelections, Value = 3, Value )=3),
(LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 4, Value )=4 && LookUp( customPlayerSelections, Value = 7, Value )=7),
(LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 9, Value )=9),
(LookUp( customPlayerSelections, Value = 2, Value ) = 2 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 8, Value )=8),
(LookUp( customPlayerSelections, Value = 3, Value ) = 3 && LookUp( customPlayerSelections, Value = 6, Value )=6 && LookUp( customPlayerSelections, Value = 9, Value )=9),
(LookUp( customPlayerSelections, Value = 3, Value ) = 3 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 7, Value )=7),
(LookUp( customPlayerSelections, Value = 4, Value ) = 4 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 6, Value )=6),
(LookUp( customPlayerSelections, Value = 7, Value ) = 7 && LookUp( customPlayerSelections, Value = 8, Value )=8 && LookUp( customPlayerSelections, Value = 9, Value )=9)
), true, false
)
)
,true,false
),
checkPowerAppsPlayerStatus:If(
And(CountRows(powerAppsPlayerSelections)>2,
If(
Or(
(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 2, Value )=2 && LookUp( powerAppsPlayerSelections, Value = 3, Value )=3),
(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 4, Value )=4 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7),
(LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9),
(LookUp( powerAppsPlayerSelections, Value = 2, Value ) = 2 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8),
(LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9),
(LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7),
(LookUp( powerAppsPlayerSelections, Value = 4, Value ) = 4 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6),
(LookUp( powerAppsPlayerSelections, Value = 7, Value ) = 7 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9)
), true, false
)
)
,true,false
)
}
);
checkCustomPlayerStatus: This variable will be set true if customPlayer’s collection has filled with the items which satisfied the winning combination.
checkPowerAppsPlayerStatus: This variable will be set true if powerAppsPlayer’s collection has filled with the items which satisfied the winning combination.
Set(
winnerBox,
If(
checkCustomPlayerStatus = true,
If(
LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 2, Value )=2 && LookUp( customPlayerSelections, Value = 3, Value )=3, [1,2,3],
LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 4, Value )=4 && LookUp( customPlayerSelections, Value = 7, Value )=7, [1,4,7],
LookUp( customPlayerSelections, Value = 1, Value ) = 1 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 9, Value )=9, [1,5,9],
LookUp( customPlayerSelections, Value = 2, Value ) = 2 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 8, Value )=8, [2,5,8],
LookUp( customPlayerSelections, Value = 3, Value ) = 3 && LookUp( customPlayerSelections, Value = 6, Value )=6 && LookUp( customPlayerSelections, Value = 9, Value )=9, [3,6,9],
LookUp( customPlayerSelections, Value = 3, Value ) = 3 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 7, Value )=7, [3,5,7],
LookUp( customPlayerSelections, Value = 4, Value ) = 4 && LookUp( customPlayerSelections, Value = 5, Value )=5 && LookUp( customPlayerSelections, Value = 6, Value )=6, [4,5,6],
LookUp( customPlayerSelections, Value = 7, Value ) = 7 && LookUp( customPlayerSelections, Value = 8, Value )=8 && LookUp( customPlayerSelections, Value = 9, Value )=9, [7,8,9]
),
checkPowerAppsPlayerStatus = true,
If(
LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 2, Value )=2 && LookUp( powerAppsPlayerSelections, Value = 3, Value )=3, [1,2,3],
LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 4, Value )=4 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7, [1,4,7],
LookUp( powerAppsPlayerSelections, Value = 1, Value ) = 1 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [1,5,9],
LookUp( powerAppsPlayerSelections, Value = 2, Value ) = 2 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8, [2,5,8],
LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [3,6,9],
LookUp( powerAppsPlayerSelections, Value = 3, Value ) = 3 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 7, Value )=7, [3,5,7],
LookUp( powerAppsPlayerSelections, Value = 4, Value ) = 4 && LookUp( powerAppsPlayerSelections, Value = 5, Value )=5 && LookUp( powerAppsPlayerSelections, Value = 6, Value )=6, [4,5,6],
LookUp( powerAppsPlayerSelections, Value = 7, Value ) = 7 && LookUp( powerAppsPlayerSelections, Value = 8, Value )=8 && LookUp( powerAppsPlayerSelections, Value = 9, Value )=9, [7,8,9]
)
)
);
Switch(
activePlayer,
0, Set(activePlayer,1),
1, Set(activePlayer,0)
)
winnerBox: this variable will store an array of the item values of all boxes which satisfied the winning combination
Last Switch function will change the active player.
Button Text:
If(
LookUp( customPlayerSelections, Value = ThisItem.Value, Value ) =
ThisItem.Value, "X",
LookUp( powerAppsPlayerSelections, Value = ThisItem.Value, Value ) =
ThisItem.Value,"O"
)
Button Fill:
If(
And(Or(checkCustomPlayerStatus, checkPowerAppsPlayerStatus),LookUp( winnerBox, Value = ThisItem.Value, Value ) = ThisItem.Value), ColorValue("#ff414e"),
LookUp( customPlayerSelections, Value = ThisItem.Value, Value ) = ThisItem.Value, ColorValue("#ff8928"),
LookUp( powerAppsPlayerSelections, Value = ThisItem.Value, Value ) = ThisItem.Value, ColorValue("#ff414e"),
ColorValue("#faf258")
)
Gallery Display Mode:
If(Or(checkCustomPlayerStatus, checkPowerAppsPlayerStatus), DisplayMode.View,Edit)
7. Add a Timer control for flashing:
Timer “Start” function
checkCustomPlayerStatus || checkPowerAppsPlayerStatus
Timer “OnTimerStart” function
Set(flashColor,!flashColor);
Set(winFlashColor, If(checkCustomPlayerStatus, customPlayerWinsColor, If(checkPowerAppsPlayerStatus, powerAppsPlayerWinsColor)));
Set(winFlashColor,If(flashColor,winFlashColor,ColorFade(winFlashColor,50%)));
8. Display Message Text:
If(checkCustomPlayerStatus, "Hooray! You did it "&customPlayer.name&"!", If(checkPowerAppsPlayerStatus, "Try again!", ""))
9. PLAY AGAIN Button:
Play Again Button will reset the gallery in case of any player wins or draw.
Play Again Button OnSelect:
Reset(Gallery1);
Clear(customPlayerSelections);
Clear(powerAppsPlayerSelections);Set(winnerBox,[0]);
Set(activePlayer,0);
UpdateContext({checkCustomPlayerStatus:false,checkPowerAppsPlayerStatus:false});
i like this super article
Thank you:)
I have discovered good messages right here.
I like the method you write. Perfect!
Glad you liked it
great as well as outstanding blog. I truly wish to thank you, for offering us much better
info.
Glad you liked it
This piece of writing is genuinely a fastidious one it helps
new web viewers, who are wishing in
favor of blogging.
Hope it helped you
great as well as outstanding blog site. I truly wish to thank you, for offering us much better info.
Thanks for appreciating, hope it helped you
Thank you for providing really nice writing. I wish you can continue updating them.
Will try my best to keep them updated.. thank for viewing..
Your Short article was extremely valuable. Thanks this
helpful details.
I am glad you liked it..