Microsoft 365 Community Community Demos, 16 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create a digital escape room with Power Apps

Description

In this 19-minute citizen developer-focused demo, May Alhajri defines the user experience: Participants need to solve problems cast about the digital room to get out of the room – open the door. She then covers off on the process for app design - create story, clues, images (build the room), locks, and then build app. Viewers experience the app then go behind scenes to step through components used (button, label, pop up message, collections) for the app. This PnP Community demo is taken from the Microsoft Power Apps community call – June 2021, recorded on June 16, 2021.

Demo Presenter: May Alhajri | @MayAlhajri2

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

Hello, everyone thank you for giving me the opportunity to be here with you all. So let me start by introducing myself. My name is neil hatchery, uh I'm from saudi arabia, I'm based on the middle east.

A

Actually I'm working as a digital analyst within shambhala company and I'm power addicts, I'm doing a lot of things on my social media. So also you can follow me and if you, if you like to check all my posts, you can check my twitter account linkedin. Even I'm posting a lot of things on youtube. Also, I have a sharing is carrying a group within meetup, so I can drop now the link on the chat you you feel free to follow me.

A

I you can check now the link on the chat. Okay, so also you can call me agent008. So if you want to know the story, go and check my twitter, there is a story behind this name agency this away. So why I'm here today? Actually because we will learn new things and um for me I really like to play to build things easy and fun at the same time. So what we will learn today.

A

I will show you: what's digital escape room and also how we create any digital escape room. Can we use the power apps to build any digital scale room?

A

Also, I will do with you a live demo so for sure most of the people they they went to the escape room, the actual escape room- and you know the story behind it. Actually they put you in a specific room and there is a specific scenario like how you will be able to lock the door. So there is a specific scenario: there is a specific clues that you need to lock it similar way. We will do the same thing, but digital way, it means that we will have an application.

A

We will have a specific story based on our story. We will be able to open the door.

A

Okay. The question is here: how we can build any digital escape room, how we can build any fun digital escape room, what kind of tips that we need to follow, so I will share with you the tips that I followed to build. My digital escape room and it's really easy to use.

A

First, you need to write your story, so what do we mean by writing your story?

A

It means what kind of room do you want to have in your application, for example, here, while we are doing the live demo, you will see what's my story behind this room, so most of the people they like to have different rooms within the digital escape room.

A

Actually, so, for example, you can have power bi and in our scenario, let's assume that we want to build a digital escape room for power platform, so you can build only one door like for power, apps or several doors like several scenarios, so you need to write your story first, second things. Actually, you need to write your rules.

A

It means what kind of things or questions you need to add it to your application or your digital escape room to to the end user, so based on this question or include they will be able to open the door.

A

Number four create your images you need to to to like um build your room either by using a packy ground that we have it on website or if you are creative enough. So you can build your own room by using any animation tool, so for me here, actually I built my animations by using another tool. So maybe you can look at it or I I can arrange a specific session about it, how we can build animation things also how we can create deluxe and build your application so to build the application.

A

It's something really easy, as I mentioned for me, I really like to build something really in easiest way, plus to make it with the fun one. So now it's the time to build the app together and show you how I build it actually. So let me share now my application.

A

A

So here, as we see, let me I will first run the digital escape room. Then I will show you the step that I followed to build it. So let's try now to do something fun, actually uh for any application that I'm building, I prefer to put like a video as a loader like similar to the playstation or something so for me, any application that I'm building I'm adding a short video there. I will. I will guide you later on how we can add this one.

A

So, let's start with the first part, so here first step as I mentioned, we need to write our story. My story here. Actually it's about uh how we let the audience or the end user know about power platform tools as a beginner, so how they can see the difference between each tool that we have it. So the purpose of digital escape room that we have it here it's to to share the awareness about, what's the different tools that we can use it by using our platform.

A

Okay, first, like uh I need to get their attention so to get any person attention you need, you need to make sure that you are talking to them, even if it's just a text. So what I mention here like this is my story, I'm in my office, so I mentioned to the person that was playing the game that thank you to find me and I'm astute and this place. I I need you to go out from this place, so the door is locked now, the the end user will get their attention.

A

They will click here tap to start it means there is another another part of my story so when they click tap to start another part of my story here, I'm explaining or introducing who I am within this digital description. Maybe in your scenario we'll use another one, maybe you can make it as a business scenario?

A

Okay, so here what I'm mentioning to the user? Like um I forget to introduce myself, my name is agent00a and I'm in my office, and actually I was working on organizing my stuff and everybody is done so third part of my story.

A

I need to explain to them what they need to do to to to lock the door to unlock the door, so how how I can explain to them in easiest way. So here I mentioned to them how they they will be able to play or the main concept of my game. So here what I'm mentioning in order to escape this room, you need to help me to automate my task. As I mentioned my story, it's based on the awareness to to see the people uh to see the difference between our platform that we have.

A

It so here what I'm mentioning to them like you need to automate my task as much as we can by assigning the correct tool that we have it from power platform, and we have four occlus the uh on this digital skill room. So maybe you can mention it if you don't want to mention it, it's up to you at the end, how you want to to give the hand to the user so when they click tap to continue here.

A

This is the main thing of our digital skill room. Here, I'm adding like uh five pages on my app, because it's only one room and it's really short, that's why I feel free to add ethics and label. Maybe in your scenario, you just need the main concept and you can put a timer and move the labels there. So here here we go.

A

For example, uh if you look at the mouse actually, if the user smart enough, they will see like if they click here, the mouse will change. It means there is something here. Otherwise, maybe we can add a like a hand for each uh clues that we have it here. So, for example, if I click here, a pop-up message will show me like: I need to analyze all my stored data into one dashboard, which tool should I use here.

A

So the user is supposed to go here and answer the question by typing the name of the tool here. It's powerpi the magic actually will happen here. So if they click here, they will be able to see if the correct answer or wrong okay. So if it's correct by default, it's correct and we can close it from here and we will be able to see this icon. It means he already solved the first one. Second one.

A

If I look to this one as we have four, let me solve it and I will show you how we did it. Second, one which tool I can use to build an app that helped me to add all my requests from the clients here. So for sure, it's power apps.

A

Let me type it like uh in a wrong way. Let's see what will happen so I didn't put any space because the new name of powerapps there is a space so wrong answer. So there is a way to see to to to let the user know if there is a wrong answer or it's a correct answer. So let me put a space here and click here. It's correct, okay, so I have two more because I know the game. So I know what is the clues? Actually we have it here.

A

So if I click here build time, saving workflow. So here it's supposed to be power, automate.

A

And one more things here I need to mention. uh Actually here you can add a timer, so most of the digital or most of the actual escape room. They have a timer like for 60 minutes. So here, if you want like here, because we have four clues and it's easy, so I don't need the timer.

A

Maybe in your scenario you want to build, or you want to build a big room with a lot of the clues, a lot of scenarios, so you can add a timer to make it more attractive, actually last one which is here, create and manage powerful chat, booth that will help to resolve the common issue. So for sure it's powered virtual agents.

A

Current and now I get another message with this image that we escape the room and we are okay. So congratulations so with this one, and this is our digital skill room- it's really easy to use. Now I will show you how I did it. Actually. It took for me, like less than uh 30 minutes, to build this one. It's really easy, because my scenario here, it's really assembled. So I don't have a lot of tools. I don't have a lot of scenarios, so let me show you how I built it.

A

I I would like to ask you any questions: do you think that I'm using any data sourcing like a sharepoint or any excel or anything? So if you are thinking that I'm using any specific um data source just type it on the chart, I will look at it. I will give you a few seconds to see and if you are answering correct, what kind of data source that I'm using here, I will give you adding, which is agent 08, so just type.

A

What kind of data source that I'm using here before I explain what uh what's kind of things that I'm using within this digital instrument.

A

A

None okay, so we have two.

A

So the winner is because he is the first person who answered the question. What? Because we have now, who is the first person to answer connection.

A

Let me just save his name, I think I'm not sure if I'm pronouncing your name correctly, so just contact me, I will listen to you later, okay, so the data source or the type of thing that I'm using here to collect my data, it's collection, so let us see how we build this up.

A

So first, let me reset the game, so I will be able to explain to you everything here we go so as I mentioned here. Let me make it bigger, so I can explain it to you.

A

So, as we see here, actually um the main digital escape room is it's with one page, actually right and the user when they click on any any any task or anything their mouse will change. It means I'm using a button. So if you look at here the user, they would not be able to see anything from here like power. Bi lock number two look at three. So what I'm using? Actually I'm using a button, I'm using a label I'm using also above message to collect the answer and save it on a collection.

A

So let's see the first part, for example. Here I have this one right, which is uh the main part of my game that they need to go there and solve it. I put a label with the answer here. The answer is powered up, so it's just a label here, just with the answer, and while they are playing the game, it's disabled, they will not be able to see it.

A

I'm using this label to to make sure that while we are checking the answer that we are looking to the correct answer, okay, so the main uh things actually within this button once they click on it, we are building a context variable and once we click on it actually here the bubble message, it will appear- and here the pop-up message, it's lock number one. Let me just try to click on it to see it. Okay, so here we have this one, it's easy to build.

A

Just I put like a rectangle and the frame uh this frame. I build it by using a powerpoint, so it's really easy to use and um I can arrange another session about the user interface and here, as we have a few questions, it's not that much. So what I did, basically, I just put a label for each question and within the the book of message and everything. So, for example, here I have the first question.

A

Second question: maybe in your room, if you have a lot of a question, I really suggest for you to use, not collection biking, you can use um sharepoint. It depends on your scenario. That's why I'm I'm using here a collection, it's much easier, and here I put a text input which is the user. They will be able to enter their answer and wait once they enter their answer. They need to click on this icon, and actually here I have a specific code. Let me show it to you so here when they enter their answer.

A

I'm checking the label that I have it here, which is this one powerapps, that's why I'm putting a label for each uh each part or each lock that I have it. So what I'm doing here, I'm checking the answer. If it's matching the same label that I have it, it means go and collect the answer and save it on my collection. I call it here like lock number one for each question.

A

I call it with a specific name: if not do not save it, because I don't need it and then update another variable here, the the second variable. Actually, it's for the the label or the text that we have if it's correct or wrong. So let me try here and the same concept I'm following for all the looks that I have it here. So here it's powered apps.

A

Here we go so when the user is clicking here to action. Three actions will happen. First, I'm checking the answer. If it's correct and matching the label that I added here, it will be saved on my collection. Second and a second actually a second action. It will be saved on my collection, third action here. It will show me this one if it's correct or wrong.

A

If it's correct, the pop-up message will show me, which is here I I call it like you can call it whatever you want, then, and look at the check now the the collection that we have it here here we go for luck. Number, two, there's nothing! There is nothing because I didn't store anything and if I save it wrongly, it will not be stored there. They say I'm following the same concept for all the so as simple as, and here we go when they solve it, there is uh to make sure the user.

A

They know they already solve it correctly, not by adding correct answer to make it fun. You can add, like the unlock icon or something. So here we go here this one.

A

There is a I'm adding a function here for the under physical and make this one physical. If the log collection number one is not empty, it means there is a correct answer within this within this collection so make it visible. That's why I'm only collect the the correct answer, not the wrong answer.

A

So then, when they solve all this answer, actually I'm adding another corporate method, which is the same one, that I'll show it to you and let me solve it correctly to show you, which is this one, the last one that they escaped the room.

A

I'll show it to you now. Actually, here what you can do, you can add a hand uh for the end user like if you want to make sure like you need to uh it's a five letters or two words or whatever you can make it easier to the user. It depends who will? Who is the end user for your game? So now I will show you the last part of our game.

A

Okay, here we go and this one is power ultimate.

A

Okay, why I'm collecting only the correct answer, because for this image, actually it will not show only if the user solved all the looks that we have it on our game. It means here another one or another uh function within the physical here I call it. I'm checking all my collection here. I have four collections because for each uh look I have I, I build a specific collection which is contained the correct answer, I'm checking here. If the lock number one two three four is not empty, it means they have.

A

The correct answer show me this proper message, and this is my escape room as simple as and it's really easy, as I mentioned, if you want to build bigger than this one, um you can like put your questions with your answer within sharepoint uh and based on this one. You can do the same concept by by do a look up on your requester, that you have it in your data source.

A

So what else I think I covered most of the thing that the main concept of the game, and if you have any question just let me know- and let me check so thank you. I hope you you like it and uh you can use it. I I will upload the the game on uh the power platform site, so you will be able to install it and play around with it. So thanks so much.

B

Fantastic, may that's awesome, such pretty graphics. You have too, uh my son gives you the two thumbs up and said it's really cool as well.

B

With me today that is really neat. um There are more than one question for you in chat, but I think the one question that popped out. We were all wondering: how did you get the cool emoji in your app name.

A

So, actually, for this one, I'm using a lot of tools and I can arrange a specific session- I promise so how I build all my avatars. I share on my twitter about my avatar that I'm adding on all my accounts. I can be sure it again, but for this digital escape room, I'm using another tool, I can share it. Also with you. I will put all the link here on my twitter account.

B

Sounds great thank.

A