Component-Builder

00:00:00 Ok we've got a very exciting new Option available in JCB Make sure you're on version 2.9.3 for this We're at beta release now It's already working and the tutorial Is made during this period But Soon as we've got tested and stable we'll push it up I need to make this tutorial now Because those tested need to Know how it works ok 00:00:36 Basically The past this area field types Has got all the field types that Joomla has by Default And you could extended by adding other field types that Joomla already Has but except this one field called custom This field has always been a jack of all trades if you will You can do Basically almost everything Because it can extend 3 types of fields 00:01:14 And you can then dynamically generate the Input values So if you would open the custom field You would see It has a Option here called Extends And has three options here list radio checkbox And those are the three jform field subclasses that can be extended with This custom field 00:01:41 Default use a list and that always works well Now What we've done is we broken out of the box I made a previous tutorial explaining how custom Fields work And Also how you could expand it By adding Files Making changes to the core which I realize is not a good practice And so we took some counsel and we've decided to add 00:02:15 The option to expand custom Fields inside JCB without touching the core And I trusted this would Yeah be very powerful for some of you that wanna go Beyond the default So let's see how this works Basically All of these field types that are really exist Mapped pack to Joomla field types Now Except this one as I said 00:02:48 This one has special features It actually creates a new file Which Can be then Overwriting The default Joomla field types Now first of all The field types are declared in the library area of your Joomla core So let's quickly look at that. So if you look at your Joomla website you've got your 00:03:13 Root here administrator components and then you got libraries Then you have a Joomla Folder at the moment in Joomla 3 And it has a form folder with a Fields folder and here is a whole lot of fields Then there's also A source folder also again with a form folder and fields folder in A whole lot of other fields All of these Fields extend Some other field 00:03:45 So you can see that here for example jform field list is being extended by contentlang field Many of these field types are Joomla core related within the source where is the others These with in Joomla Are basically the default Fields that you see mapped out in JCB Now we are extending this field which extends the form field So you have basically jform field list that has being extended And then we also extending the radio Field this one jform field radio 00:04:24 And we are also so that you can see it is extending various field types So this is the place where you can come and say you know what I wanna create my own custom custom field like Beyond What JBS custom field already stands for so for our example we can Take note for example Let's say you want to Expand on the Note field type So you can come here And you can look at All it's values we get label 00:04:59 And the get input now the get input it should be This ok but the get label you might want to overwrite this In that case I mean you could You could take any of these field types Literally any And you can take any of these methods And I'll show you now How to use this to write your own custom field type right in the JCB Interface And you no longer limited to what we have done 00:05:33 You can use any one of these and make your own field type now there's a difference between a Field type and a field And I know in My initial tutorials I sometimes may have left a little confusion there but just that you know Is most certainly a difference between a field type And a field Field is what ends up being used in your component is a field type is what is used to build The field ok Enough of that We can extend meter 00:06:07 We can extend colour We can we can really extend anything I think to give it the best demonstration note won't be ideal I think I should instead Use list I know list already exist but list has get input and it has get Options And it has add options And It is it has 00:06:33 Multiple options in currently in JCB You Could Only target the get options area You cannot overwrite the input area and you cannot overwrite The Add options area So having said that we can Now actually do that So Let's show you how that's done first of all we go to custom Component type field type Custom we open it 00:07:13 Now we decide what are we going to do here what are we gonna extend now there's only one Value That you must set right Well there are few but this is the one that trips the switch ok And it's this name value You can call it anything you like But it must have an @ sign in it So you could say for example list @ And maybe 00:07:46 It's about Some kinda list that you you gonna be using often and it has specific purpose for now I'm just gonna call it Mine it's just simple So list@mine this @ Doesn't need to between doesn't need to be between words it can be in the beginning Can be in the end can be anywhere But it has to be there This little @ is what makes it different from every other field type And what makes JCB know that this is a custom custom field Beyond 00:08:18 normal custom so basically tells JCB this is your own custom field You can keep this values as it is You could take values away I would suspect that there are some values that You know you can't Remove like the type the name the label and this will depend on what field type your extending on right Most of the time the type must always remain because this must be a Unique value that eventually gets used if you're using a custom field if it's a Custom list field this cannot be list Remember Joomla already has a list field option type you know field type 00:09:02 So you must use unique names so this could be you know my list like that But it cannot be list ok now If it's adjustable you can tick this If it's not adjustable leave it unticked And all this You can Change the description here you can do whatever you like I'm gonna leave a lot of this right the way it is because it sort of makes sense Here We need to leave list there 00:09:35 And We we need to tell those who maybe have staff or other using JCB in house So the options are Only list because you are extending list you want This to work in list you might wanna use the table Placeholder Component placeholder The View placeholders That's all up to you Let me I mean you can read here how to access the table value in your PHP 00:10:13 That you're going to add I'll show you a little of that again let's just keep that in the back of your mind one little Reality though Is the button option do not work here If you want it to work You must manually code it So best Remove it OK So I'm not gonna need all of these above values 00:10:40 Because I'm gonna Well you know what Let me leave This one And maybe yeah Remove the rest Just to show you how it works You can remove this I'm gonna leave Prime now you see that there is this PH type PHP Every one of these values represent a line in the code 00:11:04 And this value here is what's gonna show you in the interphase what the code is for So Basically you need to update this area for your new implementation Now All the options available because obviously you might wanna have different areas for different code Right So Let me show you how the code gets taken into the compiler So Just before we do that all of this actually ends up in the value called type PHP 00:11:40 Ok even 19 all of these values It gets It's basically like 4 lines 5 - 6 you need to add each line On its own number You can't Have a just like this you can't do that now multiple lines this area only takes one line at a time That was unfortunately how we ended up doing it it's not a problem though because Lot of room here You can add as many lines as you like Ok 00:12:11 So Before we continue with this area let me go show you what is available because obviously Like I said this is one position So that show you that JCB now has a new value called PHP field array The first option is the one Which we'd looked at already This basically Is Referring 00:12:40 To let me show you to Type PHP this value here because it doesn't add anything value a means type PHP a So this value Represents that value And so it goes on all the way to n and then x so there's also a X PHP type So you have basically 16 fields 00:13:12 Input Fields available in your custom field area You could target the normal basic default one which Now looks like this right you Saw that 1 and 2 and 3 and 4 or you can add a second Value Make it a And then you have one Sorry One and two and three and four and as many as you need lines so you have a PHPa phpb c, els all the way and that's all the available Placements 00:13:50 Now I'm gonna add 3 so you can see it being demonstrated we couldn't use the First And then these two you could use any There's no real it's just what is available at the moment I thought 16 is way more than that we need but Ok Let's say we want to Target just 3 areas in This Because we gotta overwrite Certain methods And 00:14:17 Maybe This This this value This value Is being done dynamically by No sorry not this value This value and the Obviously what is being extended Is being done dynamically 00:14:35 So that means you only need to Target this either this Area Or this area OK That's that's the areas you you might want to Target Ok So Now You can use these various Values to Target those various areas 00:15:03 And to show you exactly how that will work out let me demonstrate it to you in the interface So first of all I'm gonna choose this this Type PHP To overwrite the Method to get the field options So I want to actually add the comment to that so I'm gonna start by replacing That with a comment Beginning of the comment 00:15:33 Second one I'm copy pasting this So you Just the second one Then I want a little space there So just paste that in there And then the next comment line Which is basically the Return value 00:15:57 then The next one is I'm gonna add this Basically copy this from Joomla I'm leaving that there just for my own understanding And then close the comment area And then open the method which is a protected method Get Options Now 00:16:26 I don't think I want to have this protective I'm gonna make this public and if if you Public at the moment And that is because I like I explain in the previous tutorial of custom fields This function This method is being called To populate Many selections across JCB Now I see that the new list method since Joomla 3 we look at that Since Joomla 3.7 it has this 00:17:02 Class called get underscore get a magic class to actually get the Options And I should actually update JCB to Target this this method instead And then That will be the Better way to go about this But at the moment it doesn't do that And so It's just best 00:17:31 To just make this Public for now ok So I'm making it public Then I am Adding the opening brace for the method For now please cause I'm just demonstrating this I'm gonna add a little Comment Inside of the method 00:17:56 And then I'm just going to close the method And remove All other Lines so basically have 10 lines Now to make sure that this is what shows up in the UI I'm gonna replace all these Notes With the Same Needs to be the same for this For this 00:18:23 Collection of code So we have our first collection or method then set Now the second one Before I continue because I know Something can go wrong here So I'm gonna save save as copy we opened the custom field to start with I'm gonna call this My Own Cust 00:18:47 Cust custom list field OK And maybe just paste that in here as well And save as copy So now I have a new Field type called list@mine And Basically has these values 00:19:08 Including This Now I can Over here Add a placeholder 123 Come_ component 123 This is a place holder 00:19:33 Which whatever value the user puts in here Will be updating This place holder over here so I'm just gonna do that just to show you how that happens And I'm also gonna explain to you where this comes from and how you can Expand on this Ok so Now we wanna do a Second one And We gonna call this 00:20:04 Type Must be type PHP always Then a Underscore One because this is the first line of that So again I'll start by it is opening the comment and add a few lines here I'm going to need a few of them And then I'm gonna Add the next comment line And you see that every time I'm 00:20:33 Also adding the tab space here Because I want this to look you know like it was coded So I'm adding the 10 of spaces in And Adding these comment lines first Hey now we gonna oh Close the comments And Now I'm going to open the Method 00:21:15 It's phrase I want it to Get the parent HTML as well so I'm just putting a little note there And then grabbing the parent HTML And then another note that sort of tells Everyone using this type That they can now expand With their own code And then I'm going to leave a blank one Which is just 00:21:45 For them easy to start typing and then I'm going to close the method Now I need to go up here I have to copy this Type A Make it 2 3 4 a course you need to do all this just once And then this type is reusable So you could after you have done this 00:22:10 You can reuse this type over and over so you need to think generic need to think Don't make it to type specific if you do you're gonna have to make many I tried to make things that easily can be reused so that's sort of a little Caution ahead of time because I know that some of field type you want to make it for a specific project Well think about the option of the Making it to be reusable in 00:22:46 Multiple projects Ok so I'm gonna use that first comment line to Just Give us just wait Iet's make it More than That first line Including the 2nd Like that 00:23:09 I'm gonna use that as the The identifying note It needs to all be the same for this PHP A Code group You could do a PHP.... B....,C as I showed you earlier there is Basically Wait wait Basically all these available BCD and you basically just need to Add it in front of this PHP type 00:23:51 A and so forth don't exceed those that are available at this point If you want to see What is available you go to the Joomla Component helper class this is the Joomla Component Helper class And in it we have a add a PHP fields allowed So I'm gonna just do this too, I mean you get the point we got The first one which is the basic default and then A And you wanna set this values adjustable And mandatory Obviously is not translatable so we can just make this to be adjustable You make it mandatory it might not come out right 00:24:52 So just leave that unticked unadjustable Ok Save and close If we now go to a field And we create a new field And we will see if we're go around to list there's now list@mine It loads that Settings that we've sent And it loads to areas 00:25:21 you see methods to get the input markup for a generic list ,that's the comment And here is the code Ready for you to just start typing in that specific Part if you want to change this area here And here again is the one for the other The get options Again it also starts with that So I'm going to add this place holder just in here as well just for demonstration I'm not gonna add any code I mean you need to know how to do that you need to know how to add that code 00:25:58 Otherwise just go back to the basic default Custom Field option it has an amazing ability already so this I'm gonna Leave it my list simply makes sense I'm gonna also make this my list And here I'm just gonna say A Label And I'm gonna leave the rest just default And save as Need to add this at 00:26:31 Top here Also set the database value let's make it Varchar No Whatever is making sense with the values that your gonna return from your get options right that's what you And then save and close and you got your field Which basically is build on the list@mine And now you can add it to a Admin View quite easily I'm just gonna dump it to the demo Admin View Let's put it left 00:27:17 In the Details area make it number 1 Get a a label shows you the field type that is extended and I think that's enough Let's save and close And let's compile See what happens Before we do I wanna now go and show you the whole bit of what happens in the compiler So that you can understand 00:27:50 Some of that Dynamic placeholder concept I've being Pointing at So over here if I go up there's a method here in the JCB 2.9.3 Call set custom field type file And it has a replace array The replace array Gets the table value if it's set If it's not set it's an empty value 00:28:21 And it also gets The component value And add to it too com underscore component And Checks if it's there in makes it safe and everything And then it has the component, an uppercase views and view plural and And these are all replacement placeholders That when we start here at the bottom 00:28:48 We start loading the code we are actually using The replace Value to Actually update the PHP So all those place holders dynamically get updated And as you can see We start the The PHP type And we are loading it 00:29:15 One upon another And again add it eventually to a placeholder and it's maybe not necessary to explain all this but Basically it is building The values for the file and is adding it there So let's let's see how that file came out So I'm just gonna compile it here And then Install it And then this quickly go to demo Looks 00:29:54 new and it says there Label I have a problem here Of course if we can open that We have a few things to fix so there is our field area there is my list to custom field So we see if we bring in the list class It's extending the list calling it my list Your options don't return anything 00:30:24 It's updated to demo component See there And here also your input we didn't even return HTML That's what we should have done So this should... Remember to return the HTML we're gonna save this we can go back to JCB and just Make some change to that we can see it all happen And here if we refresh this now Will see that there is HTML for that area 00:31:01 Now let's tweak it a bit I said I was gonna go and do much of that but just so that you can Get the hang of it I'm gonna go back to the actual field types going here And just make a little fix to my field type because I realised I need to Help others do this right Gonna add two more fields I'm gonna just Name them here 15 00:31:34 16 and they make this 17 I'm also gonna do so I add it Basically remember HTML I've added those I'm also gonna do something like that in The first one and add also three more Fields here 1 just a little extra Space Other Remember the return options and then here just Return options I think I should add a little thing 00:32:10 Here So now we have Options Array, Build Options our little comment And we need to add a few these 10 11 12 Ok now also just Move this comment to all of them I know this is tedious but this is really at the end of the day not that big of an issue just to add this little things 00:32:49 So here we go we've expanded it a bit made it more user friendly and save and close Now let's go back to that field Add a label And I'm going to I'm going to click away from it Click like this one and then save it And then take it back To that one Change a 00:33:22 Few things here again Just leave all defaults now you see it loaded The new improvements And also here So I'm just gonna for our purpose say We need to build the options of course in a specific way And that's the code that you should know how to write but I am going to add a little bit 00:33:53 Of Custom script here just little Just option 1 and option 2 This obviously you can get these values from anywhere but you need to load it into options With their J HTML Underscore select option implementation So that it loads everything correctly And then return here I'm not gonna make a change just maybe let me just do something for the fun 00:34:27 of it and add a little text here OK this should work So I'm basically added a little space And then That little bit of text To the input value You can Do whole lot of things here if you What you doing 00:35:04 And let's compile and see how it looks So now if we refresh that we have option 1 option 2 And here's our text "Hi there", that's how easy it is now to expand custom-ally Any type of field this is helpful if you have any questions Please ask it on the Forum and Though Just Quickly to show you the file That's how it came out of the file So again you got your 00:35:47 extending the list Because you left at value over here let's just look at that You left this value over here to be list you must always leave this extends This is a must value So the app value and this and of course The type The name these are the values that you need to keep there 00:36:27 Because if you want to Take it out In the let me just go there This get fields You'll see That we are testing whether the extent value exists And Then We are coming down here and we testing this 00:36:51 own custom is what that at triggers this value to exist If you by accident leave the button there will leave you a note that the button is not supported in this area And Then we basically The type Is determined By Custom that's not important over here you see we used the extends value 00:37:21 To update this To place holders These two place holders Are what is used To to populate This value here And that's value there If you if you mess up with this extends value It will mess up these two values So you can see that it here it extends the J form field extends 00:37:49 What you put in list radio in whatever of these Field types you gonna extend Need to make sure that this is the correct value that you add as an extensive value And then the PHP gets added here in the type PHP There is a type,the type is the name sorry no It is this value of here This type value That also must be there so it's the name value the type value of course depending on what type of field you're extending 00:38:23 Then you have a few these And then This extends value Is a must This Prime PHP still functions just like it would in a normal custom field you can read it here You could leave that in or leave it out depending on yourself if you left it in it all function The same way as in the custom field So the place holders that you can add here We have component Looking at our code in the compiler 00:38:56 Just go there Is again We have the text and we have the ID And we have the code text and code And the view type and type And yeah these are the place holders now they correlate to the custom field so If you start Close out here Go back to field types 00:39:23 If you start With a custom field Opening the custom of field You'll see That we have Down here Table Component We have Field value field 00:39:41 So if we look at this There is The value field and the key field these two is the name and the ID So the value field and the key field These two values you need to leave them like that because then They will generate these placeholders see text And ID So if we look at the code We see there is a 00:40:14 Text and ID value And they correspond to whatever the user puts in these values So that's the field type you might wanna leave these placeholders in there And as well as the component and the table These view values are also useful but They're not really particularly practical when it comes to extending your own custom field But Like I said you can come in here look at the code Make changes run it and here you could do the var 00:40:52 dump But that and then just grab the replace array Like that And safe then compile your custom field wherever you implemented it And Your own custom field Then check All these Place holders These place holders the B And D place holders basically referred to those brackets 00:41:22 And the placeholder that you see these And this Basic refers to the hhh these hashes there So if you dump this replace array you'll see the available Place holders That you could use in your code dynamically updating values based on those placeholders If you didn't follow what I've explained then maybe it's just best you don't even worry about that It can work without you using placeholders so you can just dump these so I would always say start with your default custom 00:42:04 Field type and then save as copy give it a @mine or whatever you want Save as copy and then start expanding on it And changing it changing this , you see these codes Changing whatever it says here But do insure to add the @ if you don't you just did this you gonna break stuff Because custom is already there and the You wanna make sure that JCB knows this is your own thing so that @ Is important 00:42:44 And I think that should be it