Add Dynamic Shell Item In .NET MAUI (Login Flow Part 2)

hello guys welcome to my channel in this video i am going to show you demo about displaying a dynamic cell item in flyout option so in a previous video i just created this simple login flow if you not seen that video just click on suggestion link to see that i'm just going to quick overview about that video so on the login page so i was just checking about like if the username and password is not empty that time i'm just uh storing that email and user details in this user basic info object after that i'm just setting that user detail in preferences and i'm just redirect to dashboard page means like if i click on sign in then it redirect to dashboard page after that like if the user close the application and again reopen so it will directly redirect to dashboard page so that condition i have added in loading page like when the application open that time it's just going to open first loading page because we have added here first page is first page at the loading page so when the application open that time which is navigate to loading page after that i am just checking here like if the user details is available then redirect to dashboard page and if it is user detail is not available then redirect to login page so that the simple login flow i just discussed in previous video so in this video i am just going to display now roll here so when i do login so i am just going to pass here role and based on role i'm just going to display here this items dynamically so let's remove this now static items from this app cell okay i am going to use three roles here one is the student role then teacher role and admin rule so let me add two property in user basic info object one is a rule id [Applause] and another one roll tags also let me create enum for role details in that i am just going to add three rows here student teacher and admin okay here i i'm just critically filling this user detail object but here i just call one api that will patch user details with rule info and base on role navigate to particular taskbar page so let me set here rule detail [Applause] okay now let's create three dashboard pages like a one for student uh one for teacher and one for admin role so let me create these three dashboard pages [Applause] [Applause] okay some let me write some static tags here [Applause] okay now on login page i just remove this dashboard page navigation and here based on rule detail i will navigate to particular page [Applause] so if the user has a student role done it navigate to student if the user has a teacher role then it navigate to teacher dashboard page and if it is a admin role then hit navigate to admin dashboard page okay let's now add this pages in flyout item so for that i'm just going to add this in app.jamal.cs in code behind i will check first like app.userdetail is no is not null then i'm just going to create flyout item and here the title will be desperate page here the root will be based on role so if like user details dot role id is [Applause] so here if the role is student then i'm just going to pass student dashboard page as a root because in login page we are navigating like this here name of student dashboard page if the student wrote so same route i am just passing here and also i am setting here flyout display option as a multiple items because this flyout item has multiple cell content so let me add now cell content here [Applause] so here i'm just setting uh student dashboard page content template as a student dashboard page so like here i'm checking condition like this if it is a student role then i am just creating fly out item for student in that root will be the student dashboard page means that these first item will be visible first after that let's add another menus like student profile right now i'm just setting student profile page also is a student dashboard page after we will add another page for student profile okay now let me add this fly out items in items dot add you can use this matter item dot side in that just specify this flyout item so now like on the login base when user to log in that time based on role it will navigate to student as per page so here when it come it will check like if the user details is not null then just add this player item for student role so let me run the application right now it's going to crash i am just going to tell you reason why let me open the sap cell so i can explain you so if i do log in after that it it will cast instantly like something like it's a root.com it will throw arrows something like that so if you see when application open that time first call came for initialization of like in app cell if you see first page is loading page so it's a loading page initialization call game and in a loading page we have a condition like this if the user details is empty then just navigate to login page okay so let me do now login so it's showing error like unable to figure out root for student dashboard page because this dashboard page is not added in items so here in app cell.xml.cs we have added condition like this after user details but is is this condition is always going to be null because on app cell xml page our first two pages are first one is a loading page means when application launch that time first page is going to open is this loading page and here in loading page uh sorry here in loading page we have condition so if the user detail empty then navigate to login page otherwise navigate to dashboard page so that fly out condition we need to add here so let me just remove that this condition from here and let's set that condition here here we are already checking user details condition so i just remove that one and here i am just checking for if the user role is available and user role of type student then i am deciding this fly out items here in appszell.com.items so after adding uh let's write navigation call like based on rule [Applause] here i'll be checking for if the rule id is student then just add this fly out item and navigate to student dashboard page [Applause] here i am also checking for this because if the root student dashboard page is already existing items and again if we try to add then it's going to crash the application so for that reason i am just checking if the app sell current items uh not containing this fly out item then only just add new item and then navigate to student as per page so let's add this same condition on login page also i'm just going to remove this right now i'm just going to add here okay now let's run the application okay now it's navigated to student dashboard page and showing these two items to the dashboard and student profile right now we are pointing to same page let me again sign out let me again the open app then we will check to sign out okay so it's directly opening student dashboard page and if i sign out and again open there then it will display sign out page okay right now we need to write this condition on login page as well as loading page so let's create one common class and in that decide this condition so i am just going to create one app constant class [Applause] okay so [Music] here just we have added flyout detail for student role so let's add now another details also for teacher role i'm just going to use name of student dashboard page so it will be easy to identify and here i will use teacher desktop page and in item cell contain picture dashboard and teacher profile so right now i will navigate to teacher dashboard for for both pages teacher dashboard as well as teacher profile [Applause] and then navigate to teacher dashboard page so same condition i'm just going to add four admin rule also [Applause] okay so now this all setup is done so here i did like first i created flyout item in that i just added two cell item cell contain one is a student dashboard and student profile and in that i am the setting content template so student dashboard is the type of student dashboard page and for student profile also we are right now setting up that template as a student desktop page and this flyout item i'm adding in this cell abstract.current.items and after adding i'm just navigate to student dashboard page this is the main route that we have specified here so same thing for teacher also this is the main route and we are navigating to this one teacher dashboard page okay so let's replace this function here let me set this as okay so on the loading page if the user details is available then we are calling this at flyout menu details and here all the navigation related stock exists let's add this method same in login page also okay now let's run the application okay now it's navigated to student diaspora page let me change the role now i just sign out from here and let's this role as a teacher and let's run the application okay now it's showing welcome to teacher task for page and here teacher dashboard and teacher profile like this let's do one thing now i'm just going to add one condition here if email contains student and then i'm just going to set this [Applause] [Applause] [Applause] okay so i just added condition like this if the email like what is the email i entered that content student that means i'm just assuming that that user is logged in as a student if it is a teacher then if email contain teacher then it will be the teacher role otherwise it will be the admin rule so let's uh now display this role tax also on fly out option so in flyout header control another property i am just going to add is user role [Applause] and here [Applause] okay let me run the application now so i'm just going to remove this app let's run the application so let me do login using student role so in header it's showing me rolled as a student role and that two options student dashboard and student profile that two pages let me sign up and log in using teacher role okay so here it's showing me teacher role but it also showing me previous login user role so let's check that so here in add layout menu details first i logged in as a student role so it has added this item flyout item of student dashboard and student profile after that i logged in as a teacher teacher role and it has added teacher test for a teacher profile but it didn't remove this student profile uh student dashboard information so let's write the code to remove that thing so i'm just going to first pad student profile input [Applause] okay uh here i'm not uh writing this f cell dot current dot items look clear because uh we have other two cell contained like one is a loading page here and another one one is a logout page uh i mean login page so if the if i clear that and user try to click on sign out button then it's going to redirect login page that time this page is not available in this cell item so because of that it's going to clash so that's why i'm just removing pages like this way first i remove student profile info then um [Applause] and let's remove for the admin dashboard [Applause] okay let me run the app now okay so now it's showing me only teacher role related options teacher profile and teacher dashboard page let me sign out and just log login using some random email so it will accept as a admin role so here it's showing me the admin role and it doing admin profile and admin discord so let's let me add icon also for layout option so here you can just specify icon [Applause] also let me add fading in all these pages okay also on tryout header control i'm just going to reduce this roll size [Applause] [Applause] okay now let me run the app so i just did some ui deleted changes so okay so now it's looking good here i logged in as a admin role so it showed me admin dashboard and admin profile now let me sign out and login using student tool [Applause] then it was displaying student dashboard page and here student role and student email address and that item student dashboard student profile and let me improve using teacher so here it is displaying teacher dashboard and that teacher fly out items okay so that's all for today i hope you like this video thank you so much for watching please subscribe my channel

Channel: Programming With Pragnesh

Views: 13,099

Keywords: Add Dynamic Shell Item In .NET MAUI, Dynamic Shell Item, Role based Navigation .NET MaUI, .NET MAUI App Shell, Login Flow In .NET MAUI App Shell, .NET MAUI Login, Login In .NET MAUI, Sign In Flow In .NET MAUI, Shell Login Flow, Xamarin Shell Login Flow, Login Page in .NET MAUI, MVVM, .NET MAUI MVVM

Id: lSmRAV5IIBs

Length: 36min 49sec (2209 seconds)

Published: Sat Jun 11 2022