Microsoft 365 Community Community Demos, 4 Aug 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Power Apps Demo Extravaganza 2021 - Number Puzzle

Description

In this 11-minute citizen developer-focused demo, Krishna Rachakonda shares his automated number shuffling board game built using only Power Apps components. User selects puzzle type and challenge level. Objective - rearrange numbers in particular order quickly and with fewest moves. Mobile and desktop. On screen help. Play history is stored. Separate and comprehensive power app to explain Number Puzzle’s capabilities, functions, and approach to building game. 10 core Power Apps building blocks used. This PnP Community demo is taken from the Microsoft Power Apps community call - July 2021, recorded on July 21, 2021.

Demo Presenter: Krishna Rachakonda | @rachakonda78

Supporting documents:
• Demo Extravaganza 2021entry | https://powerusers.microsoft.com/t5/Demo-Extravaganza-2021/Number-Puzzle-by-using-Power-Apps/cns-p/931115
• Video – Power Apps Numbers Puzzle for Kids (23 minute demo) - https://aka.ms/KrishnaRYT
• Repo – NumberPuzzle | https://github.com/krishnarachakonda/NumberPuzzle/blob/master/Number%20Puzzle%20By%20Krishna.msapp

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/m365pnp/videos
• Blogs https://aka.ms/m365pnp/community/blog
• Call attention to your great work by using #PowerAppsCC and #PnPWeekly on Twitter.

A

This slide will give everybody the overview of the puzzle. What I'm going to show today.

A

So about me uh my name is krishna rajakanda I've been a contributor in the power apps and power automate community forums, I'm a dual super user. In both the communities and early this year I received a microsoft mvp uh award as well uh for the program, and I do occasionally create some videos of my work uh in the youtube and some of the business cases which I generally come across and automate with powerapps and power automate.

A

So you can follow my youtube channel there and you can also reach out to me with twitter and linkedin, so I'll start playing a small game, how we can play with this puzzle game and then I'll go into the details. So I built this. um This number puzzle I use when I was a kid I used to play this with a small plastic board with all these numbers around and we used we need to shuffle around and to make them in a particular order. So I automated that puzzle with the powerapps.

A

It doesn't use power automate or any other um other other components in the power platform. So if you see there are three different types of puzzles: three by three: it's all metrics. uh How many I mean how deep you want to go, uh how how many numbers you want to have in your puzzle and also the challenge level challenge level basically gives you the unlimited number of moves, uh um and also I did not restrict on the time only the moves.

A

I gave that and let's see the 3x3 and let's give the free freestyle- and I enter my name here. It will give us the nine numbers um and once we click on start button, it enables uh the numbers- and we can you can see. The time is also clicking uh started and one as soon as I click on any number. The number of moves starts. So, if I click all I need to do is rearrange all these numbers in a particular order like one to nine.

A

So all I need to do is just to shuffle these numbers.

A

Like this, and I need to move the numbers in a particular order,.

A

Okay, like this.

A

Yeah, so um for now, like I'll not play anymore, uh we'll go back to the instructions, and here if we want to see the instruction, how different instructions we can see that here and also if you are playing the uh this particular game in a mobile device, we can I'm storing all the uh history of the uh wins as well as we can also see how what's your uh speed and also the number of moves as well, because I'm showing in the browser- I don't have any of the previous history.

A

But if you play uh I'm using the offload offline capabilities of the powerapps. So now, actually I presented this app. How I built uh in multiple conferences where to explain the kids. Basically, I presented in powerapps for kids in rory's, one of the meeting as well um and recently in the spanish summit as well, uh so to explain that I created a separate power app.

A

uh So if we go there, uh this is the the the additional power app I created to explain for the kids so to explain the power app studio and the power effects uh components. So in this puzzle I built I use different uh power effects. Functions like the images, the I mean, the components like images collection sequence, all of that shuffle gallery. All of that, so to explain each of them again. For example, if we go to sequence, uh I created a screen here.

A

If we enter a number like, for example, I want to build a 3x3 puzzle so I'll enter 9 and click on collection, collection and also, if I see the screen on on the bottom, we can see the function. The powerfx function. What we used to create the numbers, we don't need to hard code. These numbers we can use the function called sequence, so I use that and also to shuffle these numbers, I use the function called shuffle in the power effects so with the with shuffle.

A

If I click on it, I can shuffle as many times as I want, so we can shuffle all these numbers and, after that, um coming back again, I placed all these numbers in a gallery.

A

So just like these, these galleries, uh how we can use the galleries we uh we can place the numbers as well so different components. I mean different powerfx functions. I used the patch function, count rows, lookup variables, timer. All of that within this puzzle and the steps I use to build the app are six steps I are like. First, we need to this.

A

Is these steps are for building in a three by three matrix, so we need nine numbers, so add numbers to the gallery and fill the background to the numbers and hide the number nine, because we need to have a an empty spot on the puzzle.

A

So the last number, which is nine, I'm hiding if it is a four by four it will be 16 after I generate the numbers and adding it to gallery, I'm also adding another uh for each cell, I'm adding index values to each cell, so that I know which number is staying in which uh location in the gallery and then uh I'm swapping the numbers and also we need to handle some unreasonable moves as well I'll, explain you that in a bit and then check.

A

Finally, I'm checking for the puzzle, completion so to check all these six numbers again like build few other screens as well. Let's go and build. I already built nine numbers here, so let's go to the next screen so once I add it, I need to go back here. Let me add: read.

A

Line clear collection and then with shuffle and then first I'm not using fast 10 numbers. Previously, I thought of using it, but I did not update this particular screen, but and then once we go there, uh I added a gallery onto the screen. uh The first step is add numbers to the gallery and then fill the background to the gal each of the numbers. uh The every number is a button um so that when we click on it, we can write some functions to do different operations.

A

So in the gallery I placed a button and I gave the number as a label to that and I gave the buttons label uh and then I hide the number nine. So if you see here, the number nine is here, I click on populate the gallery. It it writes the number nine so and in the visible property I put this and then now I add the index values for each of these numbers, uh so you can see the index numbers and then swapping the numbers and handling unreason reasonable uh moves.

A

So having numbers means when you want to swap two numbers, then basically, I took like one intermediate number like 99 or something you know like how to swap numbers like take the value store it in a third variable and then uh store the second variable into the first one, and then like, like that, I I was trapping the numbers and unreasonable moves means, for example, if you see here when I click on 3 3 should come only here, it should not go to the top and also 5 should not.

A

5 should not come to the diagonally to the position of 5. This particular place so handling those moves. I handled that as well and finally checking for the puzzle completion.

A

uh So what I'm doing is I'm reading all the values from the gallery and making if all the numbers are like one, two, three four five, six seven eight like. If, then, if they are in the particular order, I'm comparing it's like a string comparison and then, if it completes, then the puzzle gets complete and you will see some picture in that.

A

So, overall, like um I built this app almost like an year ago, but I wanted to enroll in the demo extravaganza so I enrolled it to, but I this is really helpful for anybody who really starts the powerapps if they are a new beginner for a power app this this uh building, some apps will give you more command on the power, fx functions and different components in the power apps. So I built that time almost a year ago, so thought of sharing with everybody, and this took for me.

A

I initially started uh like it took me like a couple of weekends, because I was changing the layouts and other things. So this is all about the puzzle. That's all! I have taught.

B

That's fantastic: I love how your app breaks down the different steps in there and then you could. I can totally see how, in design mode, you could open that up and then say: oh look, here's the code that did that and connect the dots. The way you have your steps, awesome man. This is great. My son's been asking me about how to make more games and power-ups. I think this might be a really good one for him to start with really cool thanks for sharing it. Did you make all those graphics yourself, too?.

A

Oh no, I picked up from some websites and I use the image control. To put a the background of this puzzle is a single image. I just put it applied as a background, and this is just a gif file. uh I got everything from the web.

B

Well, you're, really good at combining things that is really cool looks great. Thank you. Thank you very much.