060 The custom dashboard option in JCB

THE CUSTOM DASHBOARD OPTION IN JCB

Adding Your Own Custom Dashboard To Your Component

00:00:00 (Click on these time links to see Youtube video)

The option to add your own custom dashboard to your component has finally come. I might have mentioned this in some previous tutorials but it is somewhat hidden. In the past, all components layouts ended up as the dashboard that looks like this but obviously with your own icons. You could only do what you see here. This is still the default dashboard. If you do not add your own, they will build this for you. Based on your fields, icons, and layout selection.

Adding Tabs

00:00:43

You could add tabs as we have here. These tabs are quite powerful. You can add a lot of functionality within that. For some of you, this might be boring and not what you would like. In fact, you do want it to look different and not to look like it was built with JCB. What makes components valuable is that they are unique. That is why JCB exists, it exists because I did not want a cookie-cutter component. 00:01:22 I wanted to build my own components that look different from others and yet have similar behavior. None of the others out there could do that for me. We ended up looking like the one we are using. 00:01:42 With JCB we constantly are trying to make sure that this is not the case, in fact, that is why the site view area is a bit more difficult. We want to give you the opportunity to express the functionality of your components in a way that is unique to you. This might be a challenge but in the long run believe me, it is the advantage if you are familiar with JavaScript or CSS or HTML. 00:02:13 So there is a little bit of incentive to get your head around some of these technologies.

Open Hello World Component - Dashboard

00:02:41

We have this common known Hello World Component open on the website, this is its dashboard. It does not have a custom dashboard and I am not going to add one at this point, but I am going to take away the dashboard it has, then it behaves like the article manager for example. If we would go in the Joomla Components area there is a tab called Dash & Install. You will see it has a Default, and it has some description of what that means. If you click on Dynamic 00:03:27 it gives you a list of all the available Sites Views that are linked to the component. That would be Custom Admin Views as well as normal Admin views. It will show you a list of them all. You can then select any of those. That will become the new dashboard for your component. Save and close. 00:03:52 Go to the compiler and compile the Hello World Component, and reinstall. To demonstrate how that changed, our components behavior we are going to install. Go to components and click on Hello World link 00:04:17 to see what it does now, as its default dashboard. It loads the list view and the dashboard is gone. From this point forward your Hello World Component looks like this. It does not have a dashboard.

Use A Custom Dashboard - JCB Compiler Dashboard

00:04:34

You could use a custom dashboard, which in our case if you are using a component that has Custom Admin Views. JCB has the compiler and has a snippets area as Custom Admin Views. If we were to do a similar thing with JCB, we could select one of those, 00:05:04 say Dynamic and select one of those views, scroll down a bit to the Compiler. We could make the Compiler JCB's Dashboard. 00:05:20 It is going to break a lot of things somehow I suppose. Let's try it out. We have JCB, we switched it to have another dashboard instead of the normal dashboard. We are going to compile it and install. Before I install it, I just want to tell you what I meant by things that may break. We have a bunch of tabs, and all these tabs are getting information and making it available to you, that you could get information from us. 00:05:50 We have the version, the last build date, you are going to remove this whole area. We just did. If I click on this install, we will first see it tells us that this language string is no longer here. At first, it seems like it has a broken issue, but if we refresh it, you will see that it removed it. It is just a catch thing there. 00:06:23 The dashboard is gone and if I was to go and click on Component Builder, it will from now on opens right at the Compiler, and will be its default page. The behavior is correct. We do not see any issues. If you were to go to the code, Dashboard is completely removed, all its files everything, no trace of it is left. To undo this you could simply say default again, save and close. Compile it again. It will place the dashboard back. No harm was done to the component, but for those of you who want to take the Custom Admin Views 00:07:17 and design, a much more impressive maybe not a boring dashboard, can do so by simply using this new feature. I am sure it is going to be a lot of fun. We refresh it, the dashboard is back and if you click on it everything is fine again.