This video shows the administrative Task page and associated design. Here is the transcript of the video:
In the last segment of this series will cover a couple of the details that we see up in the toolbar. You notice here on the toolbar, I have my avatar and when I click on it I can log out and I also have this help docs icon. Let's go take a look at that design. We go into the toolbar buttons component. Basically, these are extras that get inserted into the toolbar for you automatically. The basic structure is pretty simple. There is a row with a div that is basically a space filler and then a dock's in context button. With the app name and the doc site URL. We'll talk about that and more in just a minute. And then a button that we show if off service. So we've got our service over here is a dependency, a service that authenticated. Now, obviously, when the page first loads, the user's not authenticated, then it connects to Auth0 gets the token back and then you are authenticated. So this is an asynchronous operation. So we use the async pipe on that. So as soon as we know who the user is, this shows up, the width is set to 40 pixels, which is what an icon button is. And then you notice this is a trigger for a menu. Matt Menu is a component from the Angular Material Library and it's set to menu. The menu is just down here where it has a local name menu. That's why you can reference it up here and it has a single button in it that is logout. And when it's clicked it does a service start logout. So you can see here we're executing methods that are in this off service where in the previous examples we've been executing them from a method over here.
One more detail on that avatar is that there's an image in here with the source evaluated from the app user async and it's picture. Or we also have an asset blank profile picture that can be shown. So let's go take a peek at where assets are in settings assets. You can upload any kind of client side files. Typically they're image files, logos, factions, that kind of thing. You also can upload server side assets here as well. And one other small detail about this is to get the size of that image right. We have the styles on this page where the image tag is set to height and width of 40 pixels with a border radius of 20. That's what makes the item round and object fit contain. Make sure that the picture fits inside of the icon that we have. So that's a little bit about how we do the avatar. You also notice down below that there is an error alert. What this is is a component that listens for errors in the page and then displays the message to the user. If it's an informative message, it came from the server, but if it's something like null pointer exception or other things that don't mean anything to the end user, it will display an oops something happen message.
So it's got pretty good logic in this component within the within the Dynamic Components Library and you can always copy it up into your app and make changes to it to refine the logic for your particular app. Now the last one is pretty cool and that is the Docs in context button. If you see here, we say what name this is and also what the docs site URL is. The effect of that is you notice here when I came in, now I've got a little unread badge. If I click on this, there are three pages in the docs site that I have not read yet, and as we navigate around the app, you'll see that I can leave that open and it's going to show me what pages belong with this context and the badge will be updated. So for example, let's say that I have that I have read this and I close this off. And when I'm navigating around suddenly, oh, I see a badge up here, I can click that open to see what the page is. I can open the page right here in the dialog and a little iframe opens up and it shows the page, which is one of the videos from this series. And there also is a and you can say show read pages if you visit, there's a link to open it in a new tab so we can open it right up like this.
Now, how did all this dark stuff get in here? Like, how did it get hooked to this app? Well, you certainly can build your own docs site. And in fact, our Apex Designer Docs site is built in Apex Designer. And just to give you a little bit of an idea how this page is associated, I'll click into edit mode on this page and you can see we've got the breadcrumb of the page hierarchy. So this page is under the vacation request sample. This is the body of the page where you can use a rich text editor or this page is not an edit mode, this is a published page. But over here on the side you can see the app context. We've given the name vacation request sample and said that this should be shown any time that the path is come under process. Definition Star. So that is why this particular page was shown right here. The cool part about. It is, you can match patterns like that. So, for example, when I open up a given activity within a process, I can see the help one or many pages of help that goes along with this particular path in the URL. So you can use this as design documentation, which is how we've used these videos to explain the apps to yourself. Out to you guys as we've been going over these. But you can also use it as end user documentation.
The whole Apex Designer help site, including this ask a question, capability, the notifications and everything else you can have in your own dock site very easily. And we've used this on not only our own documentation sites, but other sites for our clients as well. So that wraps up this sequence, this series of videos about to the vacation request sample app. Go ahead and create a copy of it, as we showed you in the first video. Give it a try and let us know your feedback. Hope you enjoyed it.