Microsoft 365 Community Community Demos, 10 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Power Audio Player for Power Apps

Description

In this 25-minute citizen developer-focused demo, Shadrack Inusah delivers a mobile audio player with a Canvas app front-end and modified audio control functionality integrated with a SharePoint list back-end for images and audio files. Did you know a Power App Canvas app can be created from within SharePoint? The app’s UI is composed of labels, icons, navigation, image containers, etc. Used a layout template. Shadrack shows how the out-of-box audio control was modified to look and function differently. This PnP Community demo is taken from the Microsoft Power Apps community call – January 2022, recorded on January 19, 2022.

Demo Presenter: Shadrack Inusah (DreamOval) | @kojo_shaddy

Supporting documents:
• Repo - Power-Audio-Player--PowerApps- | https://github.com/KojoShaddy/Power-Audio-Player--PowerApps-

Stay connected:
• Twitter https://twitter.com/microsoft365dev
• YouTube https://aka.ms/m365pnp/videos
• Blogs https://aka.ms/m365pnp/community/blog

A

Hi all so um my name is shadrach inusa has I was introduced earlier on, um so I would like to just talk about myself in some few points, so I'm shadrach, I'm a graduate good microsoft online student, I'm barcelona uh hosted over 35 plus um events, which most of them are based on their microsoft platforms and mostly on powerapps, I'm an I.t compliance assistant at dreamover, limited fintech, located in accra, ghana, I'm also part of the dot net community in accra as a volunteer as well, and um also one of the most awesome things I started uh earlier this year was to join the local newcom team leak in the microsoft student ambassador program.

A

So currently, I'm being part of the platform, I'm a power platform, blogger currently um blogging on the microsoft tech, community blog site, then one of the or something I also had that was in 2021 february and during the global power platform bootcamp. I was placed second during the african challenge. Yes and finally, I'm a bs computer science student graduate with management.

A

Yes, who did a little bit of management in my computer science program, all right, cool all right, so um before I move on with you guys, um you can connect with me on social media, on twitter, on instagram, on linkedin and then on facebook as well.

A

So this is what brought me here and we are really going to have fun with it. um So we are going to talk about the power audio player, as I call it power audio player. This is something I've dreamt of doing um when I started learning about power ups or when I first got introduced with power ups, I was in 2019.

A

My hope was to build something awesome. I built a copy, 19 application, then that got me the second place in the challenge, and then this is something which I always want to do, because I always want to have an application on my own to listen to my personal, my personalized musics. Yes on my own, so I had to do this and then it's awesome to share with the community how this came about um already sunday app sample site where you can get everything about the application there.

A

How to upload it and also try it on your own or customize it, because I'm not that good with you. I I tried my best yes and thanks to alan, who also assisted with me, assisted me with the ui. Yes, all right cool, so um I would like to take you through the demo all right great.

A

So let me do that.

B

I'll, let you know as soon as we see a character, so shout out: how long have you uh how long ago, did you graduate college.

A

Okay, so I'm I was part of the coffee, 90s students who graduated you know we had issue. We were part of the students who were supposed to graduate in um 2020 may and come in 1982 had that we went on break for six months six solid months and we have to come back and graduate in 2021.

A

So I graduated in 2021. There are about yeah.

B

That's awesome. I I just ask, because I one amazing thing I always see about powerapps is folks who are just starting out their careers building such amazing things, and that's why I asked right there. That's really cool.

A

So, um to make everything simple, um I'm sure there are some people here who are yet to know a little bit about the office 365. So what I do most is, instead of going straight to the power up um going straight to the make.app.com, instead of going straight there to do whatever I want to do. I just love to visit the office.com, so I can have access to all the applications.

A

I need to work with okay, so I have here my powerapps, so I'm going to open that up then one of the thing I also have about before that. uh I think I would like to um demonstrate how the app works in powerapps. Then um we can just dive into it um the features and what is involved and what I implemented in making that up. Okay. So let me just get the app running for us to see how it works. Awesome.

A

Okay, so um this this is the simple application I'm talking about, um and I have in some few um musics or news that I'm going to play for you to see how it works. Okay, so in case I clicked on something like this: it pops up and it starts playing okay, so um I can pause it. um I can continue on playing it. I can forward it and I can all right. So this is it. This is the application.

A

Then I click on this. I go back and I can play any other track. I can add more tracks to it here, also as well. All right, that's cool, so quickly. um Let's go into it, I'm sure you guys have seen how the app behaves now. So now we can move or we can dive straight to how it was built all right.

A

So my data is in sharepoint list list is here for us to just go straight to view it. I would like to go into my list from my sharepoint, because I have to show you where the images are kept and I'm using the classic view. So it shouldn't be that strange due to I was exporting and importing the data from different different environment, and due to that, I need to use the classic view to have access to some kind of features.

A

Okay, so it's it's still the same sharepoint up here, so I'll go into my site content to show you everything there all right. So this is my sharepoint list, podcast, all right.

A

What you can see is um everything is being created here, the songs that you are seeing playing there were added in here and how to create a sharepoint list. um The link will be shared to you. um It's part of the links that are going to be shared to you, um so it will be shared to you for you to know in cases. This is your first time. Okay, I know some of us know, but in case this is your first time the link will be shared to you.

A

So I created a sharepoint list where I have um the title. I just created, I have the title: the artist, the artwork, which is your url, then I have the audio file, which is also a url or you can use the attachment to add your audio as well. Okay, when someone asks so how is the artwork popping up here so with the artwork I created um this. Let me go back to my sharepoint okay, so I have a document library which is um for images okay, so I have it here.

A

This is where I upload all my images. What I do is when I just select this image. If this is what I want to select the image, I just copy the link. Okay, then I drop it. I drop the link in in here I'll drop, the link in here to that particular artist. Okay, it's the same way I do to the audio as well or the music as well with the music. Also I have another folder or another library created for music.

A

Okay, so I think I dropped them in documents. Okay, so you can see some music here. Okay, the reason why so with this one too I just come in here, I can just come and copy the link or I can upload street as an as an attachment. Okay to it.

A

Okay, cool right now, let's go to the para app all right, so creating the powerapp from sharepoint list is very easy because it has been integrated into the system. Microsoft has made everything easy for us to use as usual, so um to do that this app was integrated straight from sharepoint. So you can see this so you click on this just to create an app. Then you give an app a name then straight forward it to create the app for you.

A

Then you can do whatever you want to do to the app adding touches and other stuffs to the app all right. So, as you can see, I call this um list screen. um So power up has what we call in android. We have some things: we call them layers and stuff. Yes, so we have screens here. This is my screen delete screen, which I'm going to talk a little about it.

A

So on my list screen: okay, that's where I have everything: that's where I have the list of songs in there, which I click on to play or yes, so it's just like you're having your track list. Okay, that's something like that! Okay! So that's where the song database is also so this the songs nda. As you can see. If I click on any song, then it's place okay. So this is where they are all right. Then what happened is to edit the database.

A

So if you want to see this is the database actually um I'm coming. So this is the database in here. So let me come here, so you can see yes, so you are seeing a lot of databases here, just ignore that um this is the database we are working with because, um as I said earlier on, this is something I keep trying. I keep trying I never give up.

A

I keep trying until I keep pushing until I reach out to alan who told me or assisted me and made me know, we can use the sharepoint to make this better. Yes, so I I have tried so many ways. um It wasn't easy, but it was very cool which I never knew. Yes, so it's good we use. um We all try our hands on this all right. So on the list you see, these are just labels. Okay. This is just labeled to do that. It's just here insert um labels are just here.

A

So this is just labels of this put in here, and these are icons which you can put some little code. You know power up. You don't need to code too much. Okay, there's some little power effects code for it to move so, okay, so this one you see, navigate, add music cover right, okay or what it means is when you click on this, it's going to navigate to the art, music screen. Okay, that's the add music you're.

A

Seeing here it's going to navigate to the add music screen, then um the reason why you're seeing the cover right is, whilst it's navigating that screen transition. Okay, it should be cover right, meaning when you click on it, it's going to cover right. So let's try something early. Okay, so you see what happened so when you click on it, it covers right. Okay, so that's that's the trick behind that or that's the meaning of the code behind that: okay, so yeah and I'm using the layout um the layout screen, which is also here.

A

You can see that so the layout screen can be changed to what um you like. Okay to what suits you, okay, yeah. So that's all on the screen. It has a search button. Also here for you to set the kind of song you want to listen to and stuff okay yeah. Then um let's go to the play screen, so um this is going to play here. I know it's going to play. Okay, so on the play screen, um it also has a label. It also has this navigation uh button here as well, and then here.

A

So let me start from here so here you can see this image popping up here. You realize the music, I click on shows. So let's go back here and let me click on this alt then tap. So all right, so you realize the music I click on is the artwork. I see. Okay, this is simply done with the image okay. So let me just show you something here all right. So yes, so something like this okay, I want.

A

I want um the artwork to show okay on in artwork that I clicked on to show on the screen. What happened is that I I'm picking the artwork from so you can. You can actually upload the image yourself if you want to you, can upload image. So that's what you can see on the properties panel that you can upload an image inside if you want okay, but to do that, I didn't want to upload images, because I wanted to pick image from wherever I clicked from okay. So I so you have this small code there.

A

um As you can see. This is not strange. um If you don't have much idea, links are going to be shared, which you are going to look through that and do that as well on your own, so song gallery, which is up here, so you see the song it was inside the list screen, so the song gallery does select it okay, so whatever is selected okay and I want the artwork of whatever is selected so this code. Imagine I copied this code and I put it behind this.

A

Okay, you realize this also changed. Okay, so if you realize it has also changed as well, the image container changes, because that's the code, I said whatever I select and they should show in it: okay, cool. So that's what you are seeing up there um as the image container here and these little little things you are saying here. um I just downloaded this from online soundbar. So you can see. I have different different types. They are small, small, small in sizes. So what I do is it's. We combine them.

A

So that's what you can see all have been combined. You can ungroup it here on group or you can group it okay, you can do it to any other stuff. You have on the system, so I just group them and they keep moving because it's a gift file. Okay, so they keep moving.

A

That's what you are saying there. What you are seeing here is just a label, a label which has been given a test. You should pick okay, so this time around. What I want the label to pick is some gallery selected this time around. It's not image by title. It should pick the title here. Okay, then the rest. You can just use the properties to build it. Anyhow, you want okay, then the name of the artist is also sun gallery.selected.artist.

A

So you can see just simple, simple codes. I just added to to get this done so in here there's something hidden in here, because they I mean everybody who asks what is actually playing the music okay. So there's something in something hidden in there, which is the audio.

A

So to do that, the audio is in here you can add the audio from here um yeah. So this is the audio, so you can add the audio from the media. Okay! So that's what I did so the audio is here, but the audio is hidden, it's hidden because I don't want it to show, but I want it. I want the music to play and I want this soundbar or this duration bar to control it without the audio showing okay, so I've linked all the audio anything about the audio. That's the all!

A

The audio features and the quotes and stuff I've linked everything to this ones, to these buttons so that the audio can be hidden, that's the meaning why the audio is hidden. If you want to see the audio I'm talking about, let me just display it for you. So when you go to the visible you can put it on true awesome and down the audio pops up. So this thing was hidden.

A

Okay and um you wouldn't see it- I mean it was it's part of the uh it's part of what makes the fun yes so that was eating um and why these ones why these buttons are being able to control. This is because, when you go here when you go to the audio, um there is something here called start time and I've, given a variable to the start time with var start position. Okay, the vast start position the variable was declared in here.

A

Let me show you that as well, so the variables are all declared here, so I think I will start from here. Rather so the variables are declared here, so this particular button. What it does is set this variable. um That's the vast start position and this vast start position is being set here and it's been also input at wherever this audio starts from okay. So this vast start position is now repre representing the start position of this, this particular audio.

A

Okay, then the audio dot one you are seeing here: audio dot, the audio audio one dot time you are saying is what is this particular audio? Okay, so this particular button is going to when you click.

B

On it, it's going to.

A

Move this particular audio player playing the audio backwards twice: okay, so in in two seconds. Okay, so he's going to move it back in two seconds and whilst it's moving it back in two seconds, the play should stop. Okay, so the variable are seeing here, which is the vapley, is also input in this particular audio. So let me go to the audio again, so this particular audio um is start time. Okay, let's start so. This particular audio player starts is now.

A

We now have ever play day and ever play. It was declared from here, so anything verbally or in it, because we've already declared a badly. So now we can use the vapley anyway, okay! So that's why I'm using the evapoli declarity and I'm using it here? Okay. So what happened is that this should set the evapoli okay, the plane time of the audio it should set it to false.

A

So when you're moving back, it stops okay when you're moving it back, it stops, but you realize once it stops as soon as you lift your hand on it, then it's please okay, so let's have a feel of that. Okay. So let's go out.

B

A

So you'll see what happened, it stops and it continues to play it stops and it continues to play it stops and it continues to play okay. So that's exactly the code behind this. That's um what you are seeing here, okay, so it stops it stops and it continues to play without this. It stops and it will never play okay, but with this it stops, and it continues to play same thing happen same things um to this as well to the forward button also as well. It also stops and it continues to move forward two seconds.

A

Okay, so that's what you are seeing here. It also stops and it moves forward two seconds controlling this particular um audio. This particular audio player. Okay, so it also moves and it also stops- and it also play whilst you are forwarding it, it also stops anita simply okay. So let me hide this back all right, so the variables are in the start, so they start as a variable of vapley. Then the start time, which is the the start time, does the position. The beginning of the uh player is uh that's that position. Okay.

A

So let me go back to the vc go to force.

A

Okay, let me put it on first then, um of course,.

A

All right awesome all right, so it's then vanishes all right now. uh Finally, let me talk about the audio bar or the. um How do how should I call it? uh The duration part which that's what I've given to it? Okay, so the duration bar also has a default start position of advance that pose. Okay. That's the vast start position. Okay, so it also picks from the audio because um it has been declarable has been given to it. So it also picks from the vast start position, if you so the default is about that position.

A

Let me pick it again: okay, so the default is vast. Start position, then, in here maximum okay, so the maximum is audio one, the duration, okay, so it picks. So if you realize I said the audio one is the audio player, okay, so audio the audio player, the duration. So you should pick the audio players. Duration.

A

Okay, so you can see this uh some just simple, simple effect: fx codes, which are controlling everything here. Okay, this is something which I mean a lot of us can do, but um you know you have to really come to understand how this thing works. Okay, so when I was starting, I was thinking is going to be something difficult. Okay, I was thinking is really going to be something very, very difficult until alan told me that no this, this is very simple like this is really simple. I was like really easy simple. It's very simple!

A

I said wow, so I I seen this come true. I was really happy because it's something I've been planning to do for so many months. I've always been planning to fix this. To get this running, so I tried so many things you can see. I had a lot of database on my platform before this was playing actually, okay.

A

um I don't really know if I left something out, um probably so, okay, this gallery. Yes, so this particular one if you realize it changes okay, so it changes to pulse and play pause and play okay. So what happened is that- and these are all image files I uploaded in here in the media here? Okay, they are all here the background I didn't do anything strange. I just downloaded a background and that's the background also here, like everything you are saying, this is the gift file.

A

Everything is being uploaded here, I'm just using them, okay, all right so um with this particular one. Finally, let me just talk about this and then I can hand over so with this particular one. What happened is that when you click on it, okay, it's going to play. Whilst I talk because um it has been stored, so when you click on it, what happened is that it should go on, not verbally okay. So let me show you that.

A

I okay want to all right because it's going to be uploaded on youtube, I don't have to let it play, but so um what happened is that when it is not vaping? Okay, it shouldn't show that's the visibility. So when it is not badly, the play button should show when it is.

A

All right, so so, when, whenever it's playing, then the visibility for the process should be badly okay. So as soon as you click on it, then it means it's not vapory.

A

So whatever players are missing earlier on is what triggers or does the that's, the variable behind the play question of the media or the audio player, as I displayed to you earlier on, okay, so this graph play is just it's just I mean you can also put you can just give it anything you like okay, so it's just representing the play function or the play pause function. Okay, that's all so! um Finally, just introduce the app to you once again, then I can hand over to third.

A

All right, so thank you.

B

Oh, thank you got muted. You got me to chat right. That was great. Thank you that.

A

B

Yeah that was awesome. Thank you very much, there's so many different things you showed in there, not just how to integrate the audio and the sharepoint part, but so many different ways. You took controls that were out of the box and made them do things they weren't intended to do so. You could build that key. That ui and I think that's one of the coolest things of power platform is how we can constantly reuse controls to do other things like you. Did there, like that duration bar with the toggle really really clever, that's awesome.

B

I can see why you uh you, you did so well in that contest for sure.

A

Yeah I had so much sleep last night to work on the eye contacts because it's it's really my vision to do more awesome stuff with power-ups.

B

That's great, that's awesome! Well, next time you do something cool, let us know and come on back and and show us again and and for those.

A

Of you, who also don't.

B

Know how the shadow can and we connected for the call was it was twitter again, it was just someone said: hey todd check this cool thing out and I was like that's awesome and reached out, and here we are so if you have something cool, it goes out to everybody. Just let us know we'd love to get you on the call, so you can show it off too.