Gain in-depth knowledge for passing your exam with Exam-Labs PL-100: Microsoft Power Platform App Maker certification video training course. The most trusted and reliable name for studying and passing with VCE files which include Microsoft Power Platform PL-100 practice test questions and answers, study guide and exam practice test questions. Unlike any other PL-100: Microsoft Power Platform App Maker video training course for your certification exam.

Creating a canvas app from a template, and creating one from scratch

1. 34. Creating a canvas app using a template; understand how to start building app

Hello. In this section, what we're going to do is create a Canvas app and then recreate it manually so we can have a look at all the various components that go into the Canvas app. So what I'm going to do is, first of all, have a look at the data. So in the previous section, we created our environment. We created a database database.So I'm going to go into the data tables, click on the account table, and then scroll all the way to the right for data. So we can see that we've got something like ten rows of data, and we have column names including account name, main phone, city, primary contact, and email address. Now there are an awful lot more columns, but for now we don't need to worry about all of that. We just need to get a handle on the sort of data that we've got in the accounts. So we've got account names, phone numbers, cities, contacts, and emails. This being dummy data, all of this data is completely fictitious. So what I'm going to do is create a Canvas app based on it. So I'm going to start with data and go to the Microsoft database. So next I need to create a connection. So a connection allows me to go from PowerApps to wherever the data lies. In this case, the Microsoft database So I'm going to create this connection. If you've already created this connection, you'll say this is your second power, and then you won't need to go through this bit. So I'll just click "Create." You can see on the left side some of the other types of connections. I'm going to choose my accounts table and click Connect, and that is it. So all I've had to do is point the computer to where the data is and what the data is. And there it is. We have our own app, so I'm going to just press skip on the preview of this app. So let's just have a look at what we've got. We've got three screens. We've got a browse screen, a detail screen, and an edit screen. If you can't see it, it's possible that you have it closed; in that case, simply click on the left side under Tree View. If you want to see the words tree view, click on the hamburger symbol, which has three horizontal lines. So you can see, we've got all of these screens. This particular screen has various components. We have got, for instance, a rectangle, a search icon, a text icon, and we have got icons for add, salt, and up and down refresh. And we've also got a gallery. So a gallery gives you a list. So we had ten items in that particular table. So this gives me a list, and I can see six items on there. And notice we've got this breadcrumb trail at the bottom. So I'm currently in Browse Gallery, which is within the Browse screen, and then within that we've got separators separating one item from another, a next arrow and three labels, and the potential for an image. Now what I'm going to do is I'm just going to play this app, review it, so I'll click on "Play," and we can see that we can take any of these items, and I can click there or I can click over here, and I can then click on "Edit." So this gets me to the third screen, and then I can submit the item or cancel the item. And then from this Details screen, I can go back, I can scroll up and down, and I can search for items. So maybe I want to search for all items in Redmond, for instance. Now it doesn't search for everything. If I wanted to look up fordatum, it would return nothing. So this is a preview of our app, and I can click on the X to get rid of the preview. Now, this is also interesting if you want to navigate your way while not in play mode. So while we're actually booting it, you can hold down the Alt key to activate buttons and other controls. So we get to the Details screen if I hold down Alt and click this arrow. Click here to go back. So that is also a convenient way of going through the various screens. Now, just looking at the rest of the screen So on the left-hand side, we can insert controls. You can see they are grouped together. There's also an Insert menu here, which I generally use more, to be honest. I can connect to data sources or connect to media images, videos, or audio files. And there are some advanced tools, which we'll also be looking at later on in this course. So at the top, we've got the whole menu. So we can add new screens, for instance, or change a particular control (font, fold, color, that sort of thing). And we can do this on the right-hand side as well. So you can see we've got font, font size, font weight, and so forth. So this is a collapsible pain. So we can insert lots of controls as well. We can view things like collections and verbals. We'll be looking at those later on in this course as well. We can have a look at some actions, and there are some settings about this app. And then there's the File menu, which allows us to save, open up new apps, and so forth. So you can see this is a fairly basic Power app, a Canvas app, and we don't really need to go into much more detail than the basic one for this particular course, the PL 100 certification. So what I'm going to do, beginning with the next video, is to give us a better understanding of each of these specific items as far as we need to know them. We're going to recreate what we've done there, starting from a completely blank app. So what we're going to be doing is weare going to be creating each of these icons. We've done some tweaks along the way. We'll be looking at all of these controls. For instance, what does text do, what does Role do, and what does OnSelect do? And by doing this, hopefully you can get to the groups with what you need to create your own Power Apps. So in the next video, we'll start again.

2. Saving my Power App

Just a couple of points before we continue working on this application. First of all, there are other places where you can start an app. First of all, you can click on Apps and go to New App. Second, we'll take a look at the most recent section on how to start an app in a solution. So you can go to Solutions, click on a solution, and go to the New Canvas app factor, for example. So let's just go back to apps. Let's just create a second app, and that gets us to this screen where we can then choose a connector. So I'm going to choose the Microsoft database, and then it's very similar to what we've previously seen. So here's our app, our table. Then, and this is crucial, you must ensure that you save it. So at the moment it is unsaved, and you could lose work. If, for instance, at the end of the day you go off, you come back, and you find that the Power apps have timed out, it gives you an opportunity to save. And because you haven't saved it the very first time, you've got no opportunity. So to save it, go to File > Save As or Save As Type and give it a name. So I'm going to call this account App Two. And you see, you can't create an app that already exists. As a result, I've now saved my Accounts app. So I'm going to add the Accounts App too, and I'm going to save it to the cloud power apps. So, what happens now that it's been saved? Well, it will also be saved if we go to Settings or File Settings and scroll down. You can see that "Auto Save Changes every two minutes" is on. So while that's on, if you make any changes, Now that it's saved, it will auto save.Secondly, let's say I close the app, so I'll leave. There are other options for closing the file. For instance, if I go back to the apps, I will just refresh this picture. You don't even need to do that; it's done it for me. You can see in apps that I can get back to my app, and then I can click on the dot dot dot next to it, and I can go to Edit or Play. So Play runs the app. Edit takes me back to the screen so that I can continue editing. Alternatively, I can click the checkmark here, and then at the top I can go to Edit and Play as well. So at this stage, I'll suggest that you save your app, and then you can check that it's saved if you go back into the PowerApps portal, make PowerApps apps.com, and you should see it there. So why not now go to File > Save or Save Us?

3. 34, 35. Connect to data sources in canvas apps

In this video, we're going to start creating our Canvas app from scratch. So what I'm going to do is create a Canvas app from scratch. Now I need to give it a name. So I'm going to call it the Account app, and you need to give it a format. So is it Tablet or is it form. So that shows what size you are going for, as well as what orientation. So there's your phone, and there's your tablet. So the phone is portrait and the tablet is landscape. So I'm going to click Create on that. And we will have a blank app with no connectors whatsoever. So what we next have to do is create a connector. So I'm going to go to the data over here on the left-hand side, and here are all your connectors. I'm not going to click Add data because I don't have any, but I can add data from our current environment. I can go to connectors, so I could see all connectors and go down and look for DropBox, for instance, if I wanted to use that as a data source. So what I'm going to do is select accounts from the Microsoft database and give it a few seconds, and there is our data. And when we add controls, we will be able to add all of the fields from all of the columns that we want, and you can see that we can also refresh and remove by clicking on the dotted dot. So we now have an app called Accounts App. We now have all the data connected. So in the next video we are going to populate our first screen.

4. 36. Build canvas apps screens - Inserting a Gallery

In this video, we're going to start populating this screen by adding a gallery. First and foremost, let's double-check that we've got this right. If I go into settings, which you can also do by going to file settings, it gets you to exactly the same place and goes into display. Then you can change the orientation. We can't actually change the size because we said that we wanted this for a telephone. Now you can see how to scale the app to fit the available space. We can lock the aspect ratio and lock the orientation even when the device is rotated. Now, if instead we created a Canvas app from Blank and used the tablet form, then we would have a few more options. We would also be able to change the size because, obviously, not all tablets are made the same. 16 to nine is the default, but you could have a three to two for the service portal, a 316 to ten wide screen, or a four to three for some iPads. And you can also have custom where you canactually say what the width and the height is. So let's have a look at our phone's Canvas app. So what I want to do is add a gallery. So what is a gallery? A gallery is a list of the data from your data source. So all I need to do is go to Insert Gallery, and then I can select a particular type of gallery. So you can see we've got vertical ones, which is what our previous example was. Horizontal ones, ones with a flexible height, and then blank ones. So ones where you don't have all of these components, which are already in the gallery. So what I'm going to do isI'm going to create a blank vertical. Before I do that, if I go to Insert, you can see that we've also got a vertical gallery there. We haven't got all of the other options, though. So they all basically reflect what we got up to here. To get the other options, we'd have to go into Layout. You have to start digging to find out where all of these options are. So let's insert a blank vertical. And here is my gallery. Now, it's got no data whatsoever. I'm just going to resize it. We can resize it using these eight little circles. and I want to resize it so it's all the way down to the bottom and a fair bit up. If you accidentally go away from it, just click on it again. Now it says I haven't got a data source, which is correct. So I can either select my data source over here or, in this property section, I can go to data source. So either way, I'm going to select the account data source, and nothing much has happened because I said, "Okay, this is where the data comes from." I haven't said what data I want; now we can do this in several ways. First of all, if you've got a view set up, we can say, "I want you to use the view." We'll be looking at views a fair bit later, and we can say, "Okay, I want these particular fields." So let's click on Edit Fields. and you can see we've got no fields already here. So that's when we turn to the next area, which is layout. And this layout section gives me a lot more customization than I can do here. So I'm going to change this layout so that we have a title, a subtitle, and a body of just three items—three different columns. Now I can do exactly the same thing with images as well, and I can also use one in several columns if I see waste. So I'm going to use Title, Subtitle, and Body, and I click on that, and look, we've got our data source already connected. We have some ideas of what the computer thinks we might want to look at. Now I can change the layout at any time. Let's say, "Oh, I've actually got an image." Just click on the image, and now we can see we've got an image capability as well. Maybe these aren't the right fields. No problem. We'll go to Fields Edit, and here we've got four individual items that we can put in the body: the image, the subtitle, and the account name. So maybe we don't want the second one to be the main one; we want it to be something else, maybe an email address. Well, that's very easy to change. I'm just going to undo that by clicking on the undo button right at the top. So in this video, we've had a look at how to insert a gallery. In the next step, we're going to have a look at these individual labels and see what formatting we can do for them.

5. Formatting the label component

So what we're going to do next is just have a look at these individual components. Now you can see that this one is a label. So labels are there to just show text. So it could either be a literal string text; in other words, I might just type in "hello" and it would show "hello" all of these times. So it appears exactly the way that I write it. Or it could be a formula that evaluates to a string of text, and that's exactly what happened here. We have this item up here in the text formula, Account Name. Okay, so a few things to take a look at This item, well, that's a particular item, so that varies for each part of the gallery. So in this first part, it will be the first item in the first row. In the second one, it will be the second item, and so forth. Secondly, you'll notice that I can only click on these components in the very top item. Now I can't click on anything else because it just auto replicate.So any changes I made to the first, as you will see, are replicated every time through. So this item is one particular item, and then we have a dot. So this dot says okay; we have the object, this item, and this is what I want from it. In this case, I want a field. This field is called account name. Because Account Name contains a space, we must enclose it in single quotation marks. So if it was Account Name without any spaces, then I wouldn't need the single quotation marks, but I could add them; there's no harm in adding them. It's absolutely fine. Let's see what other formulas we've got. So, for example, we have a font. Font is therefore a formula that resolves to open some. I can change it here, so I could change it to say Arial. So you notice Arial being one word that doesn't need to be in quotation marks, the single speech marks, but also notice that when I change it, it changes over here as well. And in fact, this is probably a much more user-friendly way of changing it. Now you notice I changed it to something like Corianu. You can clearly see that it is replicated throughout. You can also change the font size and the font weight. So is it bold, semi-bold, or normal? Or is it lighter? If you want to see any of these in the formula bar, click here on the left rather than here on the right. If you do, then it switches to that particular formula or that particular property, so you can see it as a formula. Further down at the bottom, we have got color. So we have got something that looks very scary. We'll look at what this means in a moment, but thankfully, we don't have to use it if we don't want to. If we click on the color, we'll get a colour palette with about 60 to 70 different colors. So I can change this, for instance, to a reddish color. And notice each time I do this, this formula changes in response to what I'm doing. I can also change the background colour using similar methods. And I can use custom So if I want to actually see my color, I can use this as an alternate way. But let's just reset all of that and have a look at what we've got here. RGB red, green, blue), and then the amount of transparency we want on my computer. Each of these values is separated by commas. However, semicolons are used in locales where the comma is the decimal separator, which is common in non-English locales. So whichever is on your screen, those are the ones you should use. I will continue to use commas in my version. So what we're saying here is no red, no green, no blue, and the alpha value, which goes between zero where it's fully transparent and one where you can see it fully. So here we have it at one, so it's 100%. So I can change this. If I change it so that the red goes from zero, the lowest number, to 255, which is the highest number, then we get something that is red with no green or blue. If I add in green, then we change to yellow because red plus green makes yellow, and so on. Now you might be going, "Oh my goodness, do I really have to know all of these RGB colors?" The answer is no. What we could do instead is add color. Please note that this is the American spelling without the letter U and then a dot. And then look at this list of colours that we've got. So you might have scrolled down to get the full list, but we could say, I want colour red or colour yellow." And notice when I say red, we've got various different types of red. So we might want Indian red or we might want dark red, for instance. So the computer is going to translate this into the red, green, blue, and alpha transparency that we saw previously. So we've got that for the forecolor. We've also got it for the back colour as well. Now you may notice at the top that we've now got just the word red instead of the colour red. So why did I suggest actually typing in colour dots if it wasn't necessary? Well, the main reason is that you actually have choices. So if I put in a colour dot, you get all of these different choices. And you don't just need to type in red, though red would work just fine as well. So in addition to all of this, we've also got borders, so we can choose what sort of border you might want around a particular component. We've got wrap, so should it go onto a second line if it is too long for just one line, and then if I click on this one, we've also got things like auto height, so this will reduce it to the amount of height that is actually needed? So if it's too much height, it can reduce it. We've got text alignment, so left, center, right, or justify, and we've also got vertical alignment, so top, middle, and bottom, and then we've also got whether it is visible, so if I say off, then we won't be able to see it in the app. However, there are some uses for visible Maybe we've got a calculation that we don't want to show, or maybe we don't want something to show all the time and we can manipulate it using the formulas. Now, there are a lot more properties in the advanced section, but we don't need to go through these just yet. A lot of these are just saying "self dot," and it's referring back to its own control, so we don't need to have a look at the advanced ones just yet. One other thing that might be of interest: any of these properties that we are using are in bold by using something that is not the default; all labels are visible by default, so it got through. So it is not in the hospital alignment because I have clicked onto it and maybe changed it, maybe not. It is saying, "Okay, you might want to have a look at that," and so it is in bold. So this drop-down list just telling you what may have been changed from the defaults can be quite useful. So in this video, we've had a look at how we can format labels, and this formatting that we've looked at is largely consistent throughout all of these different components. Yes, there will be some different options based on what you want. For instance, if a component is a video, then we have properties such as "where is your video how do you want it to start playing?" Do you want it to start playing automatically with a click or something like that? So having gotten through these label properties, we will be in a much better position to have a look at these different components in a more brief way so we don't have to revisit font, font size, font weight, and how colours work all the time, for instance. So in the next video, what we're going to do is—we have our first screen, and you can see all of these components. Next we're going to rename these controls and add a second screen.

Pay a fraction of the cost to study with Exam-Labs PL-100: Microsoft Power Platform App Maker certification video training course. Passing the certification exams have never been easier. With the complete self-paced exam prep solution including PL-100: Microsoft Power Platform App Maker certification video training course, practice test questions and answers, exam practice test questions and study guide, you have nothing to worry about for your next certification exam.

Hide