STEP 9. How to Create Employees APP in . NET MAUI || MVVM || COLLECTION VIEWS || SQLITE| PART9

welcome to macro code if you are new to this channel consider subscribing so we are continuing with a video about uh dotnet my so we had created uh employees a list countries list so this is actually countries list let's change it under option so on the official you are calling these countries so this is the countries list then constituencies then locations sub-locations and Villages so for our countries we had created countries so we have an uh a battle to create countries so this is where we are creating countries so if you are new to this video we we have a series of how we actually reach here so you can consider watching our previous videos so these are list of our countries then constituencies we are able to create constituencies and try them to our country so if you see we can be able to select a country then give it the constituency name then we save it so you can see after saving you can be able to navigate back to this at least so you are now to proceed with having the locations then sub-locations and Village listing so let's uh add a new page and uh so this is how we have arranged our our project so let's proceed with adding uh locations a new page so we can have here uh our new sorry so we need to add a new item show all the templates so we want to add a page so this is a Content app page so you can say add new notification page so after you have done that so before we proceed let's remember we need to register this or now we can stop our app so you can add these on our my program.cs so this is how we have we are actually registering our pages so I'll do that then I can paste these here then after you have done that you can create now A View model so our view model you just use the same name as your page but now add The View model keyword so we have our view model now for countries so here we can now also register this and our views our view models this is it then we need to type to bind it here so we'll do public or view model let me say view model so we need to import this will just hover here then we import then you can also inject it here if a model then we need to buy we can say this dot find context is equals to view model then you can dial to models so that is it so for our list and the countries you can see we have we have our location list so we need to add a toolbar item so let's just copy what he had done under countries so we can do that then under locations can add it at the top here so we'll have a toolbar then we need to add a button so you can also borrow that from what we have done here so you can come under locations list that is the locations at least another Constructor then we can have our button here so this is add new location you can say add new location then this is the page that we need to navigate that is the add new location page so we have that here so this one we need to do that is a location base view model so you need to add that then you can save the partial so that is it so we need to have this inside here so you need to add this inside here so then this one we need to say using we need to import that using employee dot views so that is it so then I've used we need to add locations so that is it so then our button you can have our button now under binding then we add as command sorry say this is command so this is our new constituency no these are new location so under our add new location we need to now provide the data that we are going to add so I'll just copy this so under our page here we need to bind it to our so we'll say so under location if we come and see our models our models come to DB context so under location we need to have a constituency account at the location name so what we need to do we'll come to our location page then this is the constituency code constituency code then this placeholder you can copy that there then you can say location code so then we need to copy these again then we have it as application code then you can say this is location name so we need to define something on our add new constituency I mean add new location view model so here we need also to have our Constructor public we'll do that so here we need to Define our say public whatever public then location let me say location details so you'll see get set so then we'll say our location details here is equals to new so we'll finish it application so that is it then we'll come and pick these location details come to add new location then replace with design so you'll see here location this will be called then this should be named then uh something here our first section we need to have that as a picker so we need to select a list of constituencies so come to list here then we are going to cop let's just borrow what you're done under location under constituencies let me paste this here so this will be constituency constituency name constituency name so we need to borrow some things from so we need to Define our our observable collection that will hold our constituency so I'll copy this so come to uh add new location then press these here then this one will be location this will be constituencies so we'll be populating all the constituencies sequencies so this is constituency again so let me just over then these will be our constituencies at least so to get the list of constituencies so we'll come to here then we need to load it so I'll just copy that so that we go faster so come to here then you press this and it will say this is load constituencies load constituencies then we'll now append our data all constituencies constituencies then these will getting I will say get tableau constituency so let me copy these here then we'll now add our constituencies to our observable collection so that is it then we now load our constituencies here so we can do that then now for us to bind so we'll say constituencies list you need to bind it to our locations so our items also will be the constituencies so we need to Now define the selected item so we'll borrow from uh add new constituency so we'll copy this so come to locations so if you are new to this channel guys consider subscribing and watching our previous videos because we have done some of these things so we are just a borrowing so here now this will be sorry you can't remove this so this one will be constituency sorry constituency then you can say select selected constituency then this one you can add it here you can add it you can add it here then this one will be constituency then it says selected constituency so that is it so we need now to use this under our add new location then we bind it here then we want to uh display the item to be displayed is the name the selected item here so this is it so we need to now add our button so let's copy what we had done under constituencies so this is the button you can see guys so I'll copy this button then under add new location we are going to add it here so our app so this will be add new locations so then uh our our constant data that is our location so this will be location data will be this dot location details then we checked if the user has selected the constituency so this is the constituency sorry where have we pasted the other where is our constituents we are supposed to have this here sorry guys so you're supposed to have it under add new location this is where we are supposed to have it here so then we need to say selected so we check if the user selected any constituency so you can say select uh constituency then please select constituency then okay then our location data we need to assign our location that is the constituency ID so we'll say cons [Music] location data these are location let's see something is wrong this should be location guys sorry where have we defined our location okay so uh we can now say under location so let's see our model how it looks like so this is the constituency ID so under add new location you should say location dot this one it's not display so let's see our location details let's see something let's borrow something here so we'll say add new location so these are location application details series annotation details right I now see what is the issue so our model you can see it is a display location but it should actually be locations so this is the issue so come to our add new location page this should be locations uh this is actually a keyword there so if you use it you you cannot be able to so then you can say here you can have locate a location based View then these will be passion then come to our these should be locations locations so here we will now do dot we should be able to see constituency ID so then we need to assign the ID of the selected constituency then we now save our data so these should be now cons location sorry this will be location saved application details successfully saved then if not saved location not saved uh wrong with the location details so I think that should be fine so let's see our ad new location page then we can add now our button so this is a save uh location so this will be location name and this will be location called so that is it guys so let's launch our app that the title you can say add new location so you will launch our app we're expecting to save our location so let's have a breakpoint and our button here so these are our data looks like so this is the button so this is the uh how we Define the data to be selected then we actually use it to bind to our constituency then this is how you load the constituencies so let's see so if you are new to this channel consider subscribing and watching our videos so let's see our page how it looks like now so it's launching it's taking a bit sometime [Music] so our app is launching now so let's see how it looks like so if you come to locations so this is how it looks so we don't have we have not defined anything then we have our icon at the top new location so if we click this yeah we have something wrong unable to figure out the root of the ad location page that is very correct so come to our so we had added this to my program.cs page which is here so we need to add it also to app uh dot Aza I mean the app shell dot xaml.cs so you need to add these here so that is a new page so we do that register the root so we'll add it here so then you need to say using employee app dot views locations so that is it so we can now relaunch our app again there we are so come to locations add new there you are you can see we have now the constituency name location code and the location name so here you should be able to select the constituency so here you can see select country we need to rename something under the Picker we select we can give this as a constituencies that's the name constituencies then here you can say select constituency so that is it so if we do that again you can see it is now saved so it should be able to select the constituency then location you say go plus so if we save the location you can see this is our breakpoint so if we step if we step let's just rebuild and there's something we modified so under locations so we add new let me say as Adobe let me say k o chorus then if we save you see on our location if we just see we have our code KO then the name you see it is location name but for us we have done the binding for for the name so this actually should be location competition you should actually be keen on how you bind these fields because if you don't buy D12 then you will not be able to find the data so let's save it so come to locations and we add select the constituency then location say KO and say chorus and if we save step over you can see we have our K or another location name we have it so the constituency ID you can see is zero so we need to check if it does uh there is a selection so you can see they have selected a constituency in Nairobi so if the user doesn't select then we actually give them an alert yeah and we don't save the data so you can see we have now assigned our ID to the constituency that has been selected with the ID is two then we save our data so you can see location details successfully saved then it will take us to the list page the list page you don't have anything so we need now to pre-populate the location saved so let's copy what we had on our constituencies so we can copy this so then come to our constitute for locations then we can have this then we'll say uh our list under our list here that is location list we need to populate the list of locations so come to Let's borrow something we have done under constituencies so come to locations list then we paste this here so this one will be the list of uh locations so we need to Define our observable collection so we have to borrow this under locations then we can have this here then these will be locations then these will be location then these locations at least then you can clear everything there then we add all the locations that is it then these will be locations then this is locations so we now add our locations to our collections so what's wrong with it and applications so it says two yeah so these should be locations these at the top here should be locations this is also locations so that is it so we need to load this once our app launches so you can you can actually do this here then we have done something under constituency is listed we have defined the unappearing and on disappearing so we can actually copy this so that we don't refresh our page automatically when we add a new uh location then you're able to see the location so we need to add that here so I'll add these then we are going to bind it to our constituents our locations uh view model then here we can now say locations list can say load locations then we can clear locations then we actually reload them so these will be locations at least so that is it so let's try something then and now locations we need to save uh we need to display the list of our locations so come to locations list and copy them observe your collection so our I collection view will be uh getting data from our collections list you can actually have this as a month and we have it as a tool then here we can have this as location code then this should be location application name so if we launch our app we should be able now to see the locations that we added so if you come there you can see we have the locations and you can see we have our location uh course so if we add another one we select the constituency then we say m a say my daddy my daddy then if we save it so you can get away with our breakpoint you can see our location details has been saved successfully we click ok then you're able to see the list of our collection so we can so I want I want us to append something to our app you can see our collections our navigations view doesn't have icons we can actually add icons to our our list items so what we need to do let's go to our browser and uh Google Icons eight so just type in icons 8. then it will take you to this page so icons 8 you can see this the screen so you're going to get our icons from here so then you can look for a list icon so these are some of the icons that we have so I'm going to take one of the icon so this one so I'm going to download the icon there you are so you can also add another or you can save it let's see country if we have a Nike an icon for the country these are some of the icons so you can get an icon for the country download you see if we have an icon for location you can see you can download this one uh do you have an icon for employee or you can have employees so I'm going to take this one for the staff so I'll download that one so after I've downloaded the icons I'm going to uh go so these are the icons that have uh downloaded so I'm going to rename them so I'll say uh employees then I'll say this is a country then I'll say this is a icons list so I'll just have it as list then I'll say this is location so what I want to do I'm going to copy these icons to our app so if you just come to our app so under our app we have the resources folder then I'm going to have it under images or you can have it under app icon so let's have this and uh images so I'll just paste this here so you can see you have the country.png employees.pnglist.png then location.png so I'm going to now go to our app shell then under each of the our the item I'm going to specify the icon so then I will say these uh I'll just copy the same name as what you have here so I'll say employees employees to PNG then under countries list I'll say this will be let's just see if our employees list has an icon right now so let's relaunch our app we see employees.png let's see if that has an icon foreign need to have it here so let's just have it under a shell content so we need to have it under shell content sorry so I placed it under shell content and we can also have it under here so let's just have a both of them let's just add them employees the PNG on the list so let's see our app our app is now launching you can see so you can see we have the icon for our employees so you can add this for a countries so you just copy that we add it here then we we have a country is the name of our icon then we can also add it here you can't what our constituencies we can have the list icon so you'll say list that is the name of our then here we can say this is also analyst then we can also have it for the count locations as a list to create a location icon yes so we can use this one so we'll say location then we can have it here again that is the name of our then our Sub locations you can also have details at least on the app share we can have these also as a list Villages you can also have the list here then you can so you can have an icon that you want for your navigation so there we are so if we launch our app we should be able to see our icons on the uh layout items so our app is launching so under if you you can see if you just click on it you can see our employees list it doesn't icon countries constituencies locations and locations and The Villages so let's say we still have a an icon for villages so that we replace it you can just leave it as it is so let's have it as it is so that you can actually have your own uh icons based on how you want your app to look like so we have added the locations so we can actually do so you can actually do the same for the Sub locations and The Villages so uh subscribe to our video and let's see you in our next session bye

Channel: Macro Code

Views: 493

Keywords: C#, AmigosCode, .NET, .NETCORE, Sundeep, Saradhi, freecodeCamp, ProgrammingWithMosh, MikeDane, IamTimCorey, TeddySmith, FireShip, DaniKrossing, Stefan Mischook, ASP.NET CORE, Coder Foundry, Jose Montemagno, .NET 7, .NET 6, Visual Studio, Frameworks, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, ASP.NETCORE, SQL, SERVER, BoostMyTool, MAUI, .NETMAUI, CRUD MAUI, SQLITE, ProgrammingPragnesh, Gerald, NETMAUI, MVVM, Api, Apps

Id: MZ1W2JyXD-k

Length: 32min 14sec (1934 seconds)

Published: Sun May 07 2023