Variables & Collections | HOW to use Microsoft POWER APPS (2023)

in the last video I showed you how to connect  external data sources in your PowerApp and how   we can use galleries to show that data to our  users in today's video however we are going to   shift from external to internal data because  I am going to tell you everything you need to   know about variables and collections my name  is Jochen I am a Power Platform consultant at   sigeka and I suggest we take a deep dive  into our app's internal memory let's go hey guys welcome back to this beginner series on  Microsoft powerapps it is the third video in the   series already and if you want to start  from the beginning there is a link down   in the video description to the entire playlist  binge it if you want to because we are building   a office supplies ordering app from scratch  but if you are here for just that internal   memory stuff you are more than welcome as well  because we are going to start with variables think about your phone for example a lot of stuff  inside apps on your own phone are stored within   the phone's internal memory because otherwise we  would be constantly depending on external data   sources and their connection and we don't want  that and that's the exact same thing in powerapps   variables once again are stored inside the app's  memory and there are two types that we can use   let's start with local variables in my opinion two  things you need to know local variables are also   called context variables and that is because we  can only use them within the context of one screen   in our app so if I were to use a variable on this  very home screen that you see right now we can   only use it there and we can't use it in the New  Order screen or in the existing order screen and   the second thing you have to know is literally the  formula you have to use to give a value to your   local variable and that formula goes a little bit  like this update context open the brackets open   the curly brackets the name of your variable  this can be anything you want just give it a   name I like to start with VAR and then maybe local  because it's a local variable but this is a free   choice really the ones you've chosen the name of  course then you go colon saying okay the variable   called far local test in my case I want to give  the value that's what the colon is for test and   as far as I'm concerned that is all you need to  know about local variables the second type we can   use is called a global variable again two things  I want you guys to know number one you can use a   global variable throughout your entire app so you  are no longer limited to one screen and one screen   only nope a global variable you can use everywhere  and the second thing you guessed it the formula   you have to use instead of saying update context  it's somewhat simpler for a global variable   because it's simply the word set open the brackets  give it again a variable name whatever you want   comma instead of a colon and then your value that  you actually want to give to the that variable and   honestly that's it should this formula be executed  this would be a local variable which we can only   use on this screen and the second line right here  this would Define a global variable which we can   use throughout the entire app one little side  note that I will give you on the use of variables   a local variable is somewhat more performant than  a global variable and I'm not talking about major   differences here but I just want you to know that  if you know for sure you're only going to use a   variable inside the context of one screen in your  app always choose a local variable just make that   a best practice that's basically the best tip  that I can give you but if you're not really   sure or if you know that you're going to use the  same variable on other screens as well always go   for a global variable so I've removed this formula  for now because I don't really need it there I am   going to go to my new order screen and I'm going  to do a little preparation first because I want   a beautiful shopping cart image right in between  these two buttons really simple of course insert   and then look for image click place it wherever  you want it and I'm gonna go for something like   this and instead of that default image I'm gonna  choose my shopping basket which I uploaded earlier   by the way if this is the first time you do it  just go background image and choose upload and I   do want to have this quite transparent so there is  a transparency property here on the right a number   between 0 and 1 I'm gonna go for 0.85 perfect that  was just a little prep now it's time to apply the   knowledge about variables that I just shared with  you so I'm gonna go to my CLEAR shopping basket   button to the on Select Property which is false by  default which literally means do nothing I don't   want that I want to do something so I'm gonna  delete this and say update context local variable   time let's put in some curly brackets as well  and I'm gonna say VAR local item counter colon   zero so whenever this button is clicked there will  be a local variable called VAR local item counter   set to the value 0 and I'm gonna copy this formula  so Ctrl V go to my order button in this horizontal   Gallery also on the unselect which is now set  to select parent which is a default value for   any button inside the gallery again delete this  and paste my update context formula but I don't   want to set it to zero when I click this button  basically I want to do a plus one right because   if we click this button we are actually ordering  an item every time we click it so what I'm gonna   say instead of a 0 is VAR local item counter then  select it here plus one but let's go into preview   mode and see if this does anything right so let's  go one two three four five clear so it should   be set to zero again but as you notice we can't  really see it anywhere or can we there is a very   handy menu button hidden behind these three dots  called variables and you can immediately see that   it's ordered by screen because local variables  again important are only to be used within the   context of one screen you can see we have the  new order screen and there is a variable called   VAR local item counter with the value 0. if I go  back into preview mode and I click it three times   exit preview mode go back to this menu it now has  the value three so our two buttons are the logic   behind the buttons actually works but obviously I  also want our app's user to see that value because   then he or she knows how many items they have so  what I'm gonna do is add a label place it over my   shopping cart image Central alignment let's go for  bold and 15. and as the text value I'm gonna say   VAR local item counter and so a concatenation of  two pieces of text space items closed quotes and   if I now go back into preview mode and I click  the reset button if you will the clear shopping   basket you can see that it resets to zero if I  click any of these buttons every time I click it   one gets added to the value until I reset again  and now I'm gonna do a very similar thing but   this time for a global variable so same button  clear shopping basket and we're gonna add a line   of code so we need a semicolon never forget that  again Global variable this time so we're gonna go   with the set formula my variable will be called  VAR global total price comma and I'm gonna set   it to again zero of course because as I mentioned  this is kind of our reset button or clear shopping   basket button so these two things for now need to  happen I'm going to copy this line of code because   in my order button we're gonna do a similar thing  semicolon paste and again of course here I don't   want to set it to zero but I want to add the  price of My Chosen item if you will the element   where I'm clicking the button in that price is  the price that I want to add to whatever value   my VAR Global total price already has at that  point so both of these things will happen when   we click any of these order buttons and of course  we want to do the same thing we're going to add   a label so copy paste let's align them like this  and instead of saying this because we already have   that I am going to paste this formula and as you  can see something weird is happening because now   it just says USD but that is because we haven't  clicked any buttons yet so our variable is kind   of non-existent Slash blank at this point that's  why it's not showing anything but if I go into   preview mode and I click this button for example  and then I start ordering stuff you can see that   for example two dollars is actually added to my  total price until I reset it and let me quickly   show you the difference if I go back to variables  because we still have that new order screen tab   right here which has the local variable or that  screen alone while we now also have a tab called   Global variables and this has our VAR Global  total price with the value of zero and just to   show you the difference in usage if I go back to  my home screen and I just add a little label here   and instead of just saying text I'm gonna say VAR  and you can immediately see what's happening the   far local item counter doesn't even show up  in here because it's a different screen from   where we have used it already and that means  we simply can use it here we can only use our   Global variable called VAR Global total price and  I know this still kinda looks weird but that is   just because I did the formatting like this but  I have a solution because let's think about this   if our shopping basket is already empty a what  is the use of the user being able to click any   of these buttons because clear shopping basket  why because the shopping basket is empty confirm   order there is nothing to confirm and B when  the basket is empty do we really need to see   the image with the two labels on it I don't think  so so let's fix that and let's fix it properly   because I'm going to start with naming these  controls that I added and now I'm gonna group   them so I'm gonna select them while holding down  control right click or click the three dots group   rename my group and go to its visible property  which by default is set to True which is not what   I want I want to make this a dynamic value because  I only want this to be true if our shopping basket   contains at least one item so let's translate  that human logic into code and it's probably   way simpler than you thought because I can just  say for local item counter is bigger than zero   and you can immediately see that the whole group  disappears because the value of our variable is   zero at this point in time so this evaluates to  false making our whole group invisible but if I   go into preview mode and the moment I click one  of these buttons you can guess what happens right   magic and I can keep clicking it as much as I want  but if I click the clear shopping basket button it   immediately disappears because at that point the  formula is re-evaluated and evaluates to false   which immediately hides our entire group and we're  gonna apply apply the same logic to the display   mode property of our buttons because I still want  the buttons to be visible when the shopping basket   is empty but I don't want them to be clickable and  we can do that so select one of the buttons go to   display mode and instead of saying edit which is D  default value and it means always clickable we're   going to use an if statement this time because if  our local item counter is bigger than zero which   means at least one item is in fact in the shopping  basket than I want it to be edit if it's not zero   then I want the display mode to be disabled  close the brackets and the same thing happens   at this point in time or variable because I hit  the clear shopping basket button last is zero   so it evaluates to disabled the moment I click in  preview mode I click one of these buttons you can   see that it becomes clickable and we could set  the exact same formula on the other button but   we are lazy developers in the end so select the  other button display mode and simply link it to   the display mode of the button we already did so  button clear shopping basket and Os Dot display   mode final test preview mode order order order  all good clear shopping basket boom this becomes   invisible and are two buttons become disabled  for now that is everything I want you guys to   know about variables if you have any questions  whatsoever drop them down in the comment section   but I am gonna move on to that other internal  memory data structure in today's video collections now as we saw variables are just one piece of  data inside the app's memory right collections   are also inside that same memory but we can  compare them with a table or a list if you   will so for example a list of multiple records  ideal for our shopping basket spoiler and my main   goal for this app is to replace those external  data connections that we established last video   with collections so we no longer have to rely on  a direct connection to SharePoint in our case but   we can simply start using the internal memory  of the App instead so what I'm gonna do is take   a copy of that data that is now on SharePoint  put it in a collection and use that collection   as a base as the data source if you will for our  Galleries and a very good place to take such a   copy for example because you can do it in a lot of  places really but a good place to start is in the   unvisible property of your home screen because  if we do it here every time this screen loads   it's kind of a data refresh going on because a  new copy is taken from those SharePoint lists   and before I'm gonna put in the code I just want  to tell you about four major functions that you   can use when you are working with collections  first of all you have the clear function which   is pretty self-explanatory I think it clears out  your collection it wipes the list second and third   functions are really similar because the second  function is a collect which you can simply use   to put something in a collection and the third  function will be removed to take it back out   out and the fourth function that I really want  you to know is a clear collect which is simply   a combination of our first two functions the app  is simply going to clear the collection first and   then put in what we say that it has to collect  so unvisible property of the home screen and I   am going to say clear collect open the brackets  first it needs the name of the collection so you   can like a variable give it whatever name you  want to I'm gonna go with coal categories comma   and now it needs to know what it has to collect  in other words what we wanted to put inside of   the collection and that is going to be the entire  data source called categories close the brackets   and I'm gonna do the same thing so semicolon same  thing clear collect call items fill that with our   items data source so for both data sources this  formula is now exactly doing what I wanted it to   do copying the data from our external data sources  to our internal data source being our Collections   and just like variables you have a very handy menu  right here collections note that we didn't really   trigger it yet because we haven't navigated back  to the home screen so that on visible property   is not triggered at this point but still our app  already knows that there will be a cold categories   collection and a call items collection and you  can see all these fields right here these are   all the fields that are actually present in the  SharePoint list but if I go to another screen and   then back to the home screen now our on visible  is triggered and if I go back to my collections   view you can see that both collections are now  filled with actual data and one very important   thing to note it will always show only the five  first elements of any collection so don don't be   fooled by that it literally says it here it's a  preview of the first five items in any collection   so now we have filled our two collections but of  course our galleries on the new order screen being   this vertical gallery for the categories and the  horizontal gallery for the items have no idea that   these collections even exist because for example  our vertical Gallery still has the external data   source on SharePoint categories as its data source  how are we going to fix that really simple and you   probably guessed it instead of categories we're  gonna say call categories because the data is   identical since we literally made a copy the  gallery doesn't care it recognizes all the   fields and we're gonna do the same thing for the  horizontal gallery for the items and all we have   to do now is say goal items instead of items and  that's it again that call items collection has the   exact same data as our items external data source  so all our Fields all our formulas will simply   keep working so far we have only used collections  to make a copy of the external data sources right   so all the fields are just copied one by one and  it's the exact same data structure as the external   data source but now we are going to build our  own custom collection being our shopping basket because yes you don't have to take a literal  copy of whatever you can hand pick the fields   you can rename the fields if you want to and we  are going to do just that so let's go back to our   buttons again let's start with the clear shopping  basket button in the on Select Property where I   already put two lines of code we are going to add  a third line and this is going to be clear collect   coal shopping basket comma empty list and that's  it so literally clear out a collection called cold   shopping basket I don't even care what's in it  at that point in time just clear it out and that   other button of course we have to expand that  formula as well third line of code so semicolon   and I'm gonna paste this funky looking formula  and it probably looks more difficult than it is   bear with me all we are doing as the third  line of code here is collecting this thing   between the curly brackets which I'll get back  to in a minute and put that in the collection   called call shopping basket and the thing that we  are actually putting in there consists of three   Fields Item ID with this value this item dot item  id a field called item name this item.title and a   field gold price this item dot item price these  three things are literally the field names that   I want to give but just know that you can name  the fields to whatever you want if you do it   like this and if I close this and I now go back  into preview mode I order a couple of pens let   me clear it out order again boom and if I now  go to my collections again you can see that I   still have the code categories and call items  but I also have a third collection now called   call shopping basket and instead of having all  those fields like we have in items because it's   basically these records that I also put in  the call shopping basket collection but now   I said which fields that I wanted to have and I  named them myself so we have item id item name   and price with the values that I actually clicked  the order button of so four things I want you to   remember from this episode local variables Global  variables custom collections like the shopping   basket and collections where you simply copy an  external data source put it in a collection in   the internal memory of the app itself so now that  we have all the data structures in place in our   app both external and internal it is time to get a  little fancy and that is exactly what I'm going to   show you in the next video because then we'll talk  about overlays pop-ups and all that jazz to make   your app prettier and as always guys drop your  questions in the comment section don't forget to   like the videos and subscribe to the channel and  I will see you in the next one take care [Music] thank you

Channel: Cegeka Business Solutions (Microsoft Inner Circle)

Views: 13,988

Keywords: how to use microsoft power apps, how to use microsoft powerapps, how to use powerapps, how to use power apps, beginner, training, course, basics, powerapps, power apps ideas, powerapps tutorial, power apps demo, microsoft powerapps, learn powerapps, power platform, power apps sharepoint lists, sharepoint lists, create an app, power apps, microsoft power apps, sharepoint, build app, develop app, low code, ms power apps, power app, database, tutorial, variables, collections, local, global

Id: C6X2AArZnTI

Length: 20min 51sec (1251 seconds)

Published: Tue Jan 31 2023