Tour de backoffice

So everyone's awake now? That's perfect. Welcome to Tour the Back Office. My name is Rune Strand. I work for Umbraco HQ. I'm 34 years old, and I live here in Odense. I have done so for the past three months. I used to travel plus four hours a day to come to work at Umbraco, and that was a little too long time to travel, so I've moved to the city now. Pretty cool to see all the Umbraco community come here as well. Feels like there's a lot of friends around. I work in our brand spanking new triple S department, which is service, support, and sales. And we actually say that service equals sales. So if we provide a good service, then we can also hopefully sell you something at some point. So it could just be called the service and support team, but the acronym for service and support is SS, and that's a little bit dodgy, you know. So today we're going to look at the 7.4, some of the new stuff that's in there. Specifically 7.4.3, of course, the latest version. We'll take a quick look. You've probably seen the new document type editor, but I'm just going to run through it really quickly, because it's pretty darn cool, if we should say so ourselves. We're really satisfied with it. And other than that, we'll look at the changes that's been done to the media section, and the change that's been done to list views in general, which also ties into the media section, actually. And there's a lot of more changes in 7.4. If we get the time to look at some of them, then we will. But other than that, we'll look at actually extending... Oh, not yet. Actually extending the backend after this. So how you do custom property editors, how you do custom list views, and so forth, custom dashboards and things like this. Right. But enough talk. Let's just go straight to look at Umbraco 7.4. Let's see. Is the text big enough to see? Excellent. So for 7.4, I mentioned the document type editor, which I will show in a minute, but actually the whole backend, or the whole back office, has been tweaked. So there's tons of little views, little dialogues, overlays, and stuff like that that's been tweaked. And a lot of it is thanks to Bjarne, who's sitting down there, who's really good at creating issues. We... I don't know if I should say this, but we have a little nickname for you, which is Mr. One Pixel. So this should go one pixel to the right. Brilliant, Bjarne. It will, and then everything looks good. So that's really cool. But a lot of stuff like that has gone into 7.4. And then there's, of course, all the big changes, like the new document type editor, and... and these things. So if we go straight into the settings section and log in again, apparently... There we go. So what has actually changed in here? We're going to try to create a new document type. I've just put a few document types there. I don't really mind them. But what has changed already here, you can see you can actually create folders now. So you can group your documents, which is really nice. If you have a lot of documents, it's really nice to be able to group them. And also if you use compositions, it's super cool to have a place to put them, so it's easily recognizable. And then if we actually create a new document type, you can see the entire... interface has changed completely. So if we say we want, I don't know, a bunch of employees under our About Us page, we'll just create an employee, and right next to the name, we can choose an icon. So we can say we want user. And in the... Down here, we can create a new tab. So already here, you can see there's a huge difference between the earlier version, the old version of the document type editor, and the new one. Previously, you had to click tabs, the tabs tab, create a new tab, and then you were able to add properties. Here, it's all in one flow. So once you've given it a name, assigned an icon, maybe a description, what you want, you can start creating tabs, and when you've actually created a tab, you can add properties in here. So we'll just call this one description. And you can also enter a description for the editor of the site. And as you can see here, you can actually just add the editor right here. And what you can see here is that you can see all the available editors in Umbraco. So that's both the ones that were... Before, you could only choose the ones that were preconfigured. Otherwise, you had to go to the developer section and create a new data type and configure it, and then back to the settings section. But now, everything is available to you here. So you can either choose between a brand new data type or you can reuse one that's already been created. But say we want to create a new data type for our property, we can go in here, and we can choose some rich text content. It's actually also a nice search bar up here. And then you can see, when you start searching, it actually puts the ones you've created on top, so they're easily accessible. So if you want to create a new one, we just choose it down here. And then you can actually go in and configure the data type right here. So I think this is a huge, huge improvement over what it was before. It's so much easier to work with, so much faster. And I think it's been... It might be bold, but kind of the bane of Code First. For some people, I know some people have said that, because it was so cumbersome to work with the document type editor before. But now it's super easy to go in and also go in and configure your data types afterwards. It's really easy to find them when everything is in the document type editor. Let's just say this is fine. One thing to notice is that it also automatically generates a name based on where you're actually positioned. So we are on the employee document type, and our property is called description. And then the property editor we're using is the editor we're using is a rich text editor. So for ease of use, we generate a name that kind of makes sense to where you are in the structure. Of course, if you're creating a data type you want to use across multiple document types or multiple properties or whatever, then it makes sense to go in and change the name. But again, just to make it easier for you to use. So let's just add this one. And so that's really easy. That's the basics of setting up a document type, right? But as you can see up here in the top bar, we've got what we call the app section. You can change if you want to see it as a list view or not. We'll go back to that in a minute. You can set permissions on the document type so where it's shown in the... or where it can be created in the content tree. And of course, you can assign templates. And as you can see, as with everything else, it's completely built from scratch so much nicer and much more friendly UI that hopefully makes much more sense also to new users of Umbraco. But we want to create our employees under the About Us page, so we'll go into Permissions here. And then we can just... If we have a lot of document types, then we can of course search for them and choose the employee there. So really simple and really easy. If we go into the content tree and create a couple of content nodes... What's the employee called? We'll call it Craig, maybe. And... Oh, is that an About Us page I created there? And... And Bjarne, of course. There we go. So that's really nice. But if we have 100 employees in our company, then it might be nice to see a list view. And this is not new to 7.4 that we have list views, but the way it works is a little bit different. So if we go into the About Us page again and click the List Views app... List View app... Then we can say, yes, we want to enable it. And you can also see here, you can go straight to editing the list view if you want to. We'll have a look at this later. There's a couple of new features in here. You can choose between different layouts of a list view, and you can actually even add your own layouts to it really easily. Sort of kind of the same concept as when creating custom properties. But we'll get back to that later. Let's just say this is fine and dandy. And go back to the content section. And now we've got a list view. And as you can see, this has also been revamped completely. Much nicer and much more friendly UI. Much easier to see what's going on. And up here, we've got this little layout toggler. So by default, we've got two layouts. We've got the standard list view, which is probably what most people are going to use. And then there's the card layout as well, which is... It's okay. It can be used for some things, but it's also more to give an example of what you can actually do if you go in and add your own layouts. So this is just basic HTML files that you can set up so you can style it any way you want, any way that makes sense to you or makes sense to the editor when viewing a list view. Yep. So list views. And then we've got the media section, which has also been completely revamped. Let's see if we can find some images that are completely out of... Brad Pitt and me, maybe. It's wonderful. But as you can see, it's really... It's nice, and it's much, much faster than it was before. You can also just drag and drop. You can actually take a zip folder with a folder structure inside, drop that in the media section, and then it creates a folder structure inside your media section automatically. So there's been a lot of work done here to make it much nicer. And as you can see here, we still got the little toggle thing, and that's because it's actually a list view that's just been configured to contain the upload field here, but otherwise it's pretty much just a list view made specifically for this section, which also means that you can customize your media section. So you can create your own list view that's appropriate for the media section. Maybe you want to show some metadata for your editors underneath your images and things like that, or you could add extra functionality to the images. As you can see now, if you click it, then it's selected. Then you get some bulk actions up here. If you want to extend that, that's totally possible. You can even add buttons to the cards or whatever you want. So that's also a really, really nice feature. Yep? Will each product remember the list view that's been shown, or is that a global thing, or what is it? So the media section remembers where you were last, if that's what you mean. I mean, if you have multiple folders with different stuff, some folders may contain PDFs, some may contain pictures, will each folder remember which list view was used? Yes, yes. The list view you set for the entire media section, of course, but you can have multiple layouts in there, and the layout you choose for each individual folder you're in will be remembered, just as the media section will now remember where you were the last time you were in the media section. So if you're in there and then go to the content section and then back, it will actually remember where you were. Is it remembered per user or is it global? It's a session cookie, so it's set on your computer. So that's kind of how it works. Excellent. So that's some of the new features that are in 7.4, which makes it look a lot more like a modern CMS. 7.4 was awesome when it was made, but that's also a couple of years ago now, and there was a lot of bootstrap-y things in there. So we've got some front-enders added to the team now, and they're doing a great job. Most of it is actually built in Flexbox, which makes it much nicer, much easier to handle inside the browser, and everything kind of acts as it should when the browser is resized and stuff like that. And now for the awesome things, you can actually customize pretty much all of this. And why should you do this? Well, that's of course to create a great experience for your editors. There's a lot of default property editors in Umbraco, and we've seen some default media or list views and media views as well. But there are many use cases where it makes sense to create your own custom things, custom property editors, list views and such. And let's have a look at how we can actually do that. So we'll start off with a really basic example of how to create a property editor. I'll just show you what we've got here. We've got a section with social media experts in it. They're really skilled at social media, these guys. So we can go into one of them, and in the employee tab we've got a custom property editor, which actually goes out and fetches an image from Twitter. So it's kind of a validation. What we want to add here is the Twitter handle for the user, and it goes out and fetches the image. So it's kind of a nice way to validate a Twitter user, so you can actually see who you're choosing. And the really cool thing is that it is super, super, super simple to set this up. So if you go into the app plugins folder, which is where you, of course, create all your custom properties and list views, we've got one called Twitter username down here. And as you can see, it just... Ow. Damn these smart touchpads. It actually just consists of two files, an HTML file, which is the view you're shown in the back office. Can you see that? And then we've got a package manifest file. Now, for everything you do in the app plugins folder, be it a custom property editor or a list view, you need a... Well, not for list views, actually. But for custom property editors, you need a package manifest. Which is kind of where you define what the editor is called, what the alias is, what icons should be shown, what group it should belong to. In the new document type editor, all the property editors are grouped. So we've got some under rich content and so forth. And you can see the group is set here to social media. And down here, it is set as a parameter editor, which means that you can actually use it. When creating macros as well. But that's kind of the place where we define all the metadata for our property editor. It's also where we hook up if you have custom CSS for it or custom JavaScript. If it was JavaScript, we would just change the CSS out here to JavaScript and then link to the JavaScript file. So it's really easy to set up. And we have full documentation for how the package manifest works. I'll also show that later. We've got some brilliant new stuff in there. If you haven't seen it, there's something to look forward to. But that's kind of the basic of setting up the property editor. Have most of you seen this before? The package manifest? Yeah, yeah, yeah. And because we've connected to this view, this is what it's going to be shown when we actually choose the property editor for. I can try. At least. There it is. More? Yep. Cool. Now I can also see something. It's brilliant. So for this basic one, we don't have an Angular controller hooked up to it or anything, so we don't need to reference that. We've just got a div around it for some styling. And then we've got an image where we put in the source for the image using Angular. And then there's an input field where we've set the model as model.value. And this will basically mean that when you save the image, it will save whatever is inputted into the field as the value in the model. So that's all you have to do if you just want to save a single text string, for example. So it's really easy to get started with. Yeah, and as we just saw out here, and you can see where it's putting in the source for the image, we just use Angular's data binding. So whatever you put into the input field, we'll put into the string, and then it actually goes out and fetches the image from Twitter. So if we were to say, maybe create a new employee, and we could do that. And Casper, is that with the C or K? C. I know you know a lot about social media. Yeah. What is your Twitter handle? Casper. Boom. It is ridiculously simple. But it works quite well. And... We hit save and publish. And all we're doing is saving what we put into this input field into the model. And because of the data binding, when we go into the property editor again, or into this tab, it will show what we saved in the model value. So it's super simple. Really easy to get started kind of toying around with. Now you can get much more complex with it. You can start adding controllers and stuff like that, which we will take a peek at now-ish maybe. So if you wanted to do something a little bit more advanced, we've got this. Let's just check in here. So the actual meaning or the point of this, what Casper is going to do is he's going to find some really cool tweets on Twitter, and he's going to go on his profile on our page. So we can kind of show off how good he is at social media or whatever. Doesn't really matter. But what we can do down here is search for some tweets. And then he can pick one and he can remove them again. Let's see if I can actually remember what it is called. I might just have a look. I might just have to go peek at some. I've cheated a little bit here. The Twitter APIs are not as open as they used to. So I can't just go out and fetch a bunch of tweets. So I've saved some JSON data. So if I just go into one of the other ones and look. Let's see here, Andrews maybe. Bibendum dorm ipsum. But what it does is I start searching here. And then you can see then it searches. What it searches now, what it's supposed to look like is we are interacting with some kind of API endpoint where we can fetch some data from. This is just a JSON file that is in the app data folder. It's searching right now. But what Kasper then can do is he can choose between these tweets. So we can say I want to do this Bibendum, for example. And he can choose a maximum of five tweets down here. And he can also remove them again like this. Pretty basic stuff, but it's actually quite a nice experience that you can go up and search. And you can add them and remove them again just by a simple click. So if we save this one. And let's just refresh this. You can see now it's saved the tweets or the lorem ipsum that we've chosen. So the way this works is by adding a controller to our text. It's really small here. To our editor. Again, we have a package manifest down here, which is a little more. Advanced. Still the same basic stuff. Name, alias. You need that for everything. And then there's the view for the editor. Now on the other one, there was just a view here. But if you want to actually go in and define what value type you're using, you can go in and set some extra options in here. So we're saving some JSON. And then we've got pre-values for when you're creating the data type. You can. We've set it to a maximum of five tweets. That's why I could only click on five. So that's how we define that. Pre-values, fields. And then you choose a pre-value editor, which can be a number or string or whatever. There are a bunch of default ones in Umbraco. And then at the end here, you can see there's quite a few JavaScript files hooked up to it. And the main one we're going to look at is the controller, which is what handles the logic for our property editor. So if we go into our controller and have a look. Standard Angular stuff up here. We're hooking up to the Umbraco app. And this is the alias of our controller. And then we start defining the different functions. Or the different options we can hook into in the view. We start defining them in here. So we've got a search function. And we've got the option to add the tweets. And we've got the option to remove the tweets again. So this is going to make a lot more sense if we go into the view, which is still a pretty simple view. But as you can see here, we've now put an ng-controller on, which means we hook up to the JavaScript file. And then we've got the input for the search. So we send a model to it. And then on key down, simple Angular attribute here on key down, it's going to search our terms we've got in the model. And what it then does is it just loops through. Through the items that are returned here. So for every result we've got in model results, it creates a link where we can interact with, which we can interact with by, when we click on it, we use the add function that's defined in our controller. And then we've got the selected tweets underneath, which is basically the same thing. Going through the value, which is the save value. So the terms we pick get put into the model.value, and then it loops through them. So for every result here, and if we click one of those, we interact with the remove function in there. And that's how it works. So you can see every time I click this one, it initializes the remove function. So that's kind of how you start setting up a little bit more advanced property editors where you can actually start adding logic. And there are of course a zillion stuff you get from Angular by default, so you can use all of that stuff. Hopefully we'll get it upgraded at some point again, so you can get some of the new features in there. But there's also a ton of stuff that we've made available in Umbraco for getting content items, for example. We'll have a look at that a little bit later as well. But there's a ton of different things you can, services and stuff like that you can use. But you can actually do a lot. Yeah? Yeah? Is it possible now to add dependencies to the Google Cloud software? I don't know if you could do that. Yeah, the... No, I don't know when it was added, but it is actually possible now. You have to do a little work around it. I can't remember the last time I had a question off the top of my head, but I had a support question about it over the Christmas holidays, actually, where I spent a couple of hours and found out that it is totally possible to add dependencies to the Umbraco module. Yeah? for a number of users, and then you can feedback? Or do you decide to yourself, okay, this will be... Yeah, yeah. ...it's gonna be better, and then you put it in production, and then you can give it up, and then you test it, or is it just like you get something and then you make it a user? Mm-hmm. That's actually a really good question. And thanks for asking questions, by the way. It's really cool. Normally people don't do it during the session, but that's kind of nice to break up the pace a bit. So there's quite a few different ways we approach that. One is feature requests from you guys who are really annoyed that you can't do this and that and make an issue with a nice description, and then we go in and evaluate it and kind of start testing out how it works. And for the first part, it's just internally. I mean, we come up with ideas on how it could work or how it should work, how we think it should work, and then we implement it. For the simple things, we just release it. And then if it's not good enough, if people don't like it, then we tweak it and change it. For the more advanced things, like the document type editor, for example, we did quite a lot of testing. We had a couple of testing sessions where we invited people to our office, mainly developers. I know Jan was there. And we video recorded them kind of interacting with the editor to get feedback that way. So depending on how big the change is, there's various different ways we do it. Now, this was, I think it was maybe three or four months before it actually came into beta. And for the document type editor, we also invited people. Just when we had the roughest of prototype, we invited a lot of developers to the office to kind of come up with ideas, have a big brainstorming session, and that's kind of how it started, the work on that one. But then, of course, for everything we do, every time we do a release, then we have at least something that contains important new features that we want people to test out. We have a beta that's released before. And we can catch quite a lot of stuff there. Hopefully not too big, too large amount of things needs to be changed during the beta, but we've seen we've had both two and three betas released if people find issues that need to be changed. So that's kind of how we go about it. Cool. Yep, so that was kind of a little more advanced property editor. If we go back into our content section and look at our social media experts here, then you can see it's a, or maybe you can't see it, but I can tell you, this is a list view. So it's a list view that has been customized to show the name of the employee and their Twitter handle with the Twitter photo on it as well. And it's got the same basic interactions as we've got on the normal list view. So you can do bulk actions and everything up here. And I don't know if it's been removed yet. We've still got the, we've still got the list here and we've also got the cards. Now when you go in and configure a list view, we can just take a look at that. So if we go to the document type, which is also really nice now, I know it's on the employee, on the staff node. There we go. So instead of having to go digging through the data types in the developer section, I can go straight into my document types and I can click on the list view up here. And here we've got our list view. And then I can go in and start configuring. Now a number of new things have been available since list views were born, I guess. But you can see there's a layouts pane down here where you can actually drag and drop the different layouts. So you can choose the default layout you want to show the editors. And if it makes sense to give them more options, then that'll be shown there. If you only have one list view, I'm pretty sure it actually doesn't show the little toggler in the list view section as well. That might be promising a bit too much. I'm not going to test it. And then you can, of course, add columns to be displayed in the list view as well if you want more data in there. And these columns you configure here are also the ones you have access to in your view. And you can set which bulk actions is allowed on the list view. Yep? You have all of my custom... You have the sorting custom... Damn it! I knew that would come up. No, no, we don't. What you have to do at the moment is, as you do with everything, with all content in Umbraco, is to... See, it remembered where I was. Duck view. So you right-click on the node and then you go and sort it in here. And that's how that stuff works. You could do your own sort order in there and then use that in your controller so you could add, drag, and drop. And then the apply sortable is already in there. So you could do that and could potentially even hook it up with the content service and start changing the sort order. We have looked at this a few times, but there's just a lot of issues that start popping up if we kind of change that to the default thing. So where it makes sense, for now you have to implement it for yourself. Sorry. How about the tagination effect? Yeah, yeah. It totally is. See... List view. And you see this page size here. Yeah, but you have more like more than 20 images, I'm sure, under the other file. So what do we have? If I put it on three, then we should be good. A little bit of stuff we can definitely improve on is that you have to save the list view configuration here. At the moment, which is not the best experience. I don't know how many times I've saved down here and then it's not actually saved my configuration. So that's a pro tip right there. And there is an issue for it. So if you go in and vote it up, then maybe it'll get added to a sprint soon. We can get that sorted. But if we go into the social media expert section, you can see there's now three. And then we've got the pagination down here. So there's actually a lot of stuff available out of the box already. And then it's also quite easy to go in and add your own. Yep. Yeah. So what do you mean? We have a problem with the . Yeah. So we would like to or or whatever it says if the page has Yeah, yeah. I don't really know. But I can't see why that shouldn't... Well, if it isn't, then it should definitely be added to the service. But I'm pretty sure you could... via the content service, can go in and find that somewhere. I'll show you the documentation in the end because it's been... It's much more easily available now. We've done a metric ton of new documentation for the Angular stuff. So it's much easier to get into. But yeah, it would have to get out of the content or the entity service. I don't know if that's a published state in there. So I can't answer your question. But if you... If you write to me on Twitter, then I'll happily investigate it for you. I'll show you my Twitter handle at the end. You might have also seen it on the page. Okay. So let's just have a quick look at the ListView. Actually select the file. Manifest, of course. We want... We have some JavaScript for our ListView controller. So that needs to be added. But that's all we use in here because we... In the configuration of the ListView, you put in the path for the view right there. So we just have the view file here, which is just a simple loop over the items. Same stuff again. Getting the Twitter handle, which is saved on each of the items, putting that into the source, and that then fetches the image for us. And then we have... Have some actions for selecting the item and going to the item and stuff. The alias we're using for the Twitter handle, is that the alias you're buying in this definition of which we use? Are you taking... It's... Well, it's pretty much... No, no, I don't think so. I don't think so. It's just... You just get the controller name, which you can then refer to in the HTML. Yeah. Okay. So if we go into our controller, you can see we've defined the name of the controller here. So it doesn't really matter what you call it. You can call it Rasmus, and that would still work. Just have to call it Rasmus in the HTML as well. So we're using a little bit more advanced stuff here. We've, of course, got the scope. Then we've got the location service, which is what lets us go to the actual content item. And then we've got the ListView helper, which has some really nice features for kind of using the default select method we use in the default ListViews and stuff like that. I'll also show you that at the end because it's also documented. It's super awesome. But then you can see it's actually... We don't need to write a lot of logic to create this ListView. So we've got a function there. And for toggling, when we click on it, you can select multiple items, and then the function which actually makes us go to the item. And that's why we use the location.url. You could also just get the URL from the content, put it into a link, but this is better when we're working in the back office because we can just go to the edge path there. Yep. Yeah. Yeah, you can. The way you configure ListView is just as configuring a data type. So it's saved in the same way. So you can go in and choose the ListView. So if we just go in here and see... You can see there's ListViews down here. That's actually our staff. ListView here. And you can, of course, use that. You just add the layout to a new ListView if you want to use that there as well. Yeah, yeah, but that's because we've made it specifically for the staff. So if you wanted to have a ListView that you use across multiple node types or document types, then it needs to be generic enough to get the data out. I don't think we can really automate that. I think you were first. The property entity you were creating before, did you create a custom ListView for the particular slide down to the right? Yeah, yeah. I mean, it's just HTML. And you can use, if you want to use, some kind of JavaScript library. You can just load that in. So when you do an image picker and it comes up, you want the images on the right-hand side to slide down. So I just want to do this new, change out the view and not have to load all the... Yeah, yeah. So that's the overlay you're using in there. Then you have to create a custom overlay, which is... We can also have a look at when we see the documentation. So what you would do is instead of... You would have your custom property editor. So, for example, you pick an image. And instead of using the normal media dialog, you would reference your own. So when you click that, you would call your own overlay. And then you, of course, need to make sure that it's hooked up to the database in the right way so it saves and updates everything as it should. But a really good way to get started doing those kind of things is to look at the source. So in the Web UI client, go in and dig through and see how the... how our custom or default list views are created, for example. No, no. That would be awesome, though. Yeah, yeah, yeah. You have to fiddle with some code in order to do that. But, I mean, what I like to do is to copy one of our existing property editors and then copy the overlay, for example, and then start tweaking those things to see what you can do. Because that's actually a really easy way to get started doing your custom stuff. Because if you just sit down and try to build something from scratch, if you haven't done it before, it's quite easy to get lost. Hopefully it's better with the new documentation. But... Was there another question? Nope. Cool. Time is going fast. So there was one more thing. Yep. So, in the content section, you can see we've also got a really, really beautiful list of our social media employees as the dashboard. And this is a thing that people too seldomly change, in my opinion, because this is not really super great information for an editor. But if we actually show them something that makes sense to them, for their site, it's much nicer. Here, what it does here is it marks the employees that haven't updated their profile. When their profile hasn't been updated for six days, then it gets marked as red. So you can actually see you need to take action here. That's kind of the basic idea about it. So I've been a really bad boy. It's been four months since I've updated my profile, updated my curated tweets. That's something I really should take care of. The way we do a custom dashboard is in the app plugins folder. We have a package manifest for our controller. We have a view. I'll get back to these. And we have the controller. So complete the same setup as with the custom property editors. Yeah? Is this new? Nope. Huh? Nope. I mean, usually you have to do a custom control to come from the package. The only thing you have to do, which I was getting to, is... But wasn't it previous you had to do a custom control? Yeah. Do you still have to do that? No. Awesome. You don't. It is just an Angular view. And you can do whatever you want. Using the content service, I can say where I get... We'll see that where we get the notes from. We define the... We use the... So the staff root note. And then get the children from that basic stuff. But the only thing that's different from doing custom property editors and list views is that we need to go into the config folder. And then select the dashboard config. And what you can see here is we've got a tab under our welcome user section that's called... So it's hooked up to the content area. And we've got a tab with the caption welcome. And then we define the view for it. So once it's connected to the view, then it's also connected to our JavaScript controller and everything. Does that make sense? If we could actually just do like this. And call this one Sune. And then it should add a new tab. So that's pretty much all it does. And then, of course, hook up to the view. But that's the only thing you have to remember. Otherwise, it's just like anything else in the back office. It's plain and simple HTML and JavaScript. Yeah, no, not really. You can hack it out, but there's not an option to just hide it. If you do a custom section, then you have some options to do it in there. But for the content tree, the tree view is... For the content section, the tree view is an inherent part of it. And you can't just flick a button and then it goes away. What you can do is you can have your... If you have a browser at a certain size, then it automatically hides the tree view. So you could potentially... I don't know if you could make a Chrome plug-in that would resize the window to... Nah, doesn't matter. Bad idea. Anyway, so this is all we need to do to create a new tab and hook up to the view. And let's see if I can see what such is we've got in here. HTML. We again hook up our controller. And we repeat the employees. And let's see what we've got here. So this is the path to actually edit the employee item. So if you want to go, you get kind of a shortcut into the... To edit the actual node that's shown in there. And it's just by referencing the ID of the content node. Then you use location service or something like that for that node? Yeah, yeah. And you could totally do that here as well. Just kind of show that there's... It's just a path that you're getting there. So that's also a way to do it. So you can hack it any way you want. Again, our Twitter image. And underneath here, we've got... We've got the... The kind of outdated stuff. Or showing when the employee was last updated. And we've got an ng class that just flicks a CSS class for if it's outdated. If it's too long since you've updated, then it'll add the text error class. Which is just basic bootstrap class, I think. But if we have a look at the controller. You can see here we're using some other things. We've got the content resource. And the entity resource referenced up here. So this... You kind of have to inject the services you want to use. And for this, we're using the entity resource to get the root node. So the staff node. And the entity resource is to get just... It's got kind of basic metadata on it. So if you're not... If you don't need to go into the custom properties that you got on the document type, you can just use the entity resource. And then it's going to be faster. So that gets the staff node. And then we use the content resource down here. Because then we can actually access the custom properties we put on the content items in here. Whoa. And here's some logic to see if it's been too long since we've updated it. And stuff like that. It's pretty basic. Not super advanced. But kind of a nice way to see that it's actually easy to... It's fairly easy to get started customizing these things. And it can make a huge difference for your editors if you customize these sections. I think especially the dashboard is super relevant to put your own stuff in there instead of some links to our... Yeah. On Blackboard TV or whatever it is now. And that's also the thing we've been talking a lot... Oh, yeah? Is Node.ache always available for use? What do you mean? I thought it was... Yeah, yeah. It's... Yeah, yeah. There's a bunch of libraries that we load in for everything. So if you want to do sorting, for example, UI sortable is also always available. For example, we use that for the grid and for pretty much everything you do sorting on. So there's a ton of... I don't think it's... That's a good point. I don't think it's documented what libraries we've got loaded in. But again, really good place to look is the source. You can see where we load in all our dependencies there. And there you can also find the versions we're using because it's not always possible for us to... It's not always possible for us to be on the latest versions. So if you're doing something with the rich text editor and tiny MCE, it can be nice to know which version we're actually using. So source is a good place to look. But that's kind of the different areas I had to show you. Kind of... Hopefully, it was basic enough to give you the courage to start going out and doing some custom things for yourself. So I think I've got a few more slides. Yep. Umbraco TV. For this stuff, we've got the property editors and grid layout chapters. I know we didn't look at grid layouts, which has also been completely revamped for 7.4. But it kind of speaks... Talks a lot about how to use the package manifest and do some custom property editors in a really simple way as well. So these chapters are kind of good starting points if you want to get your... What's it called? Toes wet. Knees. Whatever you want to do. Jump in head first. We've got training customized in the back office. And there you actually, for a full day, sit down and build pretty much what we've seen here. So go through all the services that we're using and kind of find out what they can do and write all these different things. List views and custom property editors. So highly recommendable. And we've got documentation. I know it sounds totally crazy, but we do. We've got the extending section where you can... There's a tutorial for doing a custom property editor. There's stuff on how to do custom dashboards. Then we've got... Can I click here? I can. Fantastic. And then a completely new thing. I think it's about a month ago. Sebastian and Shannon had a Freedom Friday. Um... Which is what we do when we don't have... Or when we've finished our tasks. I think that's what it's called. Then we kind of get to work on pet projects and stuff. And we've been talking about this for so long because we have C Sharp... Actually really good C Sharp API documentation in the source, in the core. And there's fairly good Angular documentation as well in the source. So you can go in and you can build the docs from source or you can look in the individual files. And you actually see pretty good comments and therefore what different things do. But we just haven't really surfaced it in a good way. So for what we've seen today, the back office UI documentation is available. So if we wanted to use the content resource, for example, just search and go in and find it. And then there's full documentation on the different things you have access to. Okay, IntelliSense file. For? Yeah. Um... Well, IntelliSense should just work, I think. Out of the box if you open it up, right? But we've got the... Oh, no, no, no. I know... I think Warren has been looking into actually creating that stuff. Or was that for TypeScript? I don't know. But we don't have... IntelliSense... Yeah. Yeah. Yeah. But that would be... It's a really good idea. So if someone wants to get that started, we're more than happy to kind of help out and point in the right direction. If you find a good solution for that, that would be really cool. But also, yeah, for the core, we've got full documentation in here as well. Everything is searchable and stuff. At some point, we'll also get it into... It'll be a little more integrated into our. It's kind of a little bit hacky now, but you can actually find it from our and from the documentation page. So I think that's a fairly big advantage compared to before anyway. What else? Yep. As I've said a number of times, the best way is to look at the source. That's where you can see what's actually going on. And a lot of the... Well, everything that's documented is also in the source files, so you can kind of read it while you look at the different functions and services. So Umbraco, WebUI client, and then source, and then you can see all our components and services and overlays and dialogs and stuff like that. Yep. I think that's pretty much it. Have you ever bundled this to the deck example on the package? No, no, I haven't. But that... Spare time. Could be doable, yeah. Yeah. But I think the tutorial actually has a package. The custom property has a tutorial, which is quite a nice example of how to do all the stuff we've shown here. Nice. Yeah, that's a good one. That might not be a related issue. We've had a problem when we're using ListView for this thing. There's a problem with the content picker, that you can't expand the tree. Yeah. So for... So the dialog that opens up... Yeah, if you have a content picker, you can use it. Yeah, yeah. Yeah. If the folder that you have in the package is set to have a ListView... Yeah. That is a known bug. Or bug, but it's just the way we handle ListViews, it can't really get the child nodes when you change it over to ListView as it is now. And it's a known bug. It's on the issue tracker. So go in and vote it up. And then we can hopefully get that stuff fixed at some point. I know it's super annoying because there are many cases where it would be nice to have a ListView, but actually also be able to pick the items. As it is now, you have to search for them. But that means that you have to know... I was lucky because there was only four staff members, so I can pretty much remember their names. But yeah, I totally understand what you mean. And that is a known bug. Sorry. No problem. Yeah. Yeah. No, no, no. Any other questions? And if you have any questions or want some additional information, you can reach me on Twitter at HemRaker. Or if you're using Baccarat's service, I'm in the chat. Thank you.