1. Creating a basic calculator
Hello. And in this section, what we’re going to do is create a very basic running total calculator. So there’s really nothing difficult here except how we’re going to keep track of the running total. So what I’m going to do is create another screen. So we’ve got to insert a new screen, and it’s my new screen. I’m going to rename this as the running total, and I’m going to have a button going from the menu to the running total screen. Just call this calculator, and we will change OnSelect to navigate. And where do we navigate to?
Running total. And you can also add a transition afterwards as well. So here we are with a very new screen. So really, all we need is a place for you to be able to type in what you want to add. a button that says okay, please add it, and then you’re running total. So, let’s get a place where you can enter text input, and here’s my text input. So I may also have a label on top of it saying, “Please enter a number.” So the default format should be blank; I prefer a number. You can have some hint text. If you haven’t entered anything, this will be displayed in your text input. So please enter a number maybe to add to the total so that could replace the text label if done really well and if it’s intuitive to the end user. Now we’ll add a button that says “add to running total,” and then we’ll need a running total, so that will be a label. So we’ll call that label a running total. So all we need to do now is find a way to have a running total. So what can we do? We’ve already covered this.
We can have a variable for this specific screen. What sort of variable is that? It’s not a global variable; it’s a context variable. So when I click on this in the unselect, what’s meant to happen? We’re going to add to the running total. The term “electronic commerce” refers to the sale of electronic goods. Let’s call the variable that we need to use a function. What function are we going to use? Don’t say set. That would be for a global variable. This is a context variable. It would update the context. What do we need next? Open the curly brackets, then get the verbal’s name, then call on, and what do we do with it? What’s the new value? It’s going to be the current total plus what’s in here. So I’ll just call that one for now. And this is text input number two.
So I’m going to change this to a new number, something like that. And so this becomes the running total count plus the new number, right? So that updates our variable. Now what we need this to say is the variable. So we need it to say “running total calculation,” and we might also want to prefix it. So the current total is a colon, and then we’ve got zero. So, what makes you think we got 0? I’ve used a plus. A plus sign means it’s arithmetic. If I want it to join them as strings, I use an ampersand. Now, I could also use a function called concatenate, which would concatenate this comma with this converted to a string. It won’t work with a number, but this works quite well for now. So let’s have a play with it. So I’m adding the number five to the total. The current total is five because the variable has increased, and this is a formal link to the variable. It just works. So now let’s go out and in. So I start from the menu, click on calculator, and we have the same figures.
So I need a back button as well. So let’s have a back button. There we are left.And for that very easy, it’s just a back. So the question is, when I go to the calculator, do you want to see a current running total or do you want to have a blank running total? If we want a blank running total, we can type navigate, open bracket running total, comma, any screen transition comma here. And then what happens? In squiggly brackets, I can say the running total calculation is reset to zero when I go into that button. So now you can see that it gets reset. Now suppose I don’t want this number to be there each time as well. Well, we can go to the screen, or we can go to the unvisible property. So this is what happens when the user navigates to a screen. So I’m going to say that I no longer want what’s here in this new number. So I’m going to go back to “running total” and “unvisible” and say “reset a new number.” So when that happens, the new number goes back to the default, which is no value or blank. So let’s test this. Now, go to the calculator and enter 1020, then return, return to the calculator, and there we have it. So in this video, what we’ve done is create a simple calculator. So we have a context variable that keeps being updated. We reset the running total through use of the Navigate function, and we also reset this text input through use of the Enable property of the screen. In the next video, we’re going to change this from being a screen to a component.
2. 40. Converting the calculator to a component
Now there may come a point when you realise what I’ve just designed is brilliant. I want this particular combination to be included in lots of my different apps. And this is great for cord reuse. You don’t have to invent the same thing over and over again. And what we do then is create a component. As with these controls, we can insert a component into a different power app or even multiple places within the same power app. So I’m going to highlight everything and press CTRL on X to copy it to the clipboard. So there is a problem up here because I’ve got a new reset number. So I’ll just delete that and replace it with the word false. So now I am going to create a new component. So this is a standalone thing, just like, for instance, a text input. A button will be standalone. So I’ll create a new component. Here you can see the new component, and I’m going to now paste what I’ve previously got. So there are our controls, but you may notice a few Xs.
And over here in the app checker, we have three formulas that look a bit wrong. Okay? So invocation of an unknown or unsupported function This component is unaware of the function update context. So while context variables are very important when you’re talking about a screen here, we’re talking about a component. We can’t use context variables in components. So we have to update this. So we say set the running total calculation to be the total running calculation plus the new number. But hang on, I thought you said that set was bad. If we are trying to use something in multiple places, well, imagine components as being in a black box. The text input, for example, is similar to the label. We can’t get into the internal workings of those. We have no idea what variables they are using internally. Similarly, when we use Set, it is global. However, instead of being global to an app, it is global to one instance of a component. So we can now have a look and see what else we’ve got. Any other issues? No, we seem to have solved all of the issues by just correcting the one formula. So that’s why it’s really important to take a look at the app checker. If I just paste all of that again so we get the error again, then look at what we’ve got. We’ve got one formula that has 61 accessibility problems and seven performance problems.
So let’s delete all of those things, and you’ll see that the formula problems go away. But we still have all of these accessibility and performance problems. It is critical to look into this at some point. Right? So back to this component. So we’ve got this component, and hopefully everything is working. So, if I go into text, we have the current total calculated as a running total. So what we need to do now is use this component, which I’m going to rename “calculator.” We’re going to add this to our now-blank screen. Insert custom makes this very simple. So here we have our calculator. So not, as I can’t click on any of these individual controls. As I said, it’s a black box. Now we’ve got it as a component. We don’t know anything about it. So we’ll see how to open it up in the next video. So let’s have a look at the calculator so we can just use it. So add a number ten and an overnumber 20. OK, let’s go back; let’s go back here. So all of the previous things we put in, such as the navigate here or having a context variable here, no longer work because there is no context variable on the screen. So what we’d have to do is go into the component. So this is my component, and you can see that there are very few properties, but there is an on reset. So on reset, then I want the current total. As a result, I consider my running total to be zero.
And I also want this new number to be reset. And then I can go back to this screen and say “invisible once it’s called.” This is called calculator underscore one. I want to reset the calculator underscore one.So now let’s have a look and see what happens. So that creates an event, which the component then uses to say, “Oh, I need to do something.” So let’s just play. And here we go. So I do 30 and 40. Return, return, return. It resets. So in this video, we’ve had a look at how to create a component. We’ve seen that you can’t use context variables within a component, but that’s okay because we will be using set global variables, but they’re only going to be global to that particular component. And we’ve also taken a look at the unrest. So this is an event that can be triggered from outside, and we can do things to variables and also to our controls within the component. We’ve also seen that we can insert a component into our screen, and then it becomes a black box. So I can’t actually click on any of these items or change the logic. All I can do is raise funds for events. In the next video, we’ll look at how we can pass information into our black box, into our component, and back out again.
3. 40. Communicating with the component
In this video, we’re going to look at how we can feed information into and out of a component. After all, a component, if it’s a black box, isn’t very useful. if you can’t get the information out. We can get information out if we have a text box or text input. We can get the information the user has put in. So what I’m going to do is just resize this a little. It’s a bit on the big side. So let’s move this all the way up to the top. Now we could add a title like “calculator” and so forth. But what I’m going to do now is resize it. So I’m just going to make it fractionally smaller and fractionally less tall. And I’m then going to reach the height of 430. And for the fill, I’m going to have a fill. So I’m going to have, for instance, a nice yellow colour as the background.
This means we can distinguish it more easily on the page. This is now the component. So I’m going to have text input. So this is going to be our initial value. So I’m going to say initial value since, at the moment, the initial value is zero. And I’m going to say it’s going to be formatted as a number, and the default is going to be zero. So I need a way of feeding my initial value into this component. And we do this by creating a custom property. So here is my custom property pane, and I can say that this is my property’s initial value. So is it an input property where you receive the values or an output property where the component can emit the value? Well, it’s going to be an input; it’s going to be a number type. And when the value changes, I want the onreset to work. So the onreset of the component, if you remember, is to set the running total calculation to zero. Well, we can now change that to set it to the initial property. Except for the squiggly, red, underlining, and major errors here and there, I can’t do it. So why not? Well, the way that I’ve used property initialvalue is actually like a global variable. But a property’s initial value isn’t a variable. So what is it? It’s a property. What is it a property of? It’s a property of the component. The component name is calculator. So I need to have the name of the component at the beginning.
As a result, the calculator’s property has a value of 0. So if your component was called something completely different, like “Calc,” then it would be the “Calc” property’s initial value. So now we’ve got that. Let’s go back to our screen. And when I click on this component, you can see that there is a custom property, the property initial value. So what is the property’s initial value? Well, it’s going to be this, the initial value text input. So I’ll click in here, and you’ll notice this doesn’t go up to the top. I’ve got to actually assign it right here. So it is going to be equal to the initial value. But I can’t type any letters. It’s waiting for me to enter a number, so that’s not the right place to enter it. Instead, I have to click here. I could also go into the advanced section and click there as well to get it up in this top section. Or I could select the property’s initial value up here. I just can’t insert it here. And so what that is equal to is the initial value, which is a control and a dot, and then we will have the text there. So if I now change this so that the initial value if I play is 10, then you can see the initial value instantly being reflected there. Why is that? Well, when I set up this component with the custom property, I need to click on the number to change it. I said to raise the value on reset when the value changes. So when the value changes, it runs onreset, which resets the property’s initial value as well as this particular text input.
So when I change this value, this value changes, and when that value changes, the on reset happens. So, if I play with it now, I’ll enter a starting value of ten, and then enter 20 clicks to add to the total of 30, which now equals 60. If I change the initial value, it resets again. Now what if I wanted the current total to be here as an output outside of the component? Well, I can do that as well. So this then becomes another custom property, but instead of being an input custom type, it’s an output custom type. So this is going to be the end result. So I can put the result of the calculation in the description. It is going to be a number that is raised on reset when the value changes, which doesn’t make sense when it’s output. Just because something happens internally doesn’t mean you want a reset to happen. So let’s click “create.” So ends the reset. What is the value of the end reset? It is going to be the running total, which is this running total calculation. So, in the end, this property will be used to calculate the running total. So let’s go back to our screen, and we can see that here is our input custom property, which I can set, but I haven’t got the output custom property listed there. So what I’m going to do is add a text label for this right at the bottom, and this value is going to be based on this component or the instance of the component.
So this is the calculator’s underscored one-dot end result. So now I can say the end result is an ampersand because I want it to be a string. And there we go. So now let’s test this so we can have an input value, make changes, and get the end result outside of the component. So in this video, we’ve had a look at how we can add custom properties to a component. So we can have an input and an output custom property, and just look at the range of types we can input. So we can input a text number as a boolean. So that’s true or false, yes or no, date and time on a screen. The wording is a little different, but it’s the same idea. So, for instance, this bit as a component has to be something that can be just internal. So we probably have the background, but maybe we also have the text name and the left button. And when I click the left button because I have the screen as an input custom property, you can say, “Okay, go to that particular screen, navigate open brackets, et cetera.” So what I was going to have is the data type. I can have a record, a table, an image of a video, an audio file with color, or a currency.
And when I’m doing an input property, I can raise Reset when the value changes. So that on reset for the entire component, this is quite useful. So you can have as many input properties exposed as you want, and you saw how they’re exposed when you insert the component. So they are shown here, and you can also have as many output properties as you want. And you can see we’ve got the name of the components we have inserted, the dot, and the output. And similarly, if I’m using an input property, I can refer to it with the name of the component, then a dot, and then the name of the property. So that is how we can get data into and out of a black box. Now, just one more thing you might want is confirmation that what we have in this component is indeed a black box. The term “electronic commerce” refers to the sale of electronic goods. Well, let’s insert a new component. So I do that by going to customs and using the calculator. So there is a second instance. So let’s get this started. So I’m going to start off with a number zero, I’m going to add ten, I’m going to add another 20, and you can see the second instance. The current total remains at 100. That is the default value for my input. And if I change this variable, you’ll notice that its scope is limited to just that one instance of that component used. So this is how we can use components with input and output properties.
4. 40. Exporting and Importing components
So let’s say that you’ve created this brilliant component and want to use it in other apps. So let’s go back to Make Powerapps.com and I’ll make a Canvas app from scratch. So this is where I’m going to import my component. So click Create, wait a few seconds, and then I can go into the components and see if it’s there. So no, it isn’t. If I click on “Add new component,” it will create one from scratch, which is not what I want. So what I need to do is go back to my Accounts and Expenses app and go to the component, and I want to export it. But you can see there isn’t an export feature here, but there is next to a new component. So I can export components. So you can see my file is now ready, so I can download it. So there is my component. And then, when I go into my other component pane, I can then import the components. So, going to my downloads, I will upload the file. There it is. So click on it, click open, wait a few seconds, and there is our component, which I can then use in a new screen or an existing screen in one of my other apps.
So there it is. Now that import and export are functional, It’s not the most efficient thing I can do. Take note of the other options I have. I can duplicate the component if I want to make some minor changes to it. I can delete it, rename it, and copy and paste. There is a way to create a library. And if I go into apps and component libraries, I haven’t got any component libraries, so I will create one. So I can do it at the top left or with this big button here. And what is my name? Well, this is going to be my component library. And as you can see, there are a few characters you can’t use. So, click Create, gather your materials, and wait a few seconds. And here I am in what looks like a new app, except it isn’t. It’s a component library. You can see its name of it. So I’m going to delete what’s there. Actually, I can’t because it’s the only component. So I want to import my component. Wait a few seconds. And now I can delete my previous one, the blank one, and there it is. So I can now save my component library. Click “Save” at the bottom right and wait a few seconds. There’ll be a lot of that, and I can share it with other people if I want. So we’re looking at sharing apps later on, sharing the component library, exactly the same thing.
So let’s close that. Let’s create a new app. So if I just refresh this, we’ll see that we actually do have a component library. So let’s create a new app. I’m going to start all over again. So this is my import component. I’ll wait a few seconds, and then I go into components. I’ll add a new component. I will import a component, but it’s not there. So where is it? Well, it’s in a different place, and it is in the Insert section. So we have got popular things. We’ve got Insert, Import, Display, Layout, and at the bottom, more components. So if I click on that, you can see that I’ve now got access to my component library. So I’m going to import my calculator component. So now it’s there as a library component. So you can see it’s still not there in the tree view. I haven’t inserted it yet. It’s just available to me. Just like text labels, they are available to me, but I haven’t actually used them. So let’s insert a library component. You can see it’s not there. You have to go into the insert section on the left hand side. So there it is. And now I can use it just like any other thing, like a gallery or input button or that sort of thing. It’s still not there in the component tree views. It’s just there as a standalone. So it’s completely separate from how everything else looks. So there is my calculator, like a control. So what is the advantage of using a library?
Well, it allows you to have everything in one place. You can see there aren’t any more components for me to import. But what happens if I change the component? So here’s my original component. Let’s go into the component library that I’ve got and let’s edit this. So I’m not editing it as an app. I’m editing it as a component itself. As a result, it is a stand-alone component. And I’m just going to change the background color. So let’s go into the background and change it from yellow to green. Maybe a different sort of green that’s very dark. So there we go. So what I’m going to do now is save this. So it changed from yellow to green. Click. Save it’s. Saving. and then I can publish it. Publishing will make this version available to everyone who has permission to use it. So I’m going to publish this version. There we go. So now if I go back into my app, nothing seems to have changed. So let’s just save this, close it, and then go back into it again. So there it is. So I’m editing it, and now, as you can see at the top, I get notification.
A component library update is available. Whoa. So somebody else could be me. It could be that somebody else has updated this component library. Let’s click on Review, and you can see that it changed from yellow to green. That’s my description. Do I want to update? Yes, I do. Click Update, and it gets updated. So that’s the great thing about component libraries. Instead of having to import and export data, you get pushed information and notifications. It just operates a bit more seamlessly. So this is how we can add components from other apps into your new app. So you can do it by going to the component that you’ve created in your app, going to the new component, and then going import and export. And what we can also do is create a component library, create standalone components there, or import them there. And then you can use the component library by going to insert and getting more components. And then you’ll be notified of any changes that have been made to that component. and you can update if you wish.
5. Practice Activity Number 7 – The Solution
So how did you get on with this practise activity? So I asked you to create a new component. So go to the new component here in an existing app. So I can create a component library and start it from there if I want to. But I’m creating it in this app. So it just requires a date picker. So that’s an input device. So there’s my date picker, and I need to name it. So. Input. Date. So I got to create a variable called “Date Seven,” which adds seven days to the date, and another called “Date 28,” which adds 28 days to that date. Now where do we create it? Well, it’s whenever this gets changed. So if I scroll down, I’ll put that into the on change property.
So I want to set my date to seven to be added to the input date of seven days. But you notice the squiggly lines on the lines that tell me that input Date, which is a control, is expecting a date time instead. So let’s put a dot after it, and we can see the selected date is the first item. So quite often, you’ll be typing and making mistakes because you don’t know that there’s a mismatch. So have a look at what you’ve put in, and then have a look at what it should be. So I’ve put in a control; it should be a date and time, and then you can work it out. Well, what is it I need to do? So I also have a date of birth of February 28, And, once again, that is the date added to the selected date separated by commas and 28 comma dates.
So that means that whenever this changes or the value of this changes, these two variables will be updated. So next, I’ve got to create output properties. So I go over here to new custom properties and do that. As a result, we’ll call this date plus seven. So it’s an output property type, and what is its data type? Well, there’s going to be a date and time. As you can see, there is no specific option to simply go on a date. So it’s going to be a date and time. So let’s create, and there it is. Now, what is the value of date plus seven? If I click on it, you can see what the default value is right now. But I don’t want it to be right now. I want it to be called “Seven Dates.” The term “electronic commerce” refers to the sale of electronic goods. Equally, I want to create another custom property called Date plus 28. So that is going to be 28 days later. So all I do is create that output property, and its value is going to be that date 28. So now let’s test this. So go and create a new screen. So I need to insert this component. Now this component is currently called “component one.” Perhaps not the best name for it.
So I’m going to call it Date Picker Plus. As a result, in my new screen I’m going to customs, where I’ll insert a date picker plus. So there it is. So I now need a couple of labels that give me this Date Picker Plus component, which I need the outputs for. So I’ll give this date picker plus component a name so I know what I’m talking about. And then in this text, its value is going to be “Date Picker Plus Component,” or “Date Plus Seven.” Then I want number one, which will give me date plus 28. So you might just need some labels, as well as some descriptive labels. I also need to be able to get to it. So I’m going to add a button from here. So I will go to the input button, and let’s put it in the middle. I’m going to call this the date picker. So let’s test the component. So I would need to actually have some navigation there. Don’t I navigate to this new screen? One should rename that. So I’ll call that the date picker screen. So let’s go back to the main menu. Notice I can also get to the components this way as well. Play. Go to date. Picker. Choose a date. Keep in mind that it will only display the variable roles of that date seven. And that date 28 will only happen if there is a change. So I’m going to change it to another date.
And here we can see that seven days later is the 23rd of July, and 28 days later is the 13th of August. If I want to have these variables shown right at the beginning, then what I need to do is not only have this shown in the on change section but maybe also add this in a few other places. For example, in the OnSelect or in the app. So maybe the app on Reset would also need to have that as well. Now, this method of creating components inside an existing app is no longer recommended by Microsoft. It will eventually disable the ability to export and import into existing apps. Instead, it says you should be using a component library. So you can create a new component library, and you can create the components there. And then in your existing app, you can go to the plus sign and get more components there. So in this video, we’ve had a look at creating a component, a black box from which you can have input and output parameters. In the next section, we’re going to be looking at adding additional controls. So we’ll have a look at the media assets. We’ll have a look at all the controls and formulas that you need for this particular course, the PL 100 exam. And then we’ll have a look at version control. Please join me there.
