Microsoft PowerApps: Hidden Gems #2

[Music] hey everyone this is Daniel and today I'm gonna talk about the power apps hidden gem series - so in today's video I'm gonna have to be covering a whole bunch of cool new things things that are kind of available but they're little hidden and I want to talk about that so today of these five things the ones I've listed over here is adding shadows kind of give you a little depth of focus going ahead and adding your own color because it helps with your company branding when it comes to coloring converting a combo box to a text and I kind of talked a little bit more about them and I get their heading deep links to a screen that's when you click on a specific link it'll take you straight to the link of that screen and I'll walk you through that and last definitely not the least a very popular feature which is adding the app the actual mobile app for your power apps as a separate app ball together as against you opening up your device and clicking on power apps and then go into the app this app will look like a standalone app and then you click on it it takes you straight to that app so these are the five features that I'm gonna show you and enough of the talking let's jump in okay so the first one I'm going to talk about is adding shadows so in the adding the shadows shadows over here the specific ones that I want to talk about is adding like a 3d effect over there and then building the add of the shadow and PowerPoint what I mean by that is when you kind of add a shadow over there when you put a shadow in the back it almost kind of gives you a depth of focus most of you blew the photography actually understand that terminology but the 3d effect is what gives you it looks to be a really nice 3d slash depth the depth of affect focus but the cool thing is I don't have to go somewhere to buy the background or kind of steal it I'm gonna build that to you in PowerPoint so let me know jump in and show you how I did that so I'm gonna go ahead and I'm going to open up I'll open up another power plant PowerPoint slide so I have over here let me go and put up a new one I'll kind of show you how I built that so here's my PowerPoint slide go ahead and convert that into a new blank one and then in here I'll say just select and put in let's just add this entire rectangle alright looks cool now in the fill of the shape fill over here I'm going to put in this gradient and the gradient there's different options for the one I want to use right now is the the linear up but there's also a linear down now that's a diagonally find the linear down you clean it up that's what I'm gonna select we just fill this up I am NOT gonna have any outlines so we just go ahead and start doing a little bit more designing on the linear side say more fill colors look that's not what I want save more gradients cuz I'm trying to get that there we go got that now what I'm gonna do is I'm gonna kind of increase the you know the gradient look and feel and this kind of makes it look a little nicer we can also go ahead and play around with the directions so this is kind of exactly what I want this is also exactly what I want because I want to increase that here is where you can actually do all the playing around you know like I do like this effect over here because I get a little bit more depth on that side and then after that you can go ahead and increase all the transparency that you want so this this over here is a pretty nice thing brightness you can go ahead and change but all-in-all this is all that we need what you could also do is in the outline the shape outline we put it as no outline altogether because I'll really help but now you go to file I go to save as and the save as I'm gonna save it on my desktop I'll call this as a blue shadow meet remember what I put it over them and then this one I'm gonna specifically save it as a PNG format that's PNG I'll save it bit slides and I'll just say just this one goes ahead and saves it and then we are good all right so that was the first spot men tended to kill that I'm gonna save it now let's go ahead and build ourselves an app create one I'm gonna create a canvas app and the canvas app it's opening thinking it's loading and first things first is I'm gonna have a tablet layup over here a blank one that's opening up and but I'm gonna call save it always save it let's call this as our hidden gems live demo to get a little different color say and then let's work on the first one so the first one that I did I'm gonna go ahead and now save the in the media let's get the image that I just built so I'll go ahead and click on the Browse and the blue shadow PNG so now that I already have it let's go ahead I'm just gonna go through a scenario where I'm just building a simple app most of you guys usually if you've looked with me I feel work with my apps you know that I'm really excited about this you know putting a header by default if you have to actually go ahead and use say a you know one of these screens which has a scrollable one over here this guy's top level its height is about 70 so that's what I'm gonna do I'm gonna come over here and then it's height I'm gonna change the size to 70 and then I'm also gonna go ahead and change this to header label put this you know give it say that full fill color the add much change the text color to you that make it in between center let's go ahead and increase that my mouse is really jumping around today yeah and I say hidden gems number two and this is going to be shadow and most of you again if you followed my apps if you kind of helped you you know that I'm loved to put this one as well and that's the header and that's the footer and my footer my favorite text and you guys most of you know it is powered by our apps alright so this was all the easy part nothing new over here went ahead and did that but now let's go ahead and add that shadow or the depth of focus so what I'm gonna do is I'm gonna come to insert and I'm gonna add this media and I have an image alright and I'm gonna can I expand that image first let me just put this over here because will will have to play around with this I'm gonna Exley's expand it and then I'm gonna get the blue image a blue shadow and it comes in this way that's not enough what I'm gonna do is I'm gonna go over here and I'm going to stretch it and then I'm going to go home and I'm gonna in the reorder gonna send it to back that's not enough because that's we're not getting the full depth of focus so we gotta move this down a little bit also I can stretch that out and now as you can see I'm kind of getting that depth of focus effect over here now as you can see there's a kind of a robust I mean a very significant break between those two colors right here but you could have gone ahead in the PowerPoint really blended in the colors over here to match the blue with the red up with the white over there or if you changed your color scheme to say something else kind of blended in but if you notice now you've got a very significant shadow on a depth of effect in fact see where here the more I bring it down it really gives you that depth effect or the shadow effect so that's kind of how I've been doing for a lot of my apps and it really you know it gives your look and feel to a whole different level so that's kind of what I wanted to talk about shadow but not just for the topic header right I can go ahead and do control C control V you know bring it all the way down and in the advanced I'm going to come into the image positional image position expand that it's the image rotation and the image rotation I am changing that to rotate 180 and then after that same thing good reorder center back and then I can go ahead and bring that and and gives you that same depth of focus over here so I can do it for the header I can do that for the footer as well so this is basically how you go ahead and do the shadows piece so you took care of this now let's go and see adding your own color okay so in adding the own color first I'm going to save this we don't publish it as well so I don't lose it okay so I'm gonna go ahead and create let's actually just you know create another screen I'll go ahead and duplicate the screen call this go ahead and duplicate it next time we're gonna talk about is the adding the own color so in the color it's actually kind of fun one of the things I lose less is to leave this guy right now it's really important especially for those people who are very particular about their branding you wanna have branding and sometimes the colors that are already available over here and the fill or the colors may not match what you want you've got a very specific branding style over there so this is how I'm gonna show you how you do it first things first I'm gonna go ahead and add some of the slider controllers I'm gonna add three of them right and one is slider one for red cause it's RGB red green blue do another one that's gonna be D and by default they're all at 50% which is fine just fine fine actually we'll change that to zero by default so let's just do that by default they are at zero let's change that change this guy does zero [Music] and zero okay next thing is I'm now going to go to the actual fill over here because this is the fill of the entire screen and you see how it is 255 255 255 1 watch what I'm gonna do so if you take a closer look over here and the context of the syntax it says that the way this function works or this expression works it's it's red green and blue and then the Alpha is 0-1 but for the red one what I'm gonna do is I'm gonna replace the red one with the slider B dot value now one thing I forgot to tell you but I gotta tell you that now remember by default in our sliders over here it's and let's take a look at that tip cause you wanna see the minimum is from zero to hundred but these sliders specifically for the colors is from zero to 255 which means V now don't need to change our max to 255 so let's do that for each of them and going ahead and changing that to remind a turn 255 same thing here change it to 255 and I could have done all of this before I could have actually you know done it on the first one then on the copy and pasting it would have just been a little easier no idea where that's happening but it saved so we went to indicative that now let's go back to our fill all the way here and change this one is slider or G sets green [Music] dot value and then last but definitely not the least slider because our yeah this one should I be our G and then the RGB dot value so you see what I'm actually testing it it's already going ahead and changing the colors but now let's actually go and play with it so if I go here and I started getting these over here watch I'm able to get whole different variations of colors these colors are not available in the out of the box you know fill or the color thing but this is how I'm able to get it and I can get some really interesting colors over here but besides the fact that you can just play around with them it's really cool this will get you the exact color that you need for your branding now to make it simple I went ahead and just showed it over here what you could do is you could go ahead and add these controls to a whole separate screen which nobody else but just you as the admin knows where that screen is and then if for all of the other apps where you have I mean all the other screens but I gonna have coloring and everything in its failed in its color instead of having the hard-coded numbers you just go ahead and put these you know dynamic variables over here but then you go to the other hidden screen but only the admins have access there you go ahead and play along with the actual constants or the actual values that you need and then that will automatically go ahead and change the colors will the rest of the app because there are so the app is using these type of values over here so the beauty of this is that in the future if your values for all the dynamic you know I mean the branding colors changed it's an easy fix for you because you've already gone ahead and used this place as a one-stop shop to go ahead and change all their coloring but then you can also go ahead and you know affect the entire app so that was the second thing I was to go ahead and add your own color key key thing away here is that um you wanna go ahead and use these controls and then add the control values to the entire RGB and then the RGB is very where you want to go ahead and add these colors which would be a fill for the screen whether it could be the color for each of the controls very and that's how you go ahead and do that so that was a second thing that was the colors now let's go ahead and jump in to the next piece which is converting a combo box to a text now this yeah I call it as a hidden gem but technically kinda it is because it is a formula that I will be using but this came too you know I kind of had leverage it a lot primarily for a share point after I was building what happened was in that case there were certain dropdowns I had used but I was saving it in this case I was actually patching it to a SharePoint list which had a single line of text so I was trying to figure out okay how do my hey whenever the users are using the app and they have this dropdowns you're selecting selecting sometimes it's select and take it off again I want to take all the information and patch it to just a single line of text in SharePoint and how do I do that and that's when I learned this little trick and I'm gonna share that with you so let me bring that down not back and just maintain the consistency and this is screen three here and that is shadows so this is the common word so come on down here you can smell spell Co n let me take that out okay so as an example I'm gonna go ahead and now add a mean to a combo box drop down over here and in the combo box I'm gonna have some this case I'm gonna putting in some static values you guys could you know go ahead and add a data source away from excels sequel the SharePoint wherever for the sake of this demo I'm just adding some static values over here so let me just put in some stuff this is the format so I'm gonna I'll just do the ideas from the previous one is read green blue it's a black wall so I don't know the one right okay we just refer to my other color over here just to make sure yep and yeah so i've got that over here next thing I'm gonna do is I'm going to go ahead and add a text one because this is this is the text that I'm going to use for save the pen you know converting it from this drop down to this text so now in the text we're going to use not the concatenate but the concat and that's an expression that's available in power apps many a times we go ahead and use the concatenate a lot but in this case you're going to use the concat so what I'm gonna do in the default is I'm gonna come in I'm going to type in concat and the intellisense by default gives me concat as the top option so I'm gonna go and do that next thing I want to do is I'm gonna grab the combo box now the combo box is the same control that you added in our case it's a combo box one so that's what I'm gonna pick combo box one then I'm not going to do a selected dot value or selected dot whatever I'm just gonna select straight and use these selected items and click on that select items again intellisense there's a fantastic job because they already gave me the option and then here when I do just have a comma I want to see the option that intellisense is gaming and since I kind of hard-coded those options available it just gives me value but if you went ahead and pulled it in from a sequel or a SharePoint that value might actually changing to say the column name or the table column name so when you're not using this kind of keep that in mind that you might say hey Daniel are not seeing value that's because I'm using a hard-coded you know example over here in my hard-coded values in this example in your case that value might actually change so keep that in mind alright so I'm gonna say a value and then the next thing is how what like what do I want in between those come concatenated values so I'm gonna have the read and then I want something in between do I wanna space or do i comma semicolon it's completely up to you in my case I'm gonna use a comma so I'm putting in double quotes comma Coates and then I calls it alright so that works so let's do a test so I come over here and I'm gonna do red and watch red shows up oh yeah I can do a green and green shows up over here - blue black white they all show up but this is not one of those situations we had I've gotten and clicked it and it's gonna stay with it and guess what it's gonna stay with that forever you can't do anything about it it is very dynamic because watch when I start deleting these away it automatically goes over here so that concatenate the one which I had to do is in my situation I had these combo boxes which are already there in the app and I want to patch it to a sharepoint single a no text you wanted to patch it to a single line even in a sequel table or an excel this is the way to do it that in the app you go ahead and put in the you know drop-down options over there but over here in the app you go ahead and use this fabulous formula in that formula is once again it's the concat expression or the formula it's not concatenate it's just a pink cap and then the way it works is you go ahead and add the drop down over here dot selected items and then make sure you put the values another cool little trick that I use over here and I'll show it to you guys just for you know grins and giggles is not only do I want to know what I'm putting over here but I also want to know a count of how many I've selected for that I used the Soviet count Hey again the combo box combo box dot selected items and in this case just the dot value and by default it'll start counting how many selected and this comes from you know this kind of helps you take that app just to the next level of you know look and feel and the effectiveness because it makes it look very professional but see what I mean that over here now I'm going ahead and clicking and it's telling me that hey you've gone ahead and selected that many this would also be very helpful for situations where you're building an app and allow your customers to say select four or three this is very go ahead and do it is that moment these guys have gone over that make this read so that they know oops I've selected more but this is again just the beauty of it that it goes ahead and shows you how I've gone ahead and you know done all those fun things so this is our next I mean that the option number three that I had is the option to go ahead and take images from the combo box and then you know using the concat function on expression I was able to go ahead and putting it into a single an O text and then the added feature that I showed you which was the you know doing a count of that as well I'm go ahead and save it and then we can move along to the next one okay so in the next one over here the fourth one that is adding the deep links so about the deep links one of the the hidden gems that I use a lot is called as the program or the parameter function I want to give a big shout-out to ela romo she actually was one of the people who went ahead and showed that hey this function was available and you were having discussions with her in the power laps of Facebook group over there and she said hey this was a cool feature and I said that is a really neat feature I'm gonna blog about that and give a big shout out to her so I'm here thanks for showing that and big shout out to you so let me show you what that is okay one of the things I want to do for that scenario is we'll go ahead and actually just use this app as an example so I want to kind of show you and walk you through how this works cause a little bit tedious over here so first things first is in the app itself I'm gonna come in and just drop a label and I'll just put that over here you know make sure that the label is very prominent color wide and say make it really bold because that's how it's gonna be save the other important thing on the app is on the app itself you want to go to the app and on start here's what I want you to do on the set variable put in Start screen variable and then are using the program over to us also stands for parameter and the parameter I'm gonna give this very specific text now you need to be very specific about this text and you need to remember what it is because this is the parameter we're gonna add to the URL so watch what I'm doing I'm doing screen ID closing the brackets for the program and then I'm closing the package for the set one thing I'm focusing on right now is how my screen ID text is I have an uppercase s and then uppercase I and an uppercase D screen ID one word remember that so I'm gonna go ahead and I'll save it and in here I'm going to put in the default as also I say it's the text texts I'm gonna put that as screen it was the variable the variable was what it was a variable Start screen variable star screen variable all right still doesn't try anything right now but that's just fine now let me go and save it we're going publish it and you can see what happens now this guy this section over here gets a little tricky so I want to kind of show you how that works let me kind of walk you through it in there yeah published it come over here let me just refresh that this is very similar to the hidden gems one also I did before because remember I was able to show you how we can take that top header out and hide it very same context so what I'm gonna do is I'm gonna click on that and I'm gonna play it now in the play on the URL you can go ahead and do that and then you type in and screen ID equals I'm gonna say to see what happened over there in that case I was able to go ahead and now add the values directly into the app so I could actually go and change that to anything else say for all based on the URLs I'm able to you know give these pre items or pre default items over here now for some of you guys when you actually saw this you immediately realize that this is huge because if any of you are InfoPath our X info pad users remember back in SharePoint days we were able to do this that in the URL when you're going ahead and up you know embedding the app where ever I could go ahead and pre populate certain other fields you know directly through the URL over here the same thing now you can do with power apps as well in fact I'm gonna do a really more detailed deep dive blog on this but right now just want to share that hidden gem that this is available but what what you know which what happens available over here you can go ahead and now put in the for and then as an example say you wanted to you know have some predetermined or predetermined app over here there say screen screen is a great example right you've build one app and in that one app in fact let me show it to you here's an example of an app this was actually the first test app that I built but here is an app of a US Finance which is dollar side survey okay and then this other one is the deep link to which is also a screen number six and the European finance survey so what the user were here is trying to do is they want to have one an app which is used for filling of the service for all the people across the different countries that they work with you know anything to do with America Europe Asia Australia and Africa and they want to build this one app because all of them are separate screens but depending on who the user is they'd want to send out the link and either link to the people and that's how they can do it is now they don't have to build separate apps they can just have one app and then in the link they can go ahead and actually send them specifically that the screen one over there so the way you can actually do that and let me see if I can get that right for you is in the app itself we can tell them that same process before they go ahead and put in screen ID and then we can put in like an F that if screen ID equals say five and I get the Phi because over here screen at equals five then navigate to screen five and then navigate however you want with the transition or transition failest evade all right actually it's Start screen variable so something like that so let me now save it the other one I can actually do is another one yeah that's incomplete what I'll do is start screen variable equals 6 comma navigate you navigate to 6 comma again the fade here and then close it so basically what I'm saying is that if I know I want to send a link to only the people in America for American dollars I'm gonna send them this one URL in the email and then in the other one I'm gonna send them an email for their if they are European people then I'll send them a very specific static I mean email with a very specific link and that link will have the screen over here so let me show you what that means right save it publish it so I go back over here that's actually the demo one that I had if any of you know worked with me I kind of told you that for some reason in power apps the magic refresh button to guarantee what you want to see is three and refresh the three times and then after that I know that any change I made of the app will actually play over here so here by default I see the first one but if I go ahead and put in and speak on it and not at and screen ID equals five let me see it is working let's try that really fast take a look at the app okay this was the one over here on select if Start screen variable okay value it's not liking the and you learn to save alright minor difficulties but nothing we cannot fix save it should have given it a second to see if the squiggly lines appeared they had so let's just test it okay Misha it I did let's go back to my test stop over here I give it that magic 3v freshers one yeah I first on but cool now what I've noticed that over here I had not put the link on that so we got add that as well so we can kind of visually see what's going on so back over here going to go back to the screen one actually copy the same thing there's the label and copy that label put it over here paste it see publish publish Oh and it's me refresh it because I want to show you what's going on and I remember that screen number six over there that was for the European finance one now if I go back over here and if I change that to screen ID five it shows me the u.s. financed was this is huge the deep linking functionality where I can go ahead and put that in the URL and now it forces it to go ahead and go to that screen or what they just based on the URL no I know some of you may say that Daniel there's already the OnStar functionality to navigate based on conditions over there true you could use that but not in this case because it's a very specific case this is the case or you can go ahead and for the same Bridget requirement which is just filling the forms you can go ahead and say that okay for these people in US I'm gonna send them the u.s. screen and I want to only see the u.s. screen and that functionally doesn't have to be added some conditions or something in the on starred you just put it in the URL and it's done same thing when it goes for the US side I just go ahead and put in five over there and you're done so just yeah I mean the six over there and you're done so watch out that the URL over here that's the main thing is the ampersand or the end and then the variable over there that I'm sorry it's the parameter over there the screen ID that's how I went ahead and got it so again you know I recommend that you gotta go and see this again and again watch it what I did because it's very specific I used the parameter function or the program function over there in the parameter was the value of the parameter nation I'm assigning it to a variable and then that is how whatever is the program function I've added in the URL that one is going to take a automatically affect the app over there so this is the key the important thing of the deep link to go to a screen but you can also use this deep link to go ahead and pre populate these because any existing InfoPath users a designer users would love this because i know an info pad was pretty simple to go ahead and put in all these you know append all these things in a SharePoint page you can go in and do that right now over there so this I know I spent a little more time on this one because this one is huge over here now last but definitely not the least is the one where you can go ahead and now add an app as a separate mobile app let me say that again you build up our apps but now you don't have to go to the open up the mobile app click on it and then go see that you spilled it as a separate app so let me show this to you because I'm sure you know this has been there for a while but when I show it to people it just blows their mind so let me kind of show that to you and I'm gonna prepare my you know my laptop to show my apps I'm gonna pause over here I'm gonna come back again okay we're back over here what I've done is I've just gone ahead and shown you my mobile phone again nothing fancy it's just my iPhone away here but a couple of things you have to do cuz there's no way you can get around that you have to have powered apps over here you just got to have it some people might say that well Daniel that's kind of you know not accurate because I your showing an app but you're taking issuing of power-ups and granted it is the way it is that's how it is but the key thing is you don't have to have users now do that Duke to click process you don't have to click on power apps and then go find where the other app is and then click on that app you can just go ahead and now go ahead and put the app available and that's exactly what I'm gonna do so in this app of mine you see the one way on the top the audit app I'm gonna now click on those three dots or the ellipsis which is to the right I'm gonna click on it and there I'm gonna use the second from the bottom which is pin to home the pin to home and I click on it it comes up to this page and it's actually very user friendly cuz see what it's saying it says add the audit after the home screen to make it look and feel like a real app and it's even telling you where you want to do it so that's what I'm gonna do I'm just gonna click on this tap and then here on the iPhones or on the iOS it gives me these options do you want to add it to the favorites do you want to just copy it what I'm gonna do is I'm just sliding to the right and I'm going to add a to the home screen which is right over here it's added to the home screen when I click on it it even tells me that hey what do you want to name this app because the app by default is called audit app you wanna name it something else so you know what I'm just gonna name it the exact same thing but for any of you who are developers and kind of dev Heaviside you can see that it's even showing you what the URL is on the bottom and how this is the bookmark URL for these iOS devices so it's kind of you know pretty neat over there I'm gonna not go ahead and click on and we're done but just see what happened right over here the one I've clicked on that is now the direct I have been actually end users will just think wow we've got a whole app over there now use smart guys on the admins on the backend you actually kind of know that what has happened is over here I've gone ahead and just put in the shortcut to that existing app so once again let me kind of show you what happened is I went ahead and I had this app over here which is the audit app but when I click on it it actually opens up power-ups and then directly takes you straight to that app so end-users will still see that something's happening but you just made a - you know - tedious steps which is open the app scroll to find the app and then open up the app that you want you made all those tedious steps taking away I just do a one-click process over there so this is pretty neat it works for the iPhones it works for the iPads it also goes ahead and works for the Android you know process is exactly the same over here and what's interesting is this feature was actually available for a long time but every once in a while and I show it to people it just has a you know mind-blowing scenario so I so you need to kind of add that to my hidden gem so yeah so all in all I'm gonna go and close this just as a quick recap what we covered today with these major ones Mikko back these are the fire that fire that we colored adding the shadows remember we went and build it in PowerPoint embedded over there adding your own color huge from my company branding standpoint converting the combobox to a single line of text using the concat function over there or the formula again huge if they're going to just patch it to a single line of text especially to something like SharePoint but you don't you know you don't have to worry about big formulas for combo items and things like that deep link to the screen again that was pretty simple and straightforward right we went ahead and I used the parameter function on the program function but now you could actually go ahead and build a single app and force people to just you know use single different screens because the app is kind of the same he just want you know based on the location a separate screen this is how we do it and then last but definitely not the least adding an app has a separate app which was the example that I showed you over there that the app already exists but I was able to use the shortcut or the pin functionality over there and it pinned just that app in the home page or on the screen of my iPhone where the end users just think that oh this is a brand new app that it's been built over there which gives you a texture that water effect to a whole new level but it also makes it very user friendly so all in all these were the five features for the hidden gems part two I'll definitely be coming out more parts of these if any of you guys are interested about this you know go ahead and reach out to me here's my Twitter handle you know my YouTube video go ahead and subscribe hit the subscribe button on the bottom also in the link of the description I've added the link to the first hidden gem so you don't have to go googling and be me for that it's already over there and once again keep power wrapping thanks

Channel: Daniel Christian

Views: 3,403

Rating: 4.9466667 out of 5

Keywords: Microsoft PowerApps, PowerApps Tutorial, PowerApps Hidden Gems, PowerApps Tips and tricks, PowerApps Form Tutorial, Microsoft PowerApps Examples, PowerApps Tutorials for Beginners

Id: nlhYHoRyVwg

Length: 41min 27sec (2487 seconds)

Published: Sun Aug 18 2019