Power Apps Hidden Gems Series 5

[Music] hey everyone this is Daniel and this is going to be my last video for this year which is 2019 and I thought I'll ended by putting in the fifth version of my power-ups hidden gem series so in this one over here I am going to talk about the following and this is four items over here one is I'll show you how you can use the request height feature to go especially for sharepoint customized forms when you use a batch function how do I use the scrollable screen and how to get it I'm also going to show you how you can take a nap and then add it to teams and then finally disabling the scale to fit so that your app can actually fill up the entire screen over there so now that you know the four things I'm going to cover let's jump into it okay so in this case I'm going to talk about the first thing is the request to hide feature and once you're wondering what is this request to hide feature it actually is a expression which is available our formula it's available in power apps and it works really well for a sharepoint customized form and I'll show you a scenario so in this case take a look at this sharepoint online list that i have i just call it list of the hidden gems or hidden features v the list is pretty simple and straightforward because that's not the emphases of this one the emphasis is what does that request haitai does so let me show you cuz I've already worked on a little bit of the app already and if you guys are interested in how I've done the patch function I've got a whole series of that already available I've also put links to it in the description down there so you can go and click on that my article is called as building power-ups from scratch use patch and then there's other ones that built over their way even the managed metadata connections however you want to use those it's all listed over there and since I have it built i'm not emphasizing on the patch function I'm just emphasizing on the app over here so the app is pretty simple and straightforward as you can see it has SharePoint which means the data is coming from SharePoint but in this case what I did is I actually ignored the form screen one which is built out of the box I'm just making it a little nicer looking app over here I know it's not that nice but the emphasis again is not the app is what I did was I ignored the form screen one and I went ahead and did it from a blank canvas dropped all the columns and all the fields over here now what's happening is in the SharePoint when I go to the app over here and when I go to not just on SharePoint integration when I go and do was on save I've gone ahead and put in my patch function I'm again not the emphasis of what the patch function does but in this case what it does is it just takes all the data from here and puts it in SharePoint so now that you've seen it and I can go back and close it and let's go take a look at the form over here so when I click on new you can see that that nice-looking customized form shows up over here and I can go ahead and put in some information this is Danielle Christian power apps maker design department is innovation techy world employee type of myself and as a permanent and the phone number I'll put in the same when I see over here and so the data I've gone ahead and submitted that but now with the customized form with a brand new brand new canvas when that hits save what happens is the data shows up over there but the form doesn't close and if this kind of bugged me for a while because I think well you're almost there the data is almost being stored why isn't the form not closing because what I would have to tell people is that go ahead and click on save and then you gotta close the form and that's just not very user friendly once they hit the Save button the form should automatically be closed and the data should show up over here and we're almost there and so once I inquired and I learned from a few folks that there's actually a very simple trick to that and I'll show you what that trick is so I'm gonna come over here to the customize form and I go back over here and at the end of your entire patch function you go ahead and hide the put in the request hide function and you open the brackets and close the brackets and that's what closes the form it's actually as simple as that and I'm gonna show it to you so I'm gonna click on the skip I'm gonna go to chiffon integration I'm going to click on on save and then right at the end of everything that's happening over here I hit semicolon when I do request hide-and shows up over here the bracket opens up and I'm gonna click on save over here I mean I'm gonna close the bracket and for myself I'll go ahead and also put in a version too so I know the change that happened yep I'm gonna do a save and publish that saving saving the power apps part of the customization form it's gonna go ahead and close it redirect me back to the SharePoint list and now let's go and do another test so I'll click on new and see as you can see some it still shows that version 1.0 because it just takes a few extra seconds for this thing - you know refresh so what you can do is you can just refresh the entire share in the store here click on new and just give it a second yep that's the nice new version over here and I'm gonna now say Jane Doe our school also here fine HD was just put in HD you she is also permanent and the phone number is five five five five one two three four and now when I hit save see what's gonna happen the data got stored and the customer is forum closed so that is as easy as that is that's how you use the request hide feature remember this only is needed when you create a blank canvas in the customized form and do all your customization which in my case was the patching functionality everything works you know you go ahead and do all the functionality but just to close the form you gotta use the request height feature so that's the first one is how to use the request height feature now let's take a look at the scrollable screen so in this global screen over here I'm going to actually create a quick little example and what I've done is I've got this let me take a look to see which one it is things in the hidden gems let me take a look in this case what I'm show you is that how and especially in mobile apps it's a really great example of in the mobile apps over here I've got all this information right I've got a head and build an app and I you know I'm already populating and filling in all this information but I'm slowly running out of space over here and so what I want is now I want the scrolling functionality where I can keep adding more and more which I mean components over here more and more you know all these controls but then very automatically I should also get the scrolling functionality now out of the box it will when you start having you know create a blank screen over here that scrolling functionality doesn't show up what you do need to do is you can go ahead and create create your blank screen and the next you want to come over here to new screen and you want to click on the scrollable so when you click on the scrollable it provides this functionality called canvas one and by default it also adds the data card one so now that you've got this you can actually go ahead and copy it and then you come back to your new screen or wherever screen you're working on and you can do a control V and you've pasted it and then by default you've got that canvas you've got the scrolling functionality and you've already got a data card one so from here onwards I can go back to whatever I started building you know select those control C and I can go ahead and drop them into my data card over here and keep keep adding those now are the trick over here in the explorable screen for each and every data card it is not mandatory that for one data card you can only add one set of information where in this case is just the full name you can add multiple things in that one data card couple of things that I do is that if I'm building a form it needs amp right contact information which is the first name last name email address and a phone number Department and everything I put all that information into one data card and you can see that it just makes it a lot easier because now in that data card I can you know add a whole bunch of stuff to it and then it kind of compresses all of that into just one data card and also helps me to make that naming convention I can you know by just saying that employee information data card over here next I can click on add new section I click on add new section alarmingly creates another data card for me and then that data card over here can put in other like job information and then from heat I can go back to the other place over there I can go ahead and put in other information and copy all of that come back over here to this place and select on that and it also helps to go ahead and expand it ahead of time and when I click in it and I hit paste all of this comes in over here so one of the features over here is if I go in its Justina for grins and giggles just to prove a point I'm gonna start pasting more stuff in over here keep adding in pasting more stuff if you notice the scrolling bar automatically shows up so let's watch take a look at the difference in this case over here when I see on that first screen and I go ahead and play I don't have that scrolling functionality no this is when I've demoed its to people they say well Daniel I've actually seen a scroll bar over here just go ahead and minimize the window and the scroll bar appears sometimes it appears sometimes it doesn't appear now that scrolling is not the same scrolling which you'll of be available in the app that's just to temporarily provide a option in the browser to see where your data is but it's not the same scrolling functionality which you need we're a lot more controls have been added and you want the end-user to have the functionality to be on that same screen but also to scroll that is why you want to use that scrolling functionality but now when I go to the screen to over here see I actually have that scrolling bar available so I know I did it a little quickly and I hadn't let's just took some examples but the key thing over here is that you want to go and get that screen and go get that canvas scrolling component or that you know of a function over there you can copy and paste that anywhere and then it is not a requirement that for one data card you can only put one cell information you can put in as much information as you want in fact I've seen people put in a bunch of stuff everything in just one day the card and it works I just kind of tell that you know for each data card put in a specific information and like you can see for my idea that card I just put in the first section first name last name just the name part of it second data card was the job information all of that so it kind of helps you break it down and unit for your own peace of mind for coming back in the future to fix it so that was the second thing is the scroll two teams functionality let's look at the third thing which is adding it to teams so for adding it to teams let's actually take this example and I'll go ahead and delete that over here I'll delete this one as well so we just have a nice looking screen let's see oh god yeah this is like this is a good one so let me just save that and what I need to do now is I can go ahead and publish it and the the basic idea is that from the power apps you want to go ahead and export that to a teams as a solution and well the solution is basically just a zip file and then you can go to power app I mean not perhaps you can go to teams and then import that solution in over there as an app so let me show you how that works I'm gonna go ahead and close this get out of here let's go back to my apps it's gotta be that one now I click on the ellipsis which is over here shows more commands and then there is the functionality which says add two teams so I'm gonna click on that it just add two teams and see these two things with me this this information bar that opens up it says to add your app to teams review and document your app as a zip file and then it says review and download your app as a sub file and then upload your app as a customer after team's the beauty I like over here is that they have already out-of-the-box made the functionality to take your entire app it goes ahead and makes the whole thing as a app a custom app all put together as a zip file and it gives you the functionality to download it and then in teams you can go ahead and upload that all as an app so they've done that you know together all out-of-the-box you don't have to do any custom work on your site so now I'm gonna go ahead and click on download app and it goes ahead and creates it and it's all says uploading it after team's this is how you do it go ahead and you know go to teams and I'll show you how to do that but it has gone ahead and created it and now I'm actually downloading it my site is downloaded and it'll be in my download full in fact if you see on the bottom left it's gone ahead and created that zip file so now that I'm done on the power app site I'm going to now go into my teams and for the sake of this example I've just used the web interface you can do this from your desktop as well so I come over here I actually go yeah come over here I click on apps section sorry we're here and upload a custom app I click on that upload an app and here's the one that's the one I just downloaded so I'm gonna click on that click on upload and over here as you can see it is uploading so it goes ahead and uploads it it's uploading so let it finish let it do its thing it's uploading it making sure it works on the team it adds it as a team's custom app so whatever it's doing that it finished on its own over there might look a little faster if I had the desktop app but in this case it's all working on the browser which is fine so let's just finish this off and once it's done it'll all show up on the section over here so the hidden gems five that's the one that I just uploaded so now I can click on the eyes I can just click on the entire app and it says that the app is uploaded to your your place do you want to go ahead and add it yes I'll go ahead and add it and then after it is added it just validates to see hey here's your app and it's gonna work and the cool cool thing about this is it already takes all your authentication and your authorization so it's all built into it whatever you did on the powerup side directly works on your team side as well I'm really happy with this but let me just show you that now when I have the app I can go to any of my teams and I go to this I have a team over there called business development now I can click on this plus away here and on the plus I can actually just quickly search for power apps and on the power laps when I click on it much it's not this case I can come back here and I can click on that and I can just search for hidden and hidden gems five lets can see the hidden gems fire was the one I just did it I uploaded it so I'm gonna click on that and it says do you want to go ahead and add this yes go ahead and add it and now it will show up over here as well so say yab description is good post to the about this tab summary you save it says going ahead and setting up your hidden gems five tab which is right over here and voila right there is your whole tab set up just by app and it'll stay there I mean I can go ahead and look at my files I can go and look at my post but the hidden gems five stays over there so this was an example that I wanted to show or how we could go ahead and now take your app export that as a zip and it automatically head creates an export which is gonna work for teams as a team's custom app go with the team's upload that and it'll go ahead and add it as an app just go through the metals some verification process and then you can pick and choose any of your team that you want and then add that over there so that was the third thing which is going ahead and adding your power-ups to teams now the last one that I want to show is disabling the scale to fit functionality in power apps so for that I want to actually do a quick demo over here so what I'll do is let's come over here and I'll go ahead and create a simple app so I'll do it as a mobile app so you guys can see it and then I'll also kind of walk you through a little bit of things that you want to keep in mind again I'm not deep diving into how you build a fully responsive app that's a whole separate piece altogether and I've actually already done a video on that and I'll put that in the chat over here and I'll be adding more videos to that because responsiveness has improved so I'll be building more on that but in this case I just want to show you how I can disable that functionality to give you the responsive app let's come over here and I will create this simple mobile app let's call this as hidden gems by responsive up to disable scale to fit you know I like to change the icons so it just gives it a little bit more design let's call this one it's part of their save it let's add a little bit of a design to it because I want to show you guys something here a label on the top change the color of that to something a little bit more nicer Center take that on the center make that a little bit more bigger yeah make it 30 30 30 to disable scale to fit you'll see control V and you guys know my favorite over here my favorite footer text is always powered by our apps okay so I'm just gonna save that and what I'm gonna do is publish it and now I'll go to the mobile app and I'm gonna show it to you so let me just open this up over here let me go ahead and open up our apps if I need to first save this so you guys can see it okay screen mirroring I should be able to there this there there go ahead and grab power apps and I call this one as hidden gems so let's see if it shows up on the top look the dims let me just type that in hidden right there hidden gems disable scale to fit so I'll click on that now watch what's happening up over here let me actually go back out here in this screen over here you can see that it kind of it fills up the entire in a screen area way watch this section is see from here to here it's filling it all the way up but when I go to the app that I've created watch what happens see it has become a little smaller that's because the scale to fit functionality is actually enabled right now it's completely enabled which is why it's making sure that the scale of the app it is the text and everything is all in a scale and right now it doesn't allow me to fill that up and this is good this is my design because if you're just building a simple app you want that scale to fit to be an A to B enabled because then your app will look nicely scaled nice design and everything but if you want to go ahead and disable that then here's what you need to do you kind of have to make that app a little bit more responsive and make it more pleasing to the eye so to show you though I'm gonna go into the app I'm gonna go to the screen and size orientation and what I do is I go ahead and toggle off the scale to fit now when I toggle this one off it oughta might be also toggles off the lock aspect ratio and that is by design and then in this one whether you want to lock the orientation that's completely up to you but I need at least these two things over here which is the at least the scale to fit that needs to be toggled off and when you do that this will go ahead and get off as well so I'm gonna now just do that and I'm gonna do apply to screen so it goes it applies it and then the next thing is you gotta go back over here and do a little bit of responsive design so I'll show you the quick little tricks then you can go to my responsive site and look at the whole video so we're here now on the top one I'm gonna do the X and I'll leave the X as it is which is zero because by default it needs to be on to zero what I'll do is on the Y I'll leave that as zero as well but what I need to do on the width is I'm going to do the app dot and on this side I'll just do the width so they'll go ahead and populate the width site so that's what the headache let's take a look at the footer over here on the footer I'm gonna do the same thing let the X be 0 but on the Y I'm gonna have to do a little bit of playing around by default it is 1 0 6 6 I'm gonna go to the app dot height and in the height even though here it looks like there's something available what I need to do is hide - and this is label 1 dark height so it shows up over here nicely and there's a reason for that because if I just put an app height this one will actually be not available in the app at all you want to go and say that hey I wanted as the app height which is the entire map I hate - the actual labels height which is where I to show up always at the bottom that's what you need to do and then the same thing for the width I'm gonna be the app dot with and it'll always show up so now let's go ahead and do that it's going to save go ahead and publish and then you can see that there will be a considerable difference so now I come back well your watch CU I hear how it is there's a bit of a gap over here there's a bit of a gap now I'm gonna go ahead and close this and just refresh it and click on that in fact on the top it is telling me that a new version of the app is available tap to update now I'm gonna do that tap to update and watch what happened over here see that it went ahead and made it nice and responsive now this is pretty cool this is just a quick way for you to get started with getting it a little bit more responsive but I do want to show you this one thing first thing is this horizontal sliding thing that's part of the your phone away in my case it's an iPhone X s so it's part of that so you got a factor in them and you're building the app you want to make sure that this doesn't overwrite or you know come on top of the interfere with the text over there but one thing which I don't see over here is on the iPhone this section is by default going to be covered up by where the phone the cameras so we show you that we're here when I click on let me go to a slide you see this is what the app looks like right now you sorry I even showed you the top thing but then this app will actually be opened up in a phone your entire hidden gems number five will probably be overwritten because over here now that it is responsive and the scale to fit has been disabled your text will actually not show up over here and over here you will probably see your purplish color over there and that will be there but your text will not show up so you need to actually design your app in a more responsive way such that it'll it'll factor in that your phone has actually got this design now remember in the app it shows a preview that didn't show up but when you open up this app in a natural device this section will actually be going missing or year because of that so keep that in mind I'm the best way to always factor in that it works just keep testing it keep testing it so what I want to show you is another example of how I was able to build up here is a another appetite it was scaled to fit and you see I actually factored that in I went ahead and put in this information over here I mean I actually took away something because I factored in that this is gonna be for an iPhone there's actually a camera over there so I took all of that off this will app was built with the responsive design in mind I went ahead and made sure that it populates the entire phone and I also took the entire thing off so if I can switch it away here it will automatically fill but that process is for another day and I'll walk you guys through it so all in all these were the four things that I want to talk about and just as a quick recap we went ahead and talked about the the request hide functionality over there we went ahead and talked about the scrollable screen section over there we also went ahead and talked about the adding two teams remember how that worked zipped file exported from teams go ahead and upload that back into I mean exported from power apps and upload that back to teams and then the disabling scaled to fit that was the other one over there which I walked you through it that you've got to go ahead and disable that scale to fit over there but then I also showed you that what that's gonna do is you got to first of all make the app a little bit more responsive so you're gonna use that x and y-coordinates you're gonna use that half over there and I've actually walked you guys through it a little bit more detail so go ahead and click on that link over there but these were the four hidden gem series that I wanted to show over here and this is my last video for 2019 I wish you guys a happy holidays and I look forward to all the new videos already have planned for 2020 thanks

Channel: Daniel Christian

Views: 1,443

Rating: 5 out of 5

Keywords: microsoft powerapps, powerapps tutorial for beginners, powerapps hidden gems, powerapps sharepoint, microsoft powerapps tutorial video, powerapps tutorial, Power Apps Hidden Gems, powerapps scrollable screen, powerapps add to teams, Power Apps Disabling Scale to Fit, powerapps responsive layout, powerapps responsive canvas apps, microsoft powerapps tutorial, learn microsoft powerapps, learn powerapps

Id: ZKNnryjJC9g

Length: 26min 34sec (1594 seconds)

Published: Mon Dec 23 2019