Category
📚
LearningTranscript
00:00Alright guys so let us use this section to modify our user interface with a bit
00:07more purpose right so far we have our loading page we created a login page we
00:12know that it works and we can navigate to the main page however what we would
00:18want to do is probably simulate if you were in one role what you would see if
00:23you were in another role what would you see because a lot of the times that's
00:27the situation with mobile apps right or even if it's good to know how we could
00:33accomplish that so what we want to do is modify what we'll call the fly out item
00:38so we had modified the file behavior earlier where we change this from
00:42disabled to fly out and then we have the shell contents the default item is whole
00:49well it says home we can always change that and the content template is the
00:54loading page right so that means that you are going to get a default menu
01:00item called home but that will go to the loading page what happens is that the
01:06fly out items would be what you get when you tap the pill menu or the pill
01:12navigation in the top left hand corner of most mobile apps when you tap that
01:16and it kind of flies out to show you what the menu items are that's what we
01:19call the fly out item right and then you have you have the ability to set a
01:25header which is more static and then a footer which is also more static right
01:31so so far we've only been playing with the body section so what we're going to
01:35do here is create a new control first of all so I'm going to go ahead and add a
01:43new item a new folder first and we'll call it controls then we can add a new
01:49item and the thing is that you can always create the controls and then plug
01:54it in versus doing it all from C sharp we're actually going to look at how we
01:59do both of them so I'm going to create a new content view and I'm going to call
02:04it fly out header so we have the fly out header and I actually want this to be a
02:13stack stack layout so I'm going to change that here and if I change that
02:19there I have to change the inheritance over here to stack layout so that's fine
02:24alright so let us go back to that because I have some things that I need
02:33to accomplish code wise so I'm going to add another folder I'm just going to
02:36call this one helpers right and then in this I'm going to create a new class
02:43which is just going to be a menu builder that's all I'm calling it menu builder
02:50and this is going to be a public static class so menu builder is going to be in
02:55charge of you know putting together the menu items based on the role and
03:01whatever other stipulations we might need right so menu builder is going to
03:09have method that I'm going to call of course it's going to be a public let's
03:15make it async it's going to be static it's going to be a task well let me get
03:20my spelling right task and I'm going to say build menus or build menu because
03:27we only have one menu so build menu or we'll only build one at a time rather so
03:32build menu and then from build menu what are we going to be doing I'm going to
03:38first set the fly out header so I can say shell dot current dot fly out header
03:49fly out header is equal to a new instance of our fly out header that we
03:58just created so we're going to of course fly out header not behavior fly out
04:07header include the missing using reference so we're going to of course
04:12define what the fly out header looks like in its design and stuff but I'm
04:17just walking it through the code first so when we say build menu which we're
04:22probably going to do most likely after the app after the user has authenticated
04:29then we're going to say build menu then we're going to add the menu header and
04:37well let me actually start off by clearing anything that might be in the
04:47shell current item so shell current item so this is where all those fly out items
04:52get added right so I'm just going to clear it so any menu that might have
04:56been there clear it and let's start from scratch so we can always go now and
05:02proceed to get the details of the user now from the app remember that we had
05:09created user info and user info tells me the username and I also added the role
05:15right so I can say var role is equal to whatever value is currently stored in
05:24role then I can say if role is equal to and then let's try administrator once
05:35again you probably want to abstract these magic strings to like constant
05:39classes or enums or something but I'm just keeping it simple enough for now we
05:45can say else if role dot equals user and then you can have as many of those
05:56as you want right also in the case where you might have multiple rules you
06:02probably don't even want to use an else if so if the user might be in both
06:06administrator and user you could probably consider just doing if if if so
06:12all we do is add fly out items per role right so I'm just giving you ideas of
06:18course in our situation we know you're either user or administrator but in some
06:22situations you might be a user and a supervisor so you need access to both
06:27when they log in so that's I'll defer that to you so let us know decide if the
06:34person is an administrator what do we do so we can say var and I'm just going to
06:38say fly out fly out item is equal to a new fly out item so we can in code
06:49create our own fly out items all right and then what would have is a title so
06:57title would be equal to let's say car management and I'm going to do the same
07:04I'm going to do the same fly out item for both but I'm going to name them
07:08differently so that you can see that you know it's you can make your app as
07:13dynamic as you need it to because we really only have one place to go anyway
07:16so the root here is going to be name of and main page because we don't have
07:24anywhere else to go really based on the design of our app right but of course as
07:29many pages as you might have and you want them to be navigated to you add the
07:34root accordingly then fly out display option here it is going to be fly out
07:41options which is an enum and I'll say as multiple items right so after that we
07:48can define the items so items would be equal to and this just takes an object
07:55that has let's say a list of shell content objects so we'll say shell new
08:03shell content and then we can have as many shell content objects as we need to
08:11afterwards alright so I'm just going to once again I'm kind of simulating what
08:17it might look like we can add an icon right so icon would be equal to and then
08:25pretty much you just define the name of the icon so if you had additional
08:30resources and additional images so I don't have any additional images but
08:36let's just say that we wanted the dotnet bot it's a dotnet underscore bot dot SVG
08:43that's the icon that I would want for argument's sake right so we could do
08:49that we could say the title here would be admin page one and then the content
08:59template would be we specify a data template that takes a type so type off
09:10and then whatever page this should be associated with so type off and in this
09:17case I'll just use this main page again because we don't have anywhere else to
09:21go so that's pretty much what the shell content would look like so I am just
09:25going to duplicate this and call this admin page two let me fix the spelling
09:31of admin all right and we have too many items for admin and that's that's pretty
09:40much it I know we have items and then we can close this with an if with a
09:46semicolon so that's if you're in the admin role then this is what you should
09:51have new fly out item with all of that so now that we've compiled or fly out
09:58item I'm going to know have to add it so I'm going to say something like shell
10:03dot current dot items I can check if it's there before or I can just add it
10:14so I can say dot contains and then give it the object so I'm basically saying if
10:22it does not contain this fly out item then I want to add it then shell dot
10:34current items dot add there we go all right so if let me just review all of
10:40that with you because it's kind of difficult to absorb once I'm explaining
10:46and trying to type so let me know that I've typed it let me grow through it I
10:49go through it again right so if the role is equal to administrator then we want
10:54to create our new menu items right so we can create a fly out item that has a
10:59title car management I could easily say admin car management just so it's very
11:04clear we have the roots that it will go to and then we have the different items
11:09the shell content items and the content template to say when it's on this
11:16particular page I will activate I will look active right so that's what our
11:21content template means it sets or gets the data template to create when the
11:27shell content becomes active right so that's how that navigation works so
11:31after we've compiled all of the menu items that an administrator should have
11:36then we go on to say if this flight item is not in the current set of items then
11:45go ahead and add it so we've done that for admin guess what very similar steps
11:51for user so I'm just going to change all references the admin to user right once
11:58again we're kind of cheating here so we'll just say user user user and then
12:03we'll add it just the same so one word of advice regarding all of this once
12:11again with the magic strings maybe stuff like title and it's on you would want to
12:15type here but maybe like the icons you could create a static class that has all
12:20of the reference names to all of the icons or images that you would have
12:25added to your app right so you don't have to magically type that every single
12:29time also things like maybe the roles and all the things that you know you
12:34want set in stone you can always abstract those into their own data
12:39classes now let us turn our attention to the flyout header so we would have
12:44created the flyout header and we did not do anything else so what I'm going to do
12:51is create a label so well firstly this I don't want it to be vertically stacked I
12:57want it to just be a stack right then the first label I'm going to create I'm
13:02going to give it the label the name username right so label X name equals
13:08LBL username so I probably didn't mention this before but it's something
13:12that I practice with WPF and winforms application or code I always try to add
13:20a prefix to the name so that I can remember what kind of control it is so I
13:27probably broke that rule a bit for this course but I'm just mentioning it now
13:31before I reach too far and it's too late to make amends right so I can say LBL
13:38username and let's say I wanted to say LBL role I wanted to also specify what
13:44role this user is in and I'll just set up to 20 and that's fine right so here
13:50we'll see the username and the role displayed in the header now in the code
13:57behind I need to make sure that those values are set so when I'll just do that
14:02inside of the constructor or I can just say set values let's create a method
14:07here that says set values and then inside of this method I am going to say
14:13if if the user info in the app so if app dot user info is not equal to null
14:25then I would like to set the username label to have the value well username
14:32label dot text rather to be equal to app dot user info dot username so that's why
14:41I said that this static class is very handy because then we don't have to go
14:45and fetch the token and then these you know decrypt the token and then get the
14:49data out of the token just by setting this constant in the back end or in the
14:55code itself in the app itself we can access it easily wherever we need it
15:00right and we'll do the same thing for the role LBL role right now with those
15:09done let me try that again there we go so with that done I'm going to call on
15:16our menu builder in two specific places in the code right and while I'm here I'm
15:25going to change this from being async because I'm really not doing anything
15:29asynchronous so I'll just make it a static void so I'm going to call on this
15:34menu builder two places in the code right one we want to call on it in the
15:40loading page view model and it becomes useful when we go to main page right so
15:47I'm just going to put that here menu builder dot build menu menu builder let
15:54me control dots at the using reference menu build menu when you move across
16:00right no there are not there are a few other things I want to do here because
16:05when we're accessing the app fresh we need an instance of the user info again
16:13right so in the login view model we had done the user info from our JSON web
16:22token so the other place that I would want to build menu is here so I'm going
16:27just do the build menu here while I'm in this bit of code so menu builder dot
16:34build menu go ahead and build up everything and then navigate but I also
16:39want to borrow this bit of code and do that inside of this section so if if the
16:48token is valid then go ahead and get the role from the token and then go ahead
16:55and create the instance of app user info and username here would actually have to
17:01come from the token this time so our JSON token dot well actually just let's
17:13jump back over to the API where we compile the token and let's see so
17:20that username was included as the email claim and once again this is our token
17:31to compile the way that we need it to be compiled so if for your situation you
17:36want to change it then you can do that but what I'm going to do in this
17:41situation seeing that email and username are the same thing and we do have the
17:46email claim I am going to at this point say get me the token claim that is email
17:56right so I'm going to do the same thing here that I did for role but claim types
18:02would be email all right good so once I do that it should be able to go in to
18:08the token get that email value and store that as username that's a little mismatch
18:16I can appreciate that the mismatch is there but I hope you get the concept so
18:21once again this is where naming and context will come into play and govern
18:25how you build your app regardless though this is all setting that user info
18:31instance if we hit the loading page and there's still a valid token then we build
18:36the menu and then we just navigate to the main page so let us test out what
18:42this would look like all right guys so let us run I'm just going to run without
18:46debugging so that it will run a bit more quickly and when our app launches
18:53we get navigated to the login page so let's try this admin at localhost.com
18:59and then we enter password which is p at sswd1 we sign in then we get our success
19:09message fine click ok and then it navigates us to our car management page right so now
19:18if we look we see that we have admin page with the dotnet bot down below so these are
19:23many items that got added and I'm sure that there are things we can tweak to make sure
19:28that they don't necessarily get added down below here as well as the fact that if we
19:32look in the pill menu we see that we have admin at localhost administrator and we have
19:38our two pages that pretty much go to the same place right so if I close the app let's say I
19:46actually let me get the hang of this emulator here if I actually bring up the app and close it
19:55okay that's not working out it's much easier when you're actually using the app itself but
19:59what I'm going to do or the phone itself what I'm going to do is just rerun this so what it will do
20:04is restart the app on the device and our token should still be valid well it isn't actually
20:14reduced it to one minute so that we could test a bit more easily so I'll just log in again
20:20and then once I've logged in I'm just going to rerun the app so that it will restart the app
20:27at this point the token should already be on the phone and be valid so when the app starts this
20:32time it's just going to go straight to our car management page there we go right so we don't
20:39have to worry about logging in again because the app was valid or the token rather was valid for
20:46the app now one thing that I did notice is that it could not find the claim that I was looking for
20:53here right so these are very important points because when we were compiling our our token
21:05over here we use the JWT registered claims and if we hover over the email value it just says email
21:14versus when I tried to get that claim in code it actually would have said that was in the loading
21:23page we actually looked for claim types that email which had this so that is why nothing is going
21:30back so I just wanted to point that out as well so you have two options either you can use the JWT
21:37claim items or sub claim items here or you can go back and make sure that the token gets compiled
21:45with the correct claim type relative to what you expect your users or whoever is building a mobile
21:51app to use right so you can always do that so if I just do that claim types that email over here
21:59then that should be fine and we shouldn't have that issue with it blanking out notwithstanding
22:05that it is evident that we are getting the information that we need accordingly right
22:11so if I just do this one more time and I'm going to try and log in as a user just so we can confirm
22:17that the administrator is seeing something different from what the user is seeing so if I
22:23do user at localhost.com and the same password and then proceed to login successful and then
22:34when we look we see user page one user page two user page and the user everything is user related
22:41so just like that we were able to let the administrators see something different from
22:46the users and while it's a simple example and we only have one page the principles can be transferred
22:55to any other kind of app that you need to build or you may need to specify what each user sees
23:01based on the role that they play in the system