STEP 30.How to Create .NET MAUI APP With RESTful API in .NET Part 27||USING DATA GRID .NET MAUI||SQL

foreign [Music] if you're new to this channel consider subscribing so today we are going to proceed with a.net Murray Series so in our previous video we did a video about pushing data from our.net app via our API to our database so we are using Ms SQL so you can see we have the data on our villages we have the data so this is our database if for those who are new so we have the constituencies the country's employees location mobile app users applications and abilities so as you can see on our app we have the home page which doesn't have anything so today we are going to do some of uh design on our own page so that you're able to see some of the data that we key in so we have the employees list we have the countries list currency you have the data grid so on our previous video we did a video about how to improve the data grid so if you are new to this channel consider watching the data grid dot that is the Maui dot data grid options that we did then we have the locations the Sub locations The Villages and even the sync data so the sync data option we were actually pushing data from our escalate uh database from our app through our API to our MS SQL so we have some data on countries you can see in which come to sync digital you can be able to upload data with a click of a button through our API you can see and when you upload the data is actually deleted the same way on the constituencies you can actually upload some data so if you click upload constituency you're able to upload so then on the on the constituencies then we have the locations which you can also upload via our app so if you do that so all the data is actually uploaded to our server you can see it is actually being updated all this data that you see here is coming from our app so you see these are the data that we just pushed so three locations pushed if you come to Sub locations we have some locations there we actually need to sync it so if you upload then the data will be pushed to our Sava so same way for the villages and the rest so we have the employees list so on the employee list we are actually we did a video on how to create this form where you say you need to select the country the constituency the locations and the rest so for us to proceed we need to key in some data on the constituency and the countries so we'll say Canada so if you are new to this channel consider subscribing and comment Down Below in case you need a certain kind of video that we should actually do then on the constituencies when you click new you select the constituency then we say Kwanzaa this is a Kwanzaa then when you save it then you're able to see it down here you can actually add another one Nairobi save it then you're able to see it here so we can add another for sub location select the constituency KW let me say [Music] then when you save it you're able to see it there you can add a sub location select the constituent that that is the location name then here we'll say KO say this is a chorus so if we save that come to our village we're able to select the then we say tu say to miss when we say that is our village so when you come to employees we can see one thing is our data grid is it is actually using collection view so we can actually change that come to our app then on our employees form so this is our employees list we have it here so it is actually using collection view as you can see uh so we need to change this to a data grid so let's copy one of the form that we had done on our data grid then we replace it uh so come to employees list so we'll add it here then our collection item Source will be employees so we need to replace this here then the names so this is the first name our middle name so here you have this as the first name then this will be middle name then we have uh last date of that that is the last name so we need to copy this grid I will have another column then that will be last name so you'll have it here then another column will be date of birth so we need to copy this then we have it here then it will be that of path so we need to have this here so then there we can say this first name you can also have this as middle name then you can add this as last name then you can have this as a DOB so you can have that as a d or B then we need to do away now with our our collection View so you can do away with this so we need to import something need to we need to remove this so we need to import the name the data grid namespace come to our one of our list so like The Villages then we need to import this so come to our employees list then you can actually append this here then we'll have these uh all thing so you can see our form is now fine then inside this search employee so if we do that and we launch our app our data grid should be fine so let's launch our app so for those who are new to this channel consider subscribing and uh commenting down below so that you can be able to get notified whenever we post any new video so let's see how our app looks like as we launch it so let's wait and see so there we go so there we are so if we come to our employees list you should be able to see that our data grid is now showing first name middle name last name and date of birth so let's try and add a new employee so let's say this is the country Canada constituency we select Kwanzaa location that is the sub location The Village then we'll say Jacob so we say this is a Jacob then you say amren then you say this is money then you say this is the email at gmail.com then we say the date of birth we select the date of birth here we can actually choose that and uh you just have this as 1930 let me see let me capture a photo so we will capture a photo of our employee so I'll just take a random photo here then there we are we have the photo and the data so if we save this we'll be able to say that employee details successfully added and you're able to see the the records so you can actually capture another photo foreign macro called me then we'll say this is a test at test one at gmail Gmail gmail.com then he will actually say this is a can do that then we save it then we need to capture a photo there we are do that then you can see our photo is there then we can actually save it so you can see it it doesn't refresh or what has happened is it has actually replaced our record you can see it has actually replaced our record so we need to check the add button what it does so let's come and check on the add button so that is the add a button here so what does this add button do come to our employees form uh view model then if we do that these are add button so whenever a record is uh so we'll do new then this will be create a sync so we create a sync then we save that data then uh let's see let's see if uh is this so let's uh remove these I want us to be using either we update or delete so we can do that so we can create so if it's an edit we're gonna if it's a creature we can create if it's not an accurate then you can update so if we do that we say employee added employee detail success submitted let me say these employee uh updated so that is fine so let's come to our list of employees we see what is happening so on our list of employees we need to be we need to load employees data whenever we have added so this will do employees if it is then it's clear then we update so these load employees should also come at the top here which is fine so that is uh fine so let's try to launch our app again and see so whenever we add an employee you should have at the list of all the employees that you have just added let's see our app [Music] so come to employees list let's add a new employee you see uh Ruby chorus knees say James mwangi karanja or Pio then we see here that is the date of birth you capture the employee photo that is it we save it then we save the data so you can see now our records are being added so if we click that you do that Nairobi that is it this is test two gmail.com then we have that then you capture a photo then we save it then we save the data so you can see our employee records is actually being updated so what happens if you need to update the to edit the employee so these are these accounts that you have added based on the data that we submitted so I want us so this is one of the things that you wanted to do so the next thing that I wanted us to do today is actually update our dashboard you can see our dashboard how it looks like and it is actually empty so we need to update this dashboard so that we have a very good landing page for our app and also we also have a good design for what we are going uh to do so today the main focus will be to update the the dashboard so that you have a very good landing page and even uh showcase our app uh front that is an event showcase our app on the dashboard so I want us to change something so on the on the screen yeah let's design our dashboard so I want us to say you can have this as content pay dot content then you can close this then inside so we can stop our app then we see how it will all go so once we have this you can say uh here you can have a vertical layout then you can have a we can close this so inside the vertical layout I want us to have a spacing you can say spacing you can have it as five you can also have a you can also have the margin say imagine is five then we can also have the padding you can have this as a five zero then you can also have that is the vertical options you can say it's a center and expand so this ID I want us to have a border say border then on the border you can say the padding should be can have this as 30 then a stroke you can have these as a black can have this as a let's say gray then uh stroke thickness thickness sorry scrub thickness shouldn't be struck sorry for that thickness you can have these as a 0.3 then we can have a stock ship it's a stroke ship it's a stroke ship can have these as a round round rectangle then we can say 10 foot I want rectangle then you can have the background color so here I'll just do background color I'll say white so that is it and I can close this then inside the board I want us to have a border Shadow so I'll say border shadow then inside the shadow will have the shadow now so I'll do that then I want us to have the so here I'll just do this and the same brush I will say this is white sorry white then uh struck not stroke I'll say offset offset I will say 15 15. then radius I'll say this is a can have this as 20. five then we can have a opacity you can say 0.9 then you can close this so once we close that then we need to remove now this Shadow because we have closed that we are left with the Border shadow so I want us to now have an image here inside the just outside the border.shadow so we can have an image then we say height we Define the height of that image you see 150. then we'll have the source so what is the source so you can copy one of our images and the resources then uh images so you can have the net uh image button so I'll just copy the name have it here sorry in fact I'll just copy it then you can Define the height so I'll remove this then I'll see here height request I'll have it as 150. so let's try and launch our app and see how it looks like so this is the landing uh that is the dashboard so you're actually designing the dashboard of our app so we just noticed some of you guys are watching our videos and you're not subscribing so around 90 percent of you so if you feel you are one of them please subscribe and we'll actually appreciate so you can see our video our dashboard so we have our app here but I want this logo to be at the top so let's see uh how we are going to have that so let's say we can have this as a so let's have this as a stack layout then I want our vertical options then you can see let's see let's see how it will look like then uh border so both the height request you can say height request you can have these are 70 then we can have the margin here so I can have this as a three then uh vertical options you can have this as Center uh border padding at requests then we had the stroke these you can have these as two stroke shape we see drone rectangle then we say 1040 background we say white border Shadow so so let's see how it looks so that is actually so you can see we have a data reduced so you can have these as a height request can do this as 20 you can have these as eight then our height you can see this is uh 180 that's 7c so we need to change something can have this as a Center and expand we see so our height is not reflecting so border so I want us to have the icon at the top let's say this is five then the height you can say this is uh we see that it is not responding you can have this as 150. then there's something we have Titan you can see let's go away with the height of the yeah so this is the issue that the Border height so our app is not this photo we need to have it at the top here so I can do let's see [Music] merging you can see you can remove the margin then uh border [Music] let's see how it looks then the color we can say green yeah you can see the Border color changing [Music] navigation say it is uh static you can do static resource then you can say primer yeah yeah it'll actually show that then I want us to have we can remove the the vertical options yeah so the vertical options is actually giving us uh then you can have the margin here and say a five so that it actually drops down and do 10. now we see how it looks so you can see it does actually uh appears at the top so it has moved so what we need to check is uh our height we can reduce our height of the photo a bit we see 140 140 can do 120 we see there we are can do 100 you see yeah so that that looks a bit better then the background we can we can do something so the stock Shadow offset we can do let's say 20. you see then the background I think that looks better so another thing that you can do is uh we can let's see the triangle that is it the margin then we can have a background color let's say a static resource so instead of having the colors here guys I I showed you previously you can actually have all the colors it is actually the best practice to have all your colors and the Styles then colors so you have all your colors here so if you have all the colors here then you can be just be reusing them so if we come to the dashboard so so if you come to the dashboard then you can do static color you can say color one we see what is the color so that is the background color you can see the background color how it looks you can do another color too color three so that is it so if we come here you'll see our logo our app looks like so let's uh add something interesting so we can we can we can start by having some statistics on the dashboard uh for example have the number of uh employees that we have just added and have a very good UI for our dashboard so let's add something so just below just after the stock layout you can close that and you can have this as a scroll View so I want to add another so we can see under strong view you can have another stack layout here then we can stop our app there we are so let's see so we can have you can even do this inside here we can have our what you want to do so let's say we we want uh let's have a grid so I'll do grid then I say background color of the grid will be white so I'll do that then I'll I'll Define the grid browser so Green Dot row definitions so I'll do raw definitions then I'll close then I'll say error definitions then I can say height so I want uh so I'll say this is Auto then I'll close so I want like how many rows I can say like uh five so I'll do I'll I'll copy that to five one two three four five so after that I'll come down after the raw definition and uh put in a stack layout then I'll I'll say this stack layout will be grid dot Row one row zero so l0 Row one so let's say this is Row one then I'll say can have these are zero let's say zero then I'll say padding will be two then I'll say orientation it will be vertical then I'll say yeah so I'll close this so I'll close I'll close this so after closing I can I can have a I can have a an Adder kind of a title so I'll have these as a I'll have it as a can have it as a button so I'll say button then I can say text so I'll say I say employee statistics so that is the title then I can also say my so I'll just have this Dot then I can also say font font size I can have this as 24. then I can also have font attributes I can say it is bold then I can also say text color so text color I can say static so static resource then you can say color let's say color four we see what is it so I can do color four then I can close it so if we launch our app we should be able to see this button uh showcasing then we'll be able to see how it looks like so employee statistics when you just launch the app we have an employee statistics within the dashboard so let's see let's see there you are you can see that is our app so we can now have the details of the person who is actually maybe logged in or even some a quick analysis so let's let's close this let's have another stack layout so I'll just do another you can have we can have a vertical layout let's say vertical layout then we can do we can provide a label so we'll say label so then here I can do margin you can say five so then I can say label then for this label I can do font attributes I want it to be bold then um I can also do text color I can have it as maybe static then color let's say color five color five uh how is color five color three kind of uh let's close it so we'll say color it's actually not showing so I'll just copy this then this will be text color sorry then I'll say color five so that is how it looks color six so that is how it looks so if I do that then I can do some text the text of our label so you can see the text of our label we can say uh you are logged in us so this is the person who is logged in so we can have that then we can actually have so we can do that then we can see uh padding can do five then you can say font size font size we can do 15. so this then so then after that we can have here another text so that we can now have the the person who is logged in here so on the vertical so you can say vertical text alignment we can say start then here also we can we have copied this so we'll say the person is logged in we can say macro code and we can have another color we see color seven yeah then here also vertical text alignment we can say uh start then that should be fine so font size font attributes is bold then I think that's fine so we can launch our app and see so let's actually without even launching it you can see we have been saving the data and you can see we have uh the text overlapping so what you need to do on our text vertical layout remember this was a grid Row one zero so we can have these as a so you can have this as grid rows one so that we don't have it overlapping so you can see it has now moved down just below the employee statistics so the person is logged in is uh you're logged in as macro code so then we can design another thing then we can have another so we can have another vertical layout then we'll say this is a Row 2 then we can see uh last low login date you can have a date then you can here you can do 12 0. so today is 29th uh 29 so we'll actually append some of these data so we are actually designing so that we can be able to uh bind them so don't worry as to why I'm trying to add code them so you can see that is the design on how we want it look like then we can have another you can say you can have another thing you can say uh so the next this will be Row three then what other thing can we have as a login uh details about the data so we can also have the app version you can say app version so this is a version 1.0 then these grid draw one so you can see we have the app version then we have the other uh details so after we have done that so this is kind of our statistics our employee statistics or profile so the next thing that we need to do is uh we need to have now a grid of uh some of the analysis that we have so I'll just copy at the top here so I want us to copy I want us to do something what we have done here stack layout with the so this is the all of what you have been doing so I want us to have another stack layout where we now bind some of the statistics of the data that we have so uh let's let's do here just after the grid so we do stack layout then within the stack layout not even after the grid you can do it inside the grid so let's do this uh let's copy this vertical layout then we have it here then we say this row will be row four but now we don't have one this to be labeled so we'll remove this then inside here we'll specify the grid row is four margin is five then we can we can do this imagine as five then we can say 0 10. then 10. then inside the margin we can have a border so let's say border then our border if you can have a we can have a stroke thickness so we'll say stroke thickness we can have these as a two then or you can have this as three let's have it at three then we can have another thing that is a structure strong stock shape stock shape we can have it as a round rectangle then we'll do 55 0 0 then we'll say 55. then another thing is the background color background color you can have it as a static resource then we can see uh let's see yeah we can do color nine then height you can have can Define the height so height request you want this to be let's say uh and red so we'll adjust that based on how we want then horizontal options we fill fill and expand then we can close so let's close this so once we close inside the Border again we do border stroke so we'll say border dot stroke then we can close then inside we can do linear grid linear gradient brush then we can say endpoint do 0 1 so I'll say 0 1 then we can close this then inside again we can do gradient scope gradient stop then we'll say color can do orange then uh offset so I'll say offset and do 0 2 then I also do another gradient scope so I'll close this so just close that then you'll do gradient sorry gradient stop I'll do again color then orange then I'll say then offset then I'll do I'll do two zero then I'll close so after that after that so if we just save these we should be able to see what we are doing so you can see what you are doing on our screen how it is coming up so after that background border dot stock we can do now we can do now uh another we can say stack layout we close that then you can do imagine you can say these three then orientation we can actually do this as a vertical let's just do vertical layout then margin is three then we can now have a label so we'll say label you can say we can put in font attributes they should be bold then we can have a font size font size you can see it is uh 20. then we want to imagine you can see this is a three then you can have a horizontal options you can have this to start and expand then we can have the text so we'll see the text we can say this is a Toto uh total records so we'll say these total records then we can have these as a we can the vertical text alignment you can have it at the center then we can close this so if we close that and save we should be able to see on our mobile app what is happening so you can see the margin you can have five you see how it if it drops this will be let's see this will be five we see uh eight yeah so we try to make these a bit uh within there so then uh horizontal so let's say horizontal text alignment let's have it at the center [Music] I think can have these are stack layout let's change this to stack layout or horizontal let's say it is a horizontal start layout you see vertical so I want us you can also say font attributes so it is bold that's fine so after you have done that you can see the total records then we need to we need to do something on our label you can see we have the font uh the label then we can copy let's just let's just maintain this stack layout then you can have this as a can say horizontal options you can say vertical then inside we have this then within here we can do another stack layout then we say imagine these three then we say orientation you can say it's horizontal then we can close that then inside we cut you can have another label then on this label we say folder Bond font size is that margin says that then start text you can say total employees that we have recorded then if we save these let's see how it goes yeah so you can see we now have the employees then so we can have that then you can also copy these inside here and we say we can we want now to append the total employees let's say five or or 50. then the text alignment if you say this is a you should say this is so horizontal text alignment I should say this and so if we save that we should be able to see some total then it has disappeared so so we'll say this that if we save that then we should be able to have so we should say this is uh margin should be same so horizontal options will have this maybe at the end s yes so you can see we have now the total employees then we have these as we go so total records total employees you have it as 50. so we can now have all the records that we had done so but now on the on the height we can have these as one eight our height of the yes so you can see our height has grown now so we can copy some of these layout you can copy this layout here then we can say total countries then if we do that it should come down as you can see we can also copy these paste it here say total constituencies then if we save we are able to see that so we can actually increase the size of our the size of our there we are so we can do 250 so it doesn't it does be does it is actually bigger than what we expected so we we can also maybe do away with these total records so that we just have the so if you do that you can see we have the total constituencies then we can do now the total total uh Sub locations can do total sub location sub total locations then if we save we are able to see it there if we do that again total Sub locations so just within the dashboard you can be able to tell the number of records that you have so let's try to decrease the margins so if we do three and save it so let's also try to reduce these five three and do these three exquisite if we save uh yeah so let's try to have our our margin let's try to have the The Villages so then if we do that then the villagers actually dropped so let's quiz the the let's squeeze this top button for the logo so let's come and squeeze it here so here we will do you can say five then we can do the height of uh eight so if we save it it does a squeezed a bit so we need to squeeze the frame this will be you can see the padding to this 20. there we are then we can squeeze the you can see this is uh that you will see how it looks like there we are then uh another thing that you can squeeze is our employee imagine you can say this is a three so we save that then we can actually now increase the size of our of our frame you can say this to eight and you can see our Villages is now showing so that is uh all on our dashboard so you can see I've been able to do some things on our dashboard so let's try to have this as a unique field as you say 40 you can have these as a 21 you can have this as a 17 or 18. I can have these as 29 and you can have this as a 60 can have this as a 150. so that is some of the so that is how it looks so you can see now how our screen looks like so I don't know if these colors you can have them uh a bit unique so let's say on our on our layout we can have these as uh the label the text that is the text color so you can do text color then you can say dark dark orange do you have such a color dark orange duck orange yeah so if we do that and save we can be able to see sorry you can be able to see the color so you can actually have these as a part of our color then you can see how it looks like the current so we'll just copy that so sorry for the colors guys it's just mixing colors here but you can actually adopt a very good branding so that you have so if we do that do that just do that and that do that when we do these so if we save it can be able to see but it doesn't look a bit good so you can try another one you say let's use the static okay so static resource let me say color three you see how so you say color three thing that doesn't look good color five color 10. 2 [Music] three four let's see for it looks like yeah we can retain for now for we see here you can actually have these as a orange can have this as orange you can retain this as Orange orange red yeah so you can retain that then the others will retainers uh uh color four so you can see this is a orange red Orange red then these we retain it as colorful say it is uh orange red for the numbers then we have these here orange red orange red then we have this here this is orange red we have this here orange red then you have these here so that looks better so you can see now how our app looks like so that is our dashboard so that is it for today guys so if you are new to this channel consider subscribing and watching our next video see you on our next series bye

Channel: Macro Code

Views: 367

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, Visual Studio, Nick, Nickchapsas, Jake Wright, Keep On Coding, QuestPond, Amigos, Developer Filip, TechWorld With Nana, Techworld, GotoConferences, CRUD, BoostMyTool, MAUI, .NETMAUI, CRUD MAUI, SQLITE, ProgrammingPragnesh, Gerald, NETMAUI, RESTFulApi, DataGrid, Traversy Media, SQL, freecodecamp, TechTip

Id: mXhWWoRa184

Length: 52min 40sec (3160 seconds)

Published: Sat Jul 29 2023