From a4e614e1dfe5faf3ac88704b575b575125fabef9 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 19 Sep 2019 14:02:53 +0200 Subject: [PATCH] Updated 060 The custom dashboard option in JCB (markdown) --- 060-The-custom-dashboard-option-in-JCB.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/060-The-custom-dashboard-option-in-JCB.md b/060-The-custom-dashboard-option-in-JCB.md index 6f0fa61..25b269a 100644 --- a/060-The-custom-dashboard-option-in-JCB.md +++ b/060-The-custom-dashboard-option-in-JCB.md @@ -1,8 +1,26 @@ # THE CUSTOM DASHBOARD OPTION IN JCB - +### Adding Your Own Custom Dashboard To Your Component [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. So I thought Well let's do it quick tutorial just about this. So in the past all components basically it's layout ended up as the dashboard looking like this. Obviously with your own icons But you could do only about what you see here And this is still the default dashboard So if you don't add your own You're basically Build this for you Based on your Fields based on it's icons and layout selection So you could add tabs like we have here And these tabs are quite powerful [00:00:49](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m49s) You can really Add A lot of Functionality within that But for some of you this might be boring and not really what you would like in fact you wanna look different You don't want your component to look like it was built with JCB And I don't blame you because that is what makes components Valuable Is that they are actually unique And that is really 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 actually look different from Each other in yet have similar Behaviour because of my company's approach But None of the others out there actually Could do that for me They all We ended up looking Just like The one [00:01:42](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m42s) We were using So now with JCB We constantly Trying to make sure that this is not the case in fact that's why the site view area is it a bit more difficult Because you wanna 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 with 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 like a little bit of a Yeah incentive to sort of Get your head around some of these Technologies And any case to be a good component developer and not knowing PHP And those Front-end languages Is most certainly a risk ok Well So without any further ado if we were to go [00:02:41](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m41s) We'll have your this common known Hello World Component and if we would to Open it in the website now This is it dashboard Now it doesn't have a custom dashboard And I'm not gonna add one at this point but I am gonna Take-away [00:03:02](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m02s) The dashboard it has and So then it's sort of behaves Like the article manager for example If we would go here there's an in the components area there is a new tab or rather a tab called Dash&Install You see here it has the default And then here 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 actually gives you a list of all the available Sites Views that are linked to the component And that would be custom admin views As well as Normal admin views it will show you a list of them all And you can then select Any of those And that will become the new dashboard for your component So basically save and close [00:03:52](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m52s) And go to the compiler and compile the Hello World Component And basically just reinstall So to demonstrate how that changed our components behaviour So we're going to install Then we will Basically go to components and click on This 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 And so it loads the listview and the dashboard is gone So from this point forward Your Hello World Component Actually Looks like this And it doesn't have a dashboard Now you could use a custom dashboard Which and In our case If you [00:04:42](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m42s) If you're using A component That has custom admin views So JCB has The compiler and the gets Snippets area as custom admin views So if we were to do the similar thing with JCB We could just as well Select One of those [00:05:04](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m04s) Obviously say dynamic And select One of those views So scroll down a bit Where is it There The compiler we could make the compiler JCB's Dashboard Now [00:05:20](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m20s) I know it's gonna break a lot of things somehow I suppose but let's try it out So we got JCB now we switched it to have another dashboard Instead of the normal dashboard The compile it here And then install Before install it I just want to tell you what I meant by things may break We got a bunch of times here And all these tabs are getting information and making it available To you so you could just get information from us [00:05:50](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m50s) And we got the version here in the last build date and Yeah so you are basically gonna remove this whole area So or we just did If I click on this install we see first It tells us that this language string is no longer here And at first it seems like it's a broken issue but if we refreshed it You see that actually removed it And so it's just a cash thing there [00:06:23](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m23s) So basically the dashboard is gone And if I was to Go here and click on Component builder, it will from now on open right at the compiler And that will now be it's default page Which is what we told it And so the behaviour is correct We don't see any issues And actually if you were to gonna go to the code Dashboard is completely removed all is files everything [00:06:51](https://www.youtube.com/watch?v=tU7TeYn1Djo&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m51s) And so no trace of it is left Obviously to undo this you could Simply say default again And save and close And then compile it again And it will place the dashboard back So That's not really any harm done to the component But for those of you wanna 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 now do so By Simply using this new feature And I'm sure it's gonna be a lot of fun So there we refresh now Are dashboards back and if you click on it There we go everything is fine again Shoo away thanks for watching +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. + +### 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. + +### 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. + +### 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. \ No newline at end of file