My first Power App Canvas App for Beginners (Powerapps Tutorial)

Power-apps are the future, canvas apps can also, give the information that you want across any device that you want and have fun that's consumable to you but what if you're not a programmer how hard is it to write a power app or write something in canvas well let's find out now I'm all about collaboration you know this however I've had very little programming experience so what our power apps they provide easy authoring connected data the ability to beat ugly cross platform across iOS Android Windows Mac whatever they give you enterprise grade management and control and professional developer extensibility well that's great what's all at me well the ability to actually make an app so I was fortunately get myself on an app in a day course that is actually run by Microsoft and we did it internally so get yourself over to a kms and download all the media that you've got there is PDFs files etc also there's web but power apps comm get on there have a look get yourself logged in see what sort of license you got and then check out the Microsoft power apps free trial signing yourself up for a free trial and give you access to all the premium content and premium connectors and also you know you can be able to go through this without worrying if you've got the right licensing and it's a free trial for 30 days like I say so up in a day power apps and the power apps free trial now let's talk about this app in a day course the app in a day course gives you some PDFs it also gives you a couple of excel files that are going to be heavily referenced within this session now this is basically maybe happening in real time I've only cut out the coffee breaks and things like that where we create the canvas side of the app which is of the app in the day course the first part and all that sort of took about 45 minutes to an hour I got a little bit of troubleshooting in you as well too I think it's important and effectively what we did is we took a blank canvas and built this app which displays an awful lot of IT computer equipment with the premise that you're gonna build an app where you select a brand new laptop and from that brand new laptop you can then eventually compare different stats on the screen sounds really simplistic this is a beginners course and like I say it's up in a day the power platform the PDF is quite concise it's got loads of information on there and you know it's step-by-step it'll really hold your hand all the way through just good for someone like me because I'm great with collaboration greatly transition and transformation great with lecturing great with evangelizing and all of that but a programming kind of pass me by since the old UNIX days of college so effectively that's what we're going to build a device ordering app let's get cracking so here we are on the power apps menu page the main menu page we've got home selected over in the top left hand corner from here you're given several options what we're interested in is canvas app from blank which is this section here so we're going to get that selected and it's going to give us effectively a blank canvas by which to build our application on our power apps application so let's get on there get that selected now what I found with this is is that it's very important to ensure that you've got the right plan and like I said you've got to go to pricing to get the additional content as you can see on the right hand side I've got the PDF that deals with the power app in a day which we're going to go through and follow this information as concisely as we possibly can the first section of this gauge goes through the orientation of the interface basically gives you an idea of what you're gonna do which is a device ordering scenario we're just going to do the canvas app side of things on this in this session and get it to the point where it's a functioning sort of like interface and for that obviously we're gonna be using canvas so we're gonna get ourselves signed in great we're gonna make sure we got the right plan we've mentioned this and to get it and then we're gonna scroll down and we're gonna get ourselves on to the point where we're gonna start building this application you can see it says step by step canvas app from blank click this click that create this create that it's gonna be a real concise experience and when I went through the training myself it was a an all-day it was a right old eight hours and buying it you know your head was fried after all the power apps flow sort of stuff but I found it really intuitive so here we are canvas app from blank the application name we're going to call it device ordering app and I'm tending the cut and paste an awful lot of the syntax directly out of the PDF just to make sure there is no syntax errors it's gonna go off its gonna build that app there you were welcome to power apps to do you get the option to go through some help create a gallery create a form what we got our little PDF for this so we're not going to be too worried about that so here we go we've got our tree view over in the left hand side and our first task is going to be renamed the initial screen that it's given us now we've got the PDF open in the right here so we are going to change the screen to main screen so we're gonna click on the ellipsis over in the left hand side simply either type in or cut and paste from the PDF the words main screen now it's all case sensitive so I'm using the exact same case as what's been put into the document moving on though we're gonna add a header containing the app name and the logged in user name what we're gonna leave the logged in user name to a little bit later that we are gonna need that label however what we're gonna do we're gonna go header label right so we're gonna copy the text for that we're gonna head on over we're gonna insert at the top now and then what we're going to do is we are going to add a label we're going to extend it to the width of the screen you can see it's got Textron in it and at the top section as well you can see in the formula bar you've got a free text version where you can type in either at the top or in situ in the screen where you're actually editing what you want to call this header bar to be so it's currently called label one we're gonna call that header as well we're going to change the font we're going to put some color in there as well make it all looking quite nice and how it should look like in the diagrams they've gotten the PDF selecting colors or applicable from the right-hand side as well on the property section of this so device ordering application now all these colors share what screen you want we're going to keep it nice and simple nice and white nice and plain all stock but you do have the option to put background images different colors whatever you want to do each way put some dark make it all dark theme so it's easier on the eye side then you can do that so we've got our text in there device ordering application we've selected a little bit of formatting with bold and and if different font and a bit of italics to make it look you know sleek and fantastic what we're going to do now is we can put a border around it and put some some color in so we've got it the color is blue so we can't see our black text there so we're going to change the font color now to white there you go stands out against nice blue black round tick in the box that's our label and it's currently called label one but we're gonna call it header so looking down some of the other options as well you know there's different padding you can put on there as well to make sure that it stands proud from any borders or any other things that might interfere that or encroach onto that particular header field okay then so there we are there is our header oh it's a label click on the ellipsis again in to rename there you go header label is what we're calling it as per the instructions done tick in the box that's our first label created in canvas we've named it we've put a color on it we've changed the font we've made it italic we've put it in bold and we've changed the font color great now we're going to move on to the next step so you can really see at the moment how easy it is I mean it's so point-and-click and pulling in different sections so ok then said save the application now here we go saving the application is always good practice it's fantastic practice I've been all the way through one of these sessions didn't save it and then I got disconnected from the virtual session and I start all over again fortunately I was only at this stage but it does give you a lesson to learn so what we're going to do is we are going to create an icon put a color on it we're going to scroll down some of those icons there or we can click on browse and give us our own icon so there are some ones there that you could put in there which is all well and good or you can go to your desktop you can select the good old collaboration kernel I've gone and you can put it in and that icon is there for when I represent your application wherever you save it so it could be you know and I can't have anything really it could be an icon of a badger it could be an icon of you know something pertinent to the app like a computer but I only use the collaboration kernel stuff you've also then given the option to look at screen and size orientation I'm gonna keep this landscape and default at 16.9 but you have got the option to alter that as well I'm keeping like that as default simply because you can always change it later now with all that done we're gonna click on save and with it saved we're gonna get ourselves saved to the cloud to get the cloud saved and then we're gonna click down at the bottom right hand side save to power apps so far so good no DRAM is here everything's going according to plan so back arrow now and that'll take us back into the editing suite so there we go we've got our label bright it's all formatted onto the next step we've saved our application scrolling down now then all this great great great exercise to hear what we're gonna do we're gonna add a device gallery and we're gonna reference the Excel form that we had earlier on so we can add an advice gallery and and we're gonna connect it to the data source the data source be in the device gallery so insert gallery selected our format which is going to be a horizontal format where we can display all the pictures of the lovely laptops that people are going to be able to order we're going to size it get it nicely positioned on the screen as it says in the text we're gonna select the first image and not the entire screen and we're going to size that and by sizing the first image like I say not selecting the whole gallery we're gonna be able to size each of the other items that are in there so now we're gonna hop on over we're gonna get in and we're gonna go to our data source in the power apps in add a section that we downloaded we're gonna connect to the data source and we're gonna select Devices and manufacturers ok now you can see as soon as we've done that in our first gallery its picked up on devices fantastic and we've got some fantastic pictures of laptops of the day aces in this particular visual example if you scroll across as a load in there and they haven't yet been sorted by manufacturer all right scrolling down so now what we're gonna do that was the device gallery so we're gonna name that gallery 1 as device gallery so we're gonna copy the text oh it's the lips again and we're gonna rename and we're gonna paste it in device gallery so that's our device gallery great ok moving on so we've got a device gallery and we've got our laptops you've got things so that to be sized EPS we can get a maximum amount of pictures of laptops on the screen and like I said selecting the initial or first slot or filled in the entire gallery will allow you to size all the others as opposed to sizing the box so you can then get the pictures of the laptops or whatever you got the pictures of nicely sized so I think I'll fit on the screens you can see here in the descriptions so it's all about the pencil item as you can see there we're gonna click on that we're gonna move the picture box scale it not too small not too big we want to get the maximum amount on there without compromising the text because you want to be able to read the text as well so we'll size it all nicely here we go that's about right we can always cite it later anyway as things get built into the canvas that we're using at the moment within power apps we can always size it so as you put more text fields on we can size that so that's all very well and good and those are devices what we're gonna do now is we're gonna add another gallery and that gallery is going to deal with the manufacturers and it's going to be a vertical gallery this time whereas the last one that's a horizontal one so that's no drama so what we're going to do is we're going to select the main screen and then we're going to add another gallery and that gallery is gonna be called manufacturers so here we go vertical there it is and you can see it's all text and it's encroaching on our liberty laptops we're gonna select the data source as manufacturers and you can see it changes instantaneously to the point where we've now got office buildings the office presence of the head offices of each of the individual manufacturers so we've got the ASIS head office and whatever else we've got so great but we don't particularly want that do we we want to have their logos as opposed to their HQs and you can see in the formula bar at the top it's got this item HQ now if you change that as it says in the description down here in the PDF - logo and not HQ then what we're gonna get is is we're gonna get the company logos which it can be more conducive for people selecting for example hey I don't know if that buildings all about but the Acer logo would put me directly it the fact that I would have an Acer PC so that's what we're gonna do so let's first off rename the gallery gallery to on to rename change it to a manufacturer gallery now that's been done great over to properties look at the layout yeah great that's fine looks of all the different sections of course you can scroll down as well with the scroll bar What's it saying now right okay so we want to have a gallery with two columns so select the gallery two columns is what we want now we're not going to have that amount of space on this so by selecting that gallery we're gonna go over to the layout section click we're gonna scroll down we're gonna find the two-layer column there it is pictures select that then we're going to go to the wrap count settings now by default it's set as two we're gonna set it as one I'm just gonna mean we're gonna have just one picture in a column a nice big picture and of course we all know how to size that now don't we so we're gonna select the first field we're gonna shrink it all the way down to a point where we think yep okay that's great that's gonna fit what we need now again like I said we can size all the galleries to fit and we can position them to make sure they fit in and now the ZUP start to take shape this user interface okay right so we've kind of sized it so the next thing we're gonna do now is once we've started finishing messing about with all the the sizing and the positioning of this manufacturers gallery is we're gonna change it from the HQ on to the actual manufacturers logo like we mentioned so we're going to select it oh that's fantastic and we're going to scroll down we're going to find where it says the cell and we're gonna change the cell so it reads the logo and not the HQ as you can see it goes into the formatting quite extensively and there's no real need for this to be perfectly honest with you I mean but it does it is they are quite concise or very concise descriptions right okay let's drag it down let's get on with it logos the good thing I like about this is you can change all the settings and the formatting in different areas you've got the you've got the formula bar at the top you've got the treeview in the left hand side or you can directly manipulate things in the canvas view so it gives you that idea of you can do it any way you want you've got that freedom to create so it's saved the app bang done thank you very much moving on right next step we've connected the manufacturers gallery to the manufacturers table that's great we've done that as mentioned we've renamed it to manufacturers gallery brilliant ticking a box we've done that moving down now we're going to change it from HQ to this item logo as you can see section 4 right there so let's highlight the text that we want this item logo select it and then change the image to that text field which will give us the Lobos and not the buildings this item no go and lo and behold we've got even more formatting to do now because those logos are too big for the small pictures of the individual page queues so that's not a problem what we can do we can also change it on the right hand side instead of it be into fill to fit and that would fit it and scale it down to that area but I think that's probably a nice way of doing it we can quite easily see the fact that Acer Asus Dell HP and other manufacturers if we click on preview which is either the preview button at the top or hold the Alt key and nicely displayed right great so we've done that then so what we've done so far we've added two galleries we've done a label we've added a data source and we've got laptops we've added a connected a data source from the excel sheet that we've downloaded from the power apps and that is then given us the manufacturers original H cubes and then we've changed it to the logos by changing the this item field from HQ to like - logo right next what you want to do is that when we select one of these manufacturers we're gonna have a little blue box or a colored box pass over it to show that it's selected so if we select Acer then it'll be a blue box so this is done in task 5 highlight the selected item in the gallery we've got quite a long bit of text there so in two manufacturers gallery on the template fill from the drop-down box and then we're gonna paste in that text if this item is selected color fill with a particular color you see that that nice pale blue / gray color to show that it's been selected so all the stuff that you generally see on these user interfaces this is how you do it it isn't that difficult so moving down now filter the devices based on selected manufacturer effectively what this means in this section is we're gonna click on HP or Asus and it'll just display all the laptops that are associated with that and that's gonna be the filter devices come a manufacturer ie D equals manufacturer Gallery selected manufacturer section so again onto device gallery select they solve it or we haven't cut off the first part of that text line items we're gonna change that from all items to filter devices come a manufacturer ID equals manufacturer gallery dot selected items done thank you very much so effectively what happens then if you click the preview button in the top right hand side click on Asus we get Asus click on Dell we get the old Dell stuff hey dude is a Dell or HP and we get the HP laptops or Acer and there's a long list of other manufacturers as well on the scroll bar but you can see it's working so I'm quite satisfied and happy with that now that we've got the basis of the user interface that's very irritating and I'm gonna get rid of that ok great so it's a preview mode now and I'm gonna save it once again okay so we're 22 minutes in and thanks for sticking with us so task 7 configure labels in the device gallery so this is basically what this means is where you can see it's got a sir aspire all-in-one when we want to change these two different titles of the laptop pretty easy it can be an awful lot of cutting and pasting involved here and we should be pretty used to dealing with labels it's just me a case of making sure you've selected the device gallery look at the initial field and altering that now if you're still with me in your during this this journey so far creating a power app hit that like and subscribe button because these days on YouTube by liking a subscribe goes on or for a long way and also check out that ring notification bell ring that bell that'll let you know when I'm putting more videos of collaboration tools and power apps in the collaboration colonel channel on youtube so back to it there as you can see we're entering in the free-text now of what we want underneath the each of the individual laptop pictures now we're 22 23 minutes in we've got the basics of a user interface so we want to change that particular label to the title of the worm machine right and this item device type it's going to be an all-in-one laptop very important information to know also the title of the machine what is the machine you're actually ordering again pertinent information that you want to know when ordering a laptop now I think this application could be used within the enterprise where as you're working you're working for the man and your laptop needs replacing and you go on to the company site this site for example and here are all the laptops that you can have from various manufacturers that your enterprise is going to be partnered with or that you can buy great fantastic you select the one you want that will then you know give you the comparison and then future modules of this application which we're not going to deal with in this video well allow you then to automatically get this audit order to get it on for approval so that's the whole idea of what we're doing so we've got the title we've got the picture we're gonna put another label down below we want to get things like the price in there and we want to get you know some other pertinent information so this item we're gonna put in price and that's going to take the price field out of the connected data source which is the Excel spreadsheet that we mentioned well earlier on and that is gonna give us the price now one thousand eight hundred and ninety-nine ninety-nine what grandeurs dollars Czechoslovakian groats whatever it's gonna be we don't know yet so there is a section here where you can edit the text where or put it in the price in dollars okay so this item we've got price we're gonna copy and paste the text in and you can see once we've done that is then put a dollar sign in front of it great so we now we know it is dollars and buy you know in the multinational world and I'm sure I can upset people here thank you CSAT million dollars you can generally take that as the universe of exchange rate now I'm based in the UK so I want to see everything in great British pounds but for the purpose of this application just to illustrate that you can put different currencies in before that we're gonna use Dollars and what I've gone and I've edited that one particular text line to move the dollar slightly away from the figure with just one one space so with that done now what we want to do is put a conditional format in there whereas anything over a thousand dollars is gonna be marked in red now this could be the fact that well unless you're a designer or a developer why would you need something costing nearly $2,000 you can do any gaming on it what you know if it's in the work environment and likely if you're a graphic design you might want a high-powered Ric and you need to have that visually represented to you so we're gonna go over there now we're gonna select that particular label we're gonna put color and then we can say if price is greater than 1000 put it in red okay don't thank you very much no dramas there and you can see everything that is displayed at the moment and of course we are getting everything here we haven't put any any conditional check boxes in anything over $1000 is now read anything that is under $1000 isn't the default color of grey all right then so now we're being prompted to save yet again and we're gonna get in there and save and now what we're gonna do is we're gonna put a little bit a checkbox logic in what do I mean by this well you want to it's is going to be a comparison site to start off with really so what we want deal to do is allow the user to select which laptops or devices they're interested in by clicking on a checkbox right that then checkbox is going to feed into a compare page which were then gonna say well okay these are the ones that you fancy you quite fancy looking at these you've clicked the check box and then you're gonna say compare and it's going to line them up side-by-side so you can see the difference between the two items what with price and processor and memory so that's where we're going from here so insert and we're going a little checkbox we can position our checkbox there temporarily over in the other side now the current checkbox font we're going to change that and also we're gonna change the check box color now blue is a little bit in it so red a red check box just means I need to click it right and that's just my own point of view we're gonna resize the galleries who got number of extra space and we're gonna be doing this resizing the gallery as we build more and more functionality into this particular canvas application but so far I'm sure you're going to agree if you're still with me this has been quite an easy process the instructions are really concise so okay then we're gonna select our checkbox option at the top we're gonna select the words option in free text and we're gonna add the words compare because yes it's an option but we want to be able to encourage people to click on this checkbox so they can compare them against other devices great done that moving on next is create a collection for the selected devices right then so create a collection and when I first went through this I mean it's a little bit a problem with the syntax and collecting clicking wrong fields the left hand side but the formula bar being a put collect compare list this item so when someone checks on it which is defied by the action on check we're gonna put in collect this item for comparison so select the checkbox up to action click on uncheck we're gonna paste in our field there we go control V collect brackets compare list this item brilliant moving on now as when it's checked but when it's not checked or it's unselected we want to remove that item from the compare list so remove compare list this item let's copy that text again we want to go up to the drop-down box on uncheck so when we uncheck that checkbox control V remove this from the compare list this item so really what's gonna happen now is it's like when you select it and get added to a list when you unselect it it's going to remove it from the list great easy that defines a checkbox the next is the default property at the check box this item in compare list now really I'm not too sure about this anyway not to worry we're gonna put it in us what's in the instructions so by default they want it in the compare list okay whereas I would much rather say well by default all you want anything in the compare list I want it blank this is why it says by default they want it in the compare list so we're set the default from the top menu into the formula field and we're gonna say this item in compare list by default so you've got our something so they're saying personally I think you don't have to absolutely it can just be blank but we'll see how this goes okay then so as you can see we've got check boxes so what we're gonna do now is we're gonna view and try out what it's doing so we've gone to a preview got our check boxes we're gonna click on the Aspire s3 we're gonna click on the aspire you great and then what we're gonna do is we now close that down all this currently works brilliant now we're coming out the demo demonstration or preview movie ourselves up to view and we're gonna sit click on the compare list this is going to show us the results of what we've done with our check box and you can see that the two Acer Aspire models are actually there so great into preview again and select them we're gonna close the preview of the application down now to take us back to that screen onto view from the top ribbon into collections and you can see they have been removed so that we know the check boxes are working so that was uncheck puts them in uncheck takes them out Brill haven't got a problem with that and by default it would seem there's nothing in there so okay I was wrong but it just seemed wasn't logical to me okay so that was our compare list so that was it what we're gonna do now is we are going to start to filter the machines from the gallery on selection and not display everything so we've done that we viewed the collections task 11 takes us down set the default section to the first manufacturer and tests the app so what it is that you can't just have no manufacturers they want the first manufacturer which is ASA to be the default manufacturer in the manufacturer gallery so we're going to click on manufacturer gallery copy this right yes okay we'll be the default property in the gallery job done so what are we gonna how are we gonna do this so we're selecting the manufacturer gallery in the tree view on the left hand side we're gonna go down to take it off template fill right the way to default and the default setting is going to be the original manufacturer real okay so first manufacturer bracket done that's the default section okay so moving down everybody likes the ASA it would sing as a compare screen now this is the point where we're gonna have a default screen we can only we can always view our collections we want the user to be able to do this so when they click on that checkbox that checkbox is gonna allow us to go to a comparison page and we can then compare the laptops or nice and easy typical user interface so what we're going to do here is we're gonna add that screen so in the well we've done the default section of the manufacturers that's not a problem that's being done moving down add the compare screen great right so all this is effectively gonna be is so we are gonna go down we're gonna insert a screen and that is gonna display our comparable information so adding a screen so there you go we are going to the home section right okay we're gonna insert a blank screen I've got different templates you could possibly add as well blanks gonna do us for this demonstration we're gonna call it compare screen on the ellipsis again but used to doing this now we've done a couple of times we go you name it to compare screen so make nice something meaningful we can remember it and then we're going to start to populate this as well so we're also going to put some buttons in now these what these buttons are gonna do here is that when we select a particular laptop these buttons are going to show how many laptops we've got selected and when we click on it it's going to take us to the compare screen but we're also going to have a button in a minute as well that is going to have to deal with removing our selections nice and easy and clearing that screen so this button at the bottom down here it's going to deal with is as things are selected on the checkbox it's going to update that button with the selections that we make but I was surprised how easy this actually was this can be a case of insert and from my insert ribbon we've got button now you see it third in from the top got our button and then the buttons text is going to be compared and count how many checkboxes you've got so there's the text we're gonna put in compare and count rows in the compare list and that's going to give us a nice bit of informative text where you know compare how many items click the button takes you to the screen great okay it's actually looking like a professional application now so we say so great that's all been done and then what we want to do if there's nothing in it we want it to be disabled the button should be grayed out so we're going to look at the display mode property of the button and we're going to get that set to the section that if there's nothing in it it'll be grayed out which will be if the count rows is zero display mode will be disabled which means you can click on it or do anything so here we go there's a display mode section in goes our text if the counter is zero display mode will be disabled right and you can see nothing's selected and straight away it's been grayed out with zero items so we're gonna have to test that as well in a minute so we're going to copy this button though with all these properties set I've run into a little bit of problems you as well so for seven reason I got mixed up with some of the buttons and I had to go back and have take a look at that that's why things took a little bit longer when doing this video so we've copied that button and then we're gonna do a paste as you can see all the text still remains the same gonna line it all up and ice on our user interface and the second button right it's going to be a clear selection button and to clear all the checkboxes and then what it's going to do is it's going to clear the compare list so as you can see select the compare button here copy C paste it than that okay and then if you click it so like the on click you want to say unselect clear the compare list so let's copy that text go up to the top on that particular button on click compare list where is it there is on select in the field clear compare list and then when we select that that is going to clear the list and clear all the selections as well great and that will then reset the button and then both the buttons will be great a little bit of logic there so we select the checkboxes that activates the button we select the other button that deactivates the check boxes from the compare list and also it he activates the button great so what you need to do now is you need to test this and by testing it effectively or we're gonna have to do its make sure that our logic works and that's when doing these apps I suppose it's keeping keeping abreast of what's actually happening you know that's the difficult thing so when we click on the compare item the compare item is going to take us to the compare screen now again this this I thought was a little bit clunky I found myself with different things selected over in the tree view and as a result of this I got into a little bit of a mess now to backtrack some of my steps which is okay because it gets you to check your work and now once you get to that certain stage you can see I'm getting into the mess now for some reason I've got the image gallery selected and when I click on that one image it's gonna take me to a different screen well I don't want to do this and by going back and going through it I found myself you know messing up all the navigation and I thought what the hell am i doing when I went back and I did a test on this and only by you know not paying attention does this happen and hands up for this this was like you know four hours into the course my head was getting fried and you know I need this more coffee but everything here is going to be easily remediable so the button the button section will navigate us button number one which is the compare items when it's populated will navigate directly to that one screen.if populated and if activated now this is hands in the air this is Wharton or this is how I did it you know you see some demonstrations never think goes smoothly and you go and do it yourself and you think well I got a minute he did it without any problems but did it work properly this actually works and this is how I did it and this as I went through and like troubleshooting it so again the image I'm setting at making sure the image that when the it's default setting is gonna be the first manufacturer we're gonna make sure some of this is all saved was at this stage and again hands up I thought right I've got it saved as is let's save it as the vise ordering app to so that wherever I change here now I've got the original if I really cock it up then that means you know I'm gonna go back and I can remediate it so again good practice so let's see what happens we got the comparisons compare items so that button needs to be changed no problem I can do that and when we click on it it takes us to a page right so button number one is to compare items which we need to do to get it cleared button number two need some work as well so button number one that needs to go because that's going to clear the screen and we can go back and you can see clear corporate list on select so on select clear the corporate list no problems one select we can do that boom done a little bit of troubleshooting here we want to change the texture button one as well so it got to the top section down to the text field click they're in inverted commas clear selection that's changed the text right that button I'm confident is going to work now okay let's preview it there's our selections cleared it both buttons deactivate and the checkbox is clear click on that button nothing is happening click on that one that works right so now we've got to work on the original button button one on that unselect that will then navigate us to that one particular screen so navigate that button selected we'll go to the compare screen and we'll make sure the screen transition is not set to fade but it's set and known so I'll just click don't any any fanciness going on okay so brilliant now there was a little bit of trouble selecting this for some reason I don't know why the button selected I'd selected action action brought up the navigate ribbon it should have been a case of just selecting the compare screen section click and making sure that the screen transition was working you can't league up on select navigate to the compare screen fade brilliant den okay I think it might work now I'm not entirely sure but you can see how quickly you can get turned around by it just checking some of the fields or the field seemed to be fine okay so as you can see typically this course without all this messing about it takes about 40 minutes but some of the troubleshooting and going back over and checking your work and the remedial work will mean that like in real life takes about an hour right so I'm kind of convinced now all the buttons are working as they should do that's great make sure we got our display modes in place great let's try it so select that's the Acer Aspire compare when items compare to items that clears clears the checkboxes deactivates the button click on two items takes us to a screen we haven't defined yes brilliant it works as intended as to this point currently because where we are in this particular build our first canvas app right great so what's next then because all that tends to work and I'm thrilled with myself I really am not being a programmer not being a developer not knowing what I'm doing so far I think I'm achieving something and that's the sign of a good course I think ok so moving on right next so we got to work on that particular screen and what it says is in this screen is we've got to start populating that with not only buttons but also some images to display as well so on to the display screen and drag down the screen transition bar so we want to have our initial bar our title bar where it says this is the app device ordering app and we need that to be on this screen as well so we're going to do this by using grouping now at the beginning of this course I didn't put the display name field in there right I'm just going to put part of that one particular section in it as a label and that label is gonna be just saying hello that's good enough if you want to display the user's name then you can go through it and you can put it in yourself I don't see the point of that myself not in this demonstration I can see where it work in a proper app if you were building it up you want to give that user that little bit of personal experience a little bit of yes we've connected with the you in the user interface like hello collaboration colonel I see you want a new PC and this is how you're going to get it because you're going to select it in this manner no problem I've got a problem with that so what we're going to do is we're going to scroll all the way back up there and then we're gonna create the user label which is just gonna say hello we're gonna group that together with the header label and then we're gonna get that copied and all sorted out and that is then can then be transitioned to the next screen so select the main screen I've selected new label I've called it user label that user label is just gonna say ello I'm not going to put any of the logic in it like I mentioned and that would be good enough for this demonstration there you can see it there look so it's it's currently black on blue now one of the things you can do is you can bring things to the front you can send things to the back you can layer it like what you can do in Photoshop and PowerPoint and all the other Microsoft applications so the layering and the positioning of your labels on a user interface is gonna be Prime so as you can see we're currently at the stage where we're gonna cut and paste some items over get some things sorted out we're gonna get some more fields put in and this I think was key for me to understanding the layering aspect of the labels and bringing it to a forefront so we're gonna have the text in yellow cuz it's gonna stand out stark contrast against the white of the device ordering which is the title of the application so we're going to move that down again make our text yellow great and you were thinking money oh hey where is it what's it doing select the label on the other side and click on you know I'm gonna bring it to the fourth fret and do the same on the other one bring it to the floor front great ok fantastic a little bit positioning to do on this one particular heading now and we're gonna make sure everything's like moves up in a uniform manner so it looks like when you flick from one page to the other everything's gonna be you know it looks like it would flow better so a little bit of positioning a line at the top of the page of course we've got to do that as well online at the top of the page hello and of course you can see there be an F space to put the user name in there do the same on the front so get as much of the user interface use as we possibly can align align to the top great I'm happy with that fantastic so down to where you where are you gonna effectively group it all we've got it on the second page a compare page now has a title of the application and that user feel to put on it as well and they're grouped great now moving on what do we do next we've got our compare page we've got our title okay so what you want to do is you want to put a gallery in there as well which basically means is what we've selected on the first page the selections will be displayed pictorially in a gallery on the compare page so this compare page can effectively been copied from the main screen down and displayed and then altered because we're going to rename it as well on the compare screen so we can rename the group got our headers named great okay got a title now to insert the gallery copy the device gallery from the meet the main screen to the compare screen dead simple so where's the gallery there it is copy down that screen yeah paste there's our gallery now we don't it to look like that on the second screen so a little bit more formatting to do as well formatting again very important and we're gonna call this the compare list gallery so we don't get ourselves all confused so it's called the Vice gallery where at the moment there it is that's all the check boxes below it clicking on the ellipsis we're gonna rename that gallery to compare gallery no don't so what we're gonna do now is we're gonna go through and the purpose of the next section it's gonna add additional information like memory processes disk space price and then we're going to take the compare boxes away so we're gonna resize it a little bit because people have made their selections from the vast array of manufacturers and devices and now they've got to the stage well okay these are the ones I want to look at and I want to compare I'll receive bigger picture I'd be sure that I'm happy with the color or the screen size or what-have-you so that information has to be surfaced to the user a form that is consumable to them so for that we have to resize the entire gallery and once we resize the entire gallery we can then reposition the gallery we can then get to work by putting additional information labels in place so it's given an awful lot of information how you do it and they're going to follow these virtually to the letter so configuring the gallery couldn't be easier now I realize we nearly ran our in but you'll notice on this gallery that our laptops that cost over $1,000 a display in blank now what could this be what do you think it is but I'll tell you what it is to do with the formulas nothing to do with the code I haven't done anything particularly wrong what it means is is that as I've resized the gallery that particular text field is so small that it will not display the price in the space allocated so it's left it blank no DRAM is there anything is pretty much straightforward all we typically have to do is resize the box now initially what we have to do here is take away that can the the click boxes the check boxes that's not a problem boom select it click in the first field and it's gone alright as you can see by putting them back going back you can see there's all our unlisted laptops so checkboxes we don't need those we can delete them and they're gone from this compare screen we've made our comparisons there you go now what you'll also notice is that every machine whether it's been selected or not is on this compare screen it's a bit of logic to add in this and we'll do that in a minute we have to resize that price field but that's no drama but initially what we also have to do as well is to add some labels and these labels are going to be more information like we're gonna copy the top label what we're gonna do is we're gonna copy it a few times and then we're gonna drag it down and then we're going to resize the gallery so that we know what information we're putting in so there you go so we've copied there the first the first part of things we can reduce the font we're going to size it a little bit so we can get as much information onto the user galleries we possibly can great now there are certain things that we want to put in this title for example this item we've got title we want this item the manufacturer name now as you can see I've got a full stop there just why it's got a red cross next to it okay again easily fixed take the dot away that was a problem with syntax and it displays a sir now we're going to copy that formatted label a few times at the top and we're going to start dragging them down and spacing it out and we're going to start populating that with information pertinent to that particular laptop so how are we going to do this this item is sort of manufacturer we can add in items for example like memory or processor or storage or function for example is it a multi-function laptop how much memory has it got what processor does it has all this information is what you're going to need when you're selecting a laptop now some of these fields are going need formatting to get all the information that you can see it's getting very cluttered around the processor label so we're gonna move things out we're going to stretch things out a bit we're going to make sure the informations there and make sure the informations readable we might even have to change the font perhaps just to make sure it's it's smaller so we can get as much information possibly can into the interface it's that and to look a little bit better it could look a lot more better to space things down a little bit and then widen some of the the fields as well and with that because we're also gonna get out our read prices back so no problems there so we're gonna size the gallery and then once we're satisfied we've got the information that we want to display then we're gonna size this price box now that's then gonna pop our red prices back into place and then effectively it's working right this is it this is all it's gonna be it's working so what other information would we typically see on this screen I don't know actually I mean processor disk space memory who makes it how much it costs that's the information I think you need sometimes less is more and I say less is more you don't over fled people for the information they wouldn't have selected it they didn't know exactly what it was all about so with that done and that in place right what we want to do is when we select a device you want it to be highlighted now we've done this similar with the manufacturers highlighting same problem again so we're going to go to the template fill section of that particular initial item template fill that we're gonna put in then our piece of code which is if selected then color it a color and you can see it's got that sort of lovely lavender sort of bluey color lavender purpley blue color I'm not very good with my colors so the next thing is its navigation so we're at this screen but how do we get off it right we can't so we want to put a navigation button in on the top device or during screen so this is all done by not by buttons as you'd imagined it to be or you could put a button in to do it but I want to put a little web interface back arrow a less than symbol that I think is gonna fit this nice and we're gonna put it right on blue on the top bar but only on this bar on the compare page right so we're gonna scroll down to icons there's gonna be a back here out the left arrow we're gonna have that it's currently blue we're gonna select it we're gonna size it over in the property section on the right hand side we're gonna change the color from blue and we're gonna change it to a color like white which is gonna start out stark against the blue background great and then what we want to do then is then unselect unclick right take us back to the main screen so that's going to be a navigation option if I would have said so we're gonna go right click on select and then we want back which is two brackets she'll take us back to the previous page and there it is done so when we test this now and test it we shall that will take us back and it gives you some some optional enhancements like a padding where you can space things out a little bit in between the different fields and the like but effectively everybody that's it we're gonna save it we're gonna go back we're gonna test it and here's our application you've got our interface where you can select the different manufacturers we can compare it buttons work takes us to the compare screen those are the machines that we've compared you think but it isn't it's actually giving us everything from a sir the logic hasn't separated the ones that we've selected away from the ones that we haven't and that is true of each of the manufacturer items so a bit of logic has to be put in place now where it doesn't select all the items from Acer but all the items from HP just the ones that we select for the from the comparison the clear selection works great okay so we have to work on that one compare screen to make sure it only displays the logic from our check box all right no dramas it's all in the instructions but that's what we have to do next so onto the compare screen everything looks okay we just sighs the process apart as well it's getting a bit crunched up don't particularly like that as a result of this I've got to go in change the processor before you change the font on it as well I'm not too happy with it needs to be smaller we've got to get the information so the information was working properly right okay then so as I mentioned my first started doing this app the interface and the sizing of the galleries are going to be changed constantly all the way through this as we start to surface more information via canvas to the individual user now as we can see we've got a problem there with the Intel processor and size in that processor feel everything again needs to be moved down the gallery's got to be resized we can change the font and there's letter spacing as well on the property section on there on the right-hand side move things down moving things out the way so we can get things the important information in a good logical way I think it's gonna be really important there you go we've got it everything I reckon it's fine it's got enough space there now in between now this brings in to play what we call padding now padding around a field or label gives a gap as you can see I think's very much so over to the left-hand side here by selecting padding and putting a place in for padding as well we can put a gap of say any particular numerical value you want away from the side so if I put a padding value in say 5 then it will move it five five characters or five pixels four five spaces away from that one particular area okay so as you can see we're putting our padding in now click just click off it you can see it's moved slightly away from the edge of the screen again put some more padding in here for the memory just makes things look a little bit more tidier in a uniformed manner there you go as in the memories moved just that little section away from the left-hand side and all the information is there I'm happy with it we're gonna save this great so now what we did we've got to go back and make sure that our selections that are selected other ones that are displayed at the moment now one of the remaining parts is to make sure that the the page you're going to all the comparison on only displays the actual individual items that you've selected from the main screen as a result of this I have to go in and change the compare page just to display the output from the comparison list now I'm gonna test it out here we go select Acer that works buttons work I'm happy with this click on compare great brilliant all that clears I'm happy asus we can select it update and i only get the machines that i've selected so in all fantastic that one variable right at the end brought everything together so i hope you've been following through this with me it's been a bit all over the place but that's how it is when you go on these courses anyone who comes in and does this straight off the bat it's either very lucky or there's been some editing involved there's been troubleshooting there's been you know me making honest mistakes here as well but i thought it's been quite an easy and a good experience to explore I think canvas apps is something that I'm going to do a lot more of and I'm probably going to hopefully get better as well with a bit of practice so I've been the collaboration Colonel this is building my first canvas app my first power app which can be surfaced either through traditional methods on a PC or laptop or also into Microsoft teams as well thanks very much for watching very dense of that like and subscribe button and I'll see you soon happy collaborating and I hope you enjoyed the video you

Channel: Collaboration Kernel

Views: 14,027

Rating: 4.9344263 out of 5

Keywords: Collaboration Kernel, powerapps, power apps, canvas, microsoft powerapps, productivity, learn powerapps, microsoft powerapps tutorial, powerapps for beginners, powerapps tutorial, powerapps tutorial for beginners, powerapps training, powerapps tutorial video, power app, canvas power app ina day, powerapp in a day, office 365, microsoft, flow, Canvas PowerApp in a Day, powerapp, pc, o365, app, Canvas Apps, dev, Canvas power app in a day, Canvas Power App in a Day, Canvas in a day, apps

Id: _BD9rmPrAjM

Length: 67min 25sec (4045 seconds)

Published: Sat Jun 08 2019