Updated 060 The custom dashboard option in JCB (markdown)

Amigo 2019-09-26 09:31:21 +02:00
parent 2ad27833b2
commit 17c662f341
1 changed files with 4 additions and 4 deletions

@ -5,22 +5,22 @@
[00:00:00](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
(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's somewhat hidden. I thought let's do a quick tutorial about this. In the past all components layouts ended up as the dashboard looking like this. Obviously with your own icons. You could only do what you see here. This is still the default dashboard. If you don't add your own, they will build this for you. Based on your fields, icons and layout selection.
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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m43s)
You could add tabs like 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 to look different. You don't want your component to look like it was built with JCB. I don't blame you because that is what makes components valuable. It's that they are unique. That is why JCB exists, it exist because I didn't want a cookie cutter component. [00:01:22](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) I wanted to build my own components that looks different from other and yet have similar behavior, because of my company's approach. None of the others out there could do that for me. We ended up looking like the one [00:01:42](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m42s) we are using. With JCB we constantly am trying to make sure that this is not the case, in fact that's why the site view area is a bit more difficult. We want to give you the opportunity to express your components functionality in a way that's unique to you. This might be a challenge but in the long run believe me it is the advantage, if you could do it without knowing any JavaScript or CSS or HTML. [00:02:13](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) Then anyone else can do it as well. So there is a little bit of incentive to get your head around some of these technologies. To be a good component developer and not knowing PHP, and those front-end languages is most certainly a risk.
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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m22s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m42s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m13s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s)
We'll have this common known Hello World Component open in the website, this is its dashboard. It doesn't have a custom dashboard and I'm not going to add one at this point, but I am going to take away [00:03:02](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m02s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) Go to the compiler and compile the Hello World Component, and reinstall. To demonstrate how that changed, our components behavior we're going to install. Go to components and click on Hello World link [00:04:17](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) 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 doesn't have a dashboard.
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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m27s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m17s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m34s)
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 have a snippets area as custom admin views. If we were to do the similar thing with JCB, we could select one of those, [00:05:04](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) say Dynamic and select one of those views, scroll down a bit until the compiler. We could make the compiler JCB's Dashboard. [00:05:20](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) I know it's 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 goning to compile it, and install. Before I install it, I just want to tell you what I meant by things 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) 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's a broken issue, but if we refreshed it, you will see that it removed it. It's just a catch thing there. [00:06:23](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s) The dashboard is gone and if I was to go and click on Component Builder, it will from now on open right at the Compiler, and will be it's default page, which is what we told it. The behavior is correct. We don't see any issues. If you were to go to the code, Dashboard is completely removed, all its files everything, [00:06:51](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m51s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) And design, a much more impressive maybe not a boring dashboard, can do so by simply using this new feature. I'm sure it's going to be a lot of fun. We refresh it, the dashboard is back and if you click on it everything is fine again.
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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s) 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](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) 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.