Up next in 10
Create a fully functional PowerApp application
Integrate a PowerApp with Outlook
Leverage multimedia components in a PowerApp Application.
About Speaker:
Alaa Bitar is a SharePoint addict since 2007, helping business customers to improve and automate their business so that they can focus on their expertise.
Conference Website: https://www.2020twenty.net/power-platform-virtual-conference/
C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
#powerplatform #virtualconference #csharpcorner
Show More Show Less View Video Transcript
0:00
so first of all thank you everyone thank you all who are attending and thank you Simon and all the
0:12
team to organize this super great event there are still some great great great session today and the
0:23
couple of days after and don't forget also that this event is the main the main topic and the main
0:32
subject of this event is of course to to learn some new things discover some new things see
0:37
what are the challenges that that that we have with the power platform in general
0:46
environment but it's also about to raise funds for the children so really if you know
0:55
every i think that every penny penny counts so if you're able just uh yeah click on the donate
1:01
button and uh if even if it's uh one one penny or one cent or one one one euro it's uh it's always
1:09
I think a good thing to do. So before jumping into the session, I want you really to enjoy
1:20
this session somehow. I want this session to be a bit of a laid-back session, you know, and just to
1:31
have fun. Yeah, just have fun with the Power Apps. Either you are, you come from, you have
1:37
you already have some experience in the power platform or the power app environment or you're
1:45
completely new just you know sit back and then see what we can create what kind of application
1:54
that we that we can create you know with the zero code and just drag and drop config configure some
2:00
components make them talk uh also to together talk well together and yeah i hope you will enjoy
2:08
the session uh so uh as we were saying my name is alabitar i'm basically an idea application
2:16
architect i'm also a microsoft certified trainer i work for a company called cassination in
2:22
in Switzerland in Bern basically at Cassie Nation we do we build robots real robots to help surgeons
2:36
do surgeries two type of surgery the first surgery is a quality ablation so it is about
2:44
having a surgery where the patient, where the operation is less intrusive as possible and the
2:55
other operation is to implant audio devices behind the ear to help patient hear again or hear better
3:07
So yeah, we provide those robots to help surgeons and to guide them in those surgeries
3:17
I have to tell you, I'm guilty as charged as we say. I'm a SharePoint addict since 2007
3:26
Basically I discovered this technology at the beginning of my professional career
3:33
and i just kept going uh working with with this technology at that time it was sharepoint
3:40
on-prem and then with uh sharepoint online and office 365 and m365 now uh you can find me on
3:48
on linkedin i have also um a youtube channel it is for apsable where i can share you know some
3:55
some pretty easy going easy to create some good application around the Power App platform
4:05
I have also a blog and a GitHub where I usually put most of my content that I produce available
4:13
for you to download to play a bit. So the agenda is super super simple I just have two or three
4:23
slides before we jump into the demo before we jump into creating like this fun application to
4:30
to create a dictaphone application uh together we're gonna have a little create it together so
4:38
just just one one slide about the uh m365 ecosystem uh what i really want you to do to
4:46
to understand and to realize is that the Power Platform, the M365, our whole ecosystem made of different kind of application
5:00
that enable us to exchange emails, create chat, engage people around some ideas
5:09
We can do some telephony with Microsoft Teams, for example. we can create content and this content is available on our pc on our tablets on our mobile
5:22
whatever you have a windows a mac an iphone motorola or samsung or any android enabled device
5:32
you can access this ecosystem you only need to sign in you only need your office 365 account log
5:40
on and then you are in this amazing um ecosystem of application that can talk with with each other
5:50
and really create a great uh environment i i really love this uh this periodic table from
6:01
jump to 365 it really like um show us the the different breaks the different environment in
6:09
in the office 365 periodic table per se so today we are going to focus on this guy on the on the
6:18
power app we are going to create a power app application but we will see that this power
6:25
app application can in one line of of code uh talk with the the outlook for example to be it
6:35
to send email through the Power App application, for example, and so on and so forth
6:45
I just wanted you to really have this image and really understand that when we engage this platform
6:56
this environment, the Office 365 or the M365 environment, we have access to a whole bunch of environments that talk with each other in order for us to be
7:12
able to create great great applications in really no time. So a couple of years ago
7:22
creating the application that we are going to create now would have taken us I don know three or four more the time that we are going to spend today
7:35
in the session to create it. So demo time. Let's really dig into it and let's together
7:46
create this application, build it bit by bit together with no no code no lines of code no c-sharp no javascript no whatsoever with just a browser
7:59
uh the mouse the keyboard and a couple of knowledge and just know how to you know wire
8:06
all the different components so let's go all right okay so uh to be able to create a power app application basically i have to log in to what
8:25
we call the power app studio this is the place that enables us to create power apps application
8:34
so to access this PowerApp Studio I can either go to make.powerapps.com
8:43
again with my Office 365 account and I have access to the studios
8:52
within the studio I have the home page where I can access the different applications
8:58
that I already created I can learn about the PowerApp platform with some great contents
9:11
If I go to the apps, I can see the different apps that I either created
9:17
or that were shared to me as well. And, of course, I can create a new app and import apps that, for example
9:27
that someone else created. for example if you go to my github you can download an already built application if that ends
9:40
kind of a kind of a zip file just a different different extension you take this package you
9:47
come to import canvas app you upload it and boom it's yours you can play with it you have access
9:54
to it you have access to the somehow source code of it you can change it and and so on and so so ever
10:02
and of course you can create an application this is a really nice feature you know i think it's the
10:08
most important feature that we are looking at uh that for for for for our demo um basically
10:18
we have uh as you can see here we have three different kind of application that we can create
10:24
But today what we are going to focus and the kind of application that we are going to create is a canvas app
10:31
Basically, it's like a blank page, or at least we're going to start with a blank screen and then we're going to create our application
10:41
The other two are out of the scope for today's session. but just to let you know the portal application is basically when if you want to create
10:53
an intranet site website using the power app platform so it's a it's like a public facing
11:02
url that can be accessed without any kind of authentication um or uh oh sorry or the the
11:12
model driven app it's it's another kind of application but that starts with um from the crm
11:21
or from dynamics usually it starts from dynamics in order to create
11:27
an application but let's not waste time on this now we're going to focus on the canvas application
11:35
So before jumping into creating and beginning to creating our application, I just wanted for you to have a look on all these almost production-ready applications that you can leverage and use directly
12:01
directly you know the meeting capture service desk leave request fundraiser my expense assess
12:08
checkout and so on and so forth employee engagement survey those are applications that are available
12:14
for you that were built and were packaged by the microsoft team the for app team created for you
12:24
and you can just click on it, it will provision the application for you with the right template
12:32
and boom, you can already directly be able to use it. So, or at least you can have a look and you are
12:41
you can access the source code of the application somehow, even though it's not really, really a
12:49
source code but you have access to all the configuration to all the components that are in
12:55
this in those applications so if you want to start have a look just pick one of those templates
13:06
provision it to your into your office 365 tenant and that's it you you already have access to it
13:15
You can play with it, play with the button, see how the different screens as well interact
13:22
And that's it. So before I'm going to hit the Canvas button
13:27
I just want to show you the end result that we want to achieve
13:36
So I've already created a Dictaphone application. so i'm just going to load it and basically this is what we are going to to create we are going to
13:48
create an application that have that has sorry a button i can hit this button i can record test test
13:56
this is something to to remember and then hit the stop button and then it's gonna record and save the
14:04
my voice and I can click the play button and hear it again. I can hit the send button and then it's
14:16
going to send an email to me with the audio as attachment and if I don't need it again I can
14:23
just click sorry I can just click the this bin button and it will be removed from the list of
14:32
the different voices that I recorded. So without further ado, let's do it
14:42
So I clicked on the create button. So I'm going to create a Canvas application from blank
14:51
I not going to start with a template or I can start also from a data For example if I already have some data in SharePoint in an Excel file in a SQL database
15:06
wherever, I can choose to auto-generate an application around the existing data that I have
15:15
But today, we're going to start without data because we don't have data, we don't have any recorded voice yet
15:23
okay so i click on the create black canvas button let's pick let's give it the name
15:38
let's say dicta voice okay and i can choose the format this is at this point is it is important it is it just going to
15:50
define the layout of the the application if it is going to be more uh to fit more on a phone so that
16:01
the screen will be like you know more vertical or will have some more places and to be fit on
16:07
on a tablet let's either either way but let's choose a phone layout so click the
16:15
I click the create button and then the PowerApp Studio will generate a blank application for me
16:23
You see in a couple of seconds. So basically I have like this white screen that I can add some components
16:37
So when you start, you start with the tree view. By default, you have only one screen
16:46
Your application is made of only one screen. If you want to add screens, you just hit the new screen button
16:54
And then you can add screen. You can add another blank screen. Or you can also add screens that already have some templates
17:05
for example if you want to display a meeting kind of screen or a calendar and so on so forth so
17:12
basically it will provision for you those kind of screen for now we only need the one screen so
17:25
if when you when we want to add a component to a screen super simple from the ribbon button we hit
17:33
the insert button and now we have here as you can see you have all the different
17:41
components that you can add so it goes from the labels or button to whatever kind of text
17:48
input text html text rich text editor different kind of input as well button check boxes
17:56
a radio button toggle uh timer and so on and so forth um the different there are different um
18:06
item for example you have the the media where you can access there put some image or what it is uh
18:14
interesting for us the microphone component so i just hit the microphone component and boom
18:20
I already have like a kind of button that I can drag and drop whenever I want on the screen
18:27
and already start to play with it. When I want to test an application in the Tor App platform
18:38
basically I can just hit the play button on the top right. So I can hit play and my application
18:46
is like in live mode and i can do whatever i want and once and when i'm done i just hit the x button
18:54
so i can back i came back to the edit mode of my application or on the keyboard if you hit the alt
19:01
button the application goes to live mode and you can access it directly you can access the
19:11
functionalities directly whenever you release the add button sorry whenever you release that button the application goes back to the
19:23
edit edit mode so if we remember we want to save our voice so from our microphone button okay let's
19:34
put it on the top but at the middle. How can we put it at the middle? I'm not going to, you know
19:42
see the width of my screen and the width of my component and just like, you know, at some point
19:48
choose the corresponding X. We can leverage the kind of formulas that will be dynamically
20:00
evaluated at runtime and then, for example, we want to position our button in the middle of the screen
20:11
So the X and Y defines where you want to put your component in the screen. So the X is the
20:24
horizontal and the Y is the vertical. So if I want to place my button on the middle of the horizontal
20:35
axis, super simple, I select my component. I can access, whenever you select a component in the
20:43
PowerApp Studio, you can access to the properties in two ways. You have on the right side, you have
20:50
the different properties that are available directly here. So the common properties or the
20:55
advanced properties are available directly from here or from the upper left
21:06
section of the screen from this drop down you can also access all the different properties of
21:12
a component so i select the button i select the x property and then i can just like say app dot
21:25
width so this represents the app object represents my application dot width represents so the width
21:36
of my application so but i wanted to put it in the in the center so i have to put it to to say
21:44
that i want the width divided by two okay so this will sorry will put my button my component sorry
21:56
at the middle but the component has a certain width so i want to subtract the half of the width
22:05
of my component so it's really centered on the screen. So I can just do
22:11
minus. And then how can you reference a component? So basically you can
22:17
reference a component in two ways. You can reference a component by its name. So for example
22:23
let me just rename it and call it Micro not Microphone1 You can take its name and directly reference it in any formula So I can say micro divided by two just some parentheses for user readers readability
22:45
So now I see that my component is boom straight in the middle of my screen or because I'm using
22:55
getting a reference to the component from one of its own properties, I can use the self keyword
23:10
So whenever you are in a component, you can use self. So self references the current component
23:22
So for example, if I add a button and here, for example, on the whatever property I use, the self-reference
23:36
Here self references the button, not the microphone. So whenever you use the self keyword, it references the current component
23:49
Okay, just to let you know. So here we have finally our button to record and it is centered in the center of the screen
24:01
So I can, whenever I click, it records automatically whatever it's hearing from the microphone and I can stop
24:13
But what I want is to save this record. So again, I select the component and if I look on the different properties of the component, I see that I have an onStart and onStop property
24:32
So basically, as you probably guessed it, the onStart is the event whenever I click on the button, on the microphone button, and the onStop is basically when I hit the stop button
24:47
So what I want is that when I click on stop, I want to take what I just, sorry, the component
24:56
recorded from the microphone and put it in some kind of a variable. So
25:02
if we want to create a variable in the PowerApp platform, super simple, we can use the set function
25:10
set function basically takes two parameters the first one is the variable name so let's say
25:17
i want to name it audio file and then the value what is the value that i want to assign to this
25:26
particular variable basically it is self dot audio audio self audio the audio property represents
25:37
the content that has just been saved by the microphone. Okay, so if I click the start button
25:46
I click the, sorry, I click play and then I hit the start button, it's recording and I hit stop
25:56
What happens is that the on-stop event was triggered and then the audio content
26:04
and the component just recorded, has been put in the audio file
26:09
Now, it's not really, really what I want, because what I want is to be able to save multiple voices
26:18
So using a variable that can just hold one object is not what I really want
26:27
What I want is like an array or a collection. In the PowerApp environment, we call arrays or
26:43
variables that can hold multiple objects, we call them collections. So in order to use a collection, I cannot use the set function
26:53
but I can use the collect function that takes a collection. So let's name it audio files
27:03
And then each time this function is called, the audio property object is put in the audio files collection
27:15
So whenever I hit the play button, I hit the start, record, hit stop
27:22
the audio property goes into our audio files collection. But let's go a bit deeper because at the end
27:34
okay, it's nice to save the audio, but let's go a bit deeper and save another information
27:46
Let's say the recorded date and time. So now what I want to store in my audio files collection, in my audio files array, if you want, is an object that is made of two properties, the audio properties and let's say recorded on property
28:08
So how you can create an object that has different, not different, but multiple properties in the Power Platform, it looks like a JSON format
28:22
So I can just open bracket and here I say that I have an audio property that is equal to self.audio
28:33
But also I have a record.on property that is equal to the now function
28:45
the now function just take the current date time and and we are putting it in the recorded on
28:52
property so now whenever i click the start button i record the voice that i want to record i hit
29:03
the stop button and what is happening is that i'm creating an object that has an audio property that
29:10
is binded to the self.audio property of my component and another property that is called
29:19
record on that has the day the current date time that I when I put sorry when I hit the stop button
29:28
so click the play button I kick start so hello hello this is a voice to remember I hit the stop button
29:38
So I have an object that has been populated in my underscore audio files collection
29:45
I hit again the record button. Hello, this is a second voice, for example, and I hit the stop button
29:53
What happened is that now everything went well. I basically have two objects that were added to my collection
30:06
Now, okay, super, great. We saved our voice, but now we want to be able to play it back
30:15
or at least see the different voices that we recorded. So to be able to display information that are binded to a collection or what we call it, a data source in the PowerApp environment, in the PowerApp platform, we can use the component, super great component called gallery
30:40
Gallery basically is a component that takes as items a certain data source or collection of objects
30:49
and be able to look into each item of our collection and display the different properties
31:02
So like the new screen, you can have different templates, but you can also have like blank templates
31:11
So we're going to use the blank vertical because we want to display our items vertically
31:20
Sorry, not horizontally. So I click on the gallery vertical. I can just put it just below my microphone
31:31
I can tell it to take the whole screen. Now, okay, I have this container
31:38
that is called the gallery so let's just rename it by gal so records same okay so i want this
31:51
gallery to display the different audio files that i recorded so i have to assign the items
31:59
property the items property is like the data source of my my gallery i have to
32:08
to make the items the data source of my gallery equals the audio files collection i know that my
32:16
my gallery is going to loop to each item in my audio files property. OK
32:26
So now I can add an item inside of my gallery for each record
32:34
to be displayed. So I can add, for example, a label. OK
32:41
A label, I can just position the label whenever I want. So by default, the PowerApp environment assign the audio property for my label
32:54
But I don't want to use the audio property inside of a label
32:58
I want to use the recorded on so I can see at what time the voice has been recorded
33:08
And I can even do some concatenation. So for example, I can say recorded on
33:19
And the end, so I'm concatenating the recorded on label with the time.recorded on property of the voice that I just recorded
33:35
OK so I can see that I have two voice that were recorded on five and five six p and 17 p okay now i want to be
33:52
able to play the the audio okay so super simple i go to the media in the in the ribbon menu and i
34:05
choose the audio component and the audio component is basically a small player I can choose to place
34:15
for example whatever I want let's put it like that okay and the the media property of the audio
34:25
component is the content that you want to play back so the the content that I want to play back
34:32
is my current item so we have to imagine that the gallery is looping through all our items okay so
34:44
each item is referenced in the in the gallery as this item this item represent the current item
34:55
that the gallery is looping. So I want to attach the media property
35:03
of my audio component to this item dot audio because this item dot audio
35:12
it is the audio property that holds the content that I just recorded
35:16
If we remember, whenever I hit the stop button, I'm putting the self dot audio
35:21
the content that I just recorded, into the audio property. So I want to play it back
35:29
It is the audio property that I have to bind to the media property of my microphone component
35:39
Okay. So now if I hit the play button, so I see that I have the two different voice
35:48
that I recorded. I can record, of course, anyone. click stop button and it's directly shown here and I can choose to play whatever voice that I want
36:03
Okay, good. We are almost, almost done. We have to now, okay great, they are going to tell me okay wow, it's a great application, I can record and I can play it back
36:20
but come on let's go a bit more deeper and integrate the the power app application our
36:30
the power app environment into for example office sorry outlook and to be able to send the
36:40
the voice by email for example for later to to to review it or to listen it again
36:47
Just Simon, how much time do I have left? It's like four minutes
36:55
Four minutes. You have around four minutes. You cannot hear me? I'm not hearing you, Simon
37:08
Okay, all right. Okay. OK. So I think I have five minutes left OK so we want to send the voice by email So we go to the icons and we go
37:31
we select for example whatever icon that we want to select. For example this one. Oops
37:39
sorry I didn't add it to the to my gallery so I go to icons
37:48
and I hit the send button okay so basically it's just an icon I could have selected a button or
37:58
whatever component but I think it's a nice icon that really represents the kind of action that we
38:08
want to to accomplish so to be able to send email through the power app
38:21
environment we have to add some connector some email sending per se connector so
38:31
i we have to go to the view and then to the data sources and here in the data sources we can add
38:37
different connector so we're going to leverage the um the outlook connector to send email so
38:44
you just hit the add data to add a different a new connector you select outlook office 365 outlook
38:55
connector it just takes a couple of seconds okay so uh now the connector has been added to the uh
39:06
to the to my power app application so i can leverage its uh functionality so i choose
39:13
the if i click again on the on the send icon now here if i uh want to send an email so i can go to
39:23
office 365 oops okay office 365 outlook outlook dot so here i have all the different uh functions
39:35
that I have, that I can access. So the one that I'm looking into is the send email. So the send
39:45
email takes three mandatory parameters to whom you want to send an email. In our case, I want to
39:55
send an email to me. So how I can send an email to me dynamically without hard coding the email
40:05
and if every user, different user access the application, I don't want the other users to send an email to me
40:14
I want to send to each user, wants to send an email to them, to each one
40:19
So dynamically, we can leverage a component that is called user in the PowerApp environment
40:28
So user represents the current user, the user that is currently logged into the application
40:35
so we can access different set of properties we can leverage the email then the sub subject we can
40:43
add so a voice recorded on and then we can add the recorded on property for example and as body
40:57
I can put voice to grid number, okay? And now the function is displaying the not required properties that you can access
41:15
But the one that is interesting for us, it is the attachment property, because we
41:22
want to attach in the email as the body of the email
41:27
the voice. Okay, so basically when you want to attach a file, when you send an email, you
42:03
leverage the attachment parameter of the send email function and this basically this parameter takes as input an object that's called a table that has
42:21
a name and content bytes so name you can name it whatever whatever you want it doesn't really matter
42:28
so you can put like for example audio uh you can name it audio recorded on and this item recorded on
42:41
and then the content byte is the content of the email that has the content of the attachment
42:51
So whenever I hit the send button, it will leverage the send email function and then send it to the current user the current audio
43:09
So just to go last thing, last little bit function is that the send email returns true or false if it properly sent the email or not
43:24
So I can just set the result of the function and then test it. Sorry
43:34
So if underscore result. Sorry. if underscore result okay notify but if i is a is a function in in the in the call app
43:51
environment just to like a pop-up just to display some information so email sent
43:57
or let's in the other case if that email email and let's just try it hit the play button and I click the send and I have the email sent and
44:17
let's just go and double check in Outlook I just received an email voice recorded on with the
44:26
date time and as attachment the audio file I can play directly for example in Outlook
44:36
or I can download it and yeah I think that's it for me
#Multimedia Software
#Virtual Worlds
#Computer Education