From f60b3595e51fcb6298a75ebc3b969556f4cd3ed7 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Mon, 20 May 2019 11:37:31 +0200 Subject: [PATCH] Updated 006 Basic Fields (markdown) --- 006-Basic-Fields.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/006-Basic-Fields.md b/006-Basic-Fields.md index 1520fcd..06597b7 100644 --- a/006-Basic-Fields.md +++ b/006-Basic-Fields.md @@ -14,4 +14,6 @@ This is just looking at the check boxes and other JSON items for the view and so Going back to just a normal text field. We would just leave it to default. These other options of encryption will be explained in a later video. [00:09:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m22s) You would possibly never use these. I had the need for them in a component that I had to develop, and so I added those features in. At this stage it's really quite difficult to implement. The basic one, which is actually more secure if you would ask certain people, is easy to implement. [00:09:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m50s) But the advanced one, which is for other purposes than just your normal encryption, is a bit more advanced and difficult to implement. So for now, if you're not that advanced in your programming skills then you should just avoid these. -This base64 is often used where you're storing code into the database. Most of component builder's areas where you can add custom scripting uses this base64 as the story method.[00:10:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) So if we are going to create an email field, we say that it should not be required, change data length\values to 255, leave store method to default, and change name to email. This is the name, surnames. [00:10:47](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m47s) (We don't usually do uppercase.) That's what is going to be used for the database. So this field all over the system and all the code is gonna be called by that name: email. Underscore. [00:11:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) And here the name The label Is what will be visually seen in the form So There we'll be adding enter email We'll leave the text size the same Max length is good I'm not gonna use the default field and it is if I sorry did [00:11:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) default is optional so I can just leave it out Description I'm gonna say add enter Email okay we're remove those we're going to leave required to False To ensure that it isn't required And then I'm gonna use validate email And [00:12:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m08s) I'm not gonna use the field option The field option is to validate against another field that they both equal Each other We don't need that for this field I'm here I'm gonna place demo Come on And I'm gonna leave those out So there we have an email field Now this validate [00:12:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m42s) Option There are some custom validating option in Joomla Email is one of them Then there is a way to create Your own validation And The way to implement that would be to write PHP up for that so you need to know You know what's needed to Write your own validation [00:13:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s) And to place it via the custom adding in our fields Sorry files To place it in the correct location Where the Joomla Form builder will be able to get that field validation type And add it into your field So if you know What I'm talking about Then you will know where to place it [00:13:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) And you'll later see that in the component itself it has an option to add custom Files And how to map it to the correct location Then you can use your own validation figure type there To extend on the validation options But currently component builder itself doesn't do you know extra custom validating Options it only uses Joomla's defaults Now that means you can also leave it out and then it doesn't do validation but it still will do filtering And here is a list of the available filters that Joomla has [00:14:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m08s) Ok so that's to create an email A field That is a text field You can target these text Fields with CSS and JavaScript respectively in the list and in the Single View The views plural is the list you View single Is the Single View will the edit view in the backend And all Both of these are most Is targeting [00:14:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m36s) The editing view and the listview in relation to its backend display If you extend the editing View to the front Then it will also load the JavaScript to the front But You cannot extend the list to the front you need to build a custom front Which we will eventually get to which is called site views Ok so this is primarily targeting your admin area with these scripts altough Like I said you can extend the the editing one which is this view the Single View [00:15:10](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m10s) To the front Which means it will also extend that to the front The way to Target it this field Whould be That is the ID Plus j form if you forget that You could look at any other Field And you'd see it says j form underscore And then the field name [00:15:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m38s) As a ID I'm just using fire bug to do that And So you that means you can just infront of this e-mail Just in front of that email you just put Not in here though But if you want to Target it In your Java Script in your CSS let me show you Are you there J4 [00:16:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) Underscore Now you can target it with CSS maybe color or something That's gonna make it invisible but you can target it anyway Let's make it black then And The JavaScript in the same way if you use j query Add j form underscore in front of the form name The field name sorry And the nice thing about this [00:16:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) Is that you can Add this group to the field And in any view where you use this field The Script will Follow it It will go along with it So it will be added to that View Dynamically you don't need to rewrite it everywhere So soon as you working For example I have a [00:17:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m16s) I have a script The means to show you That I'm using for numbers that will be Nice to show you hold on for a moment Ok found even a better option to demonstrate I had to create a repeatable field Which we will look at later as a advanced field But inside of that repeatable field I wanted to add a A date field [00:17:49](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m49s) Now Those of you that work with Joomla will know that you can currently Not add A date field Repeatable field So what we did And this is gonna Possibly be very impressing But let me show you I simply used a text field [00:18:12](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m12s) And I added that To it As you can see here we have PHP right in this JavaScript block And way to add PHP here is we would do the open brackets Question mark PHP And then again Question mark close There is an a PHP and we are adding the j Query framework Now this script I added to the repeated fields [00:18:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m45s) Script area not to the actual text field The reason why I didn't add it to the actual text field Because the text field is obviously gonna be repeated right so you gonna have 10 20 whatever text fields That that specific text field But with this code I'm able to Target Up to 50 repeats of that Field With [00:19:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m11s) that saying ok field number we said at least 50 And this JavaScript area is being repeated 50 times and incrementally And so the course date field Date again this ID I got from after creating repeated field I went in and looked at the ID That field Added a date picker Can I set the value of the datepicker And Basically added to the field [00:19:43](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m43s) And it works very well so this custom scripting area For JavaScript can also take PHP inside of it And JavaScript That will be then added to the view in which this field is gonna be used And it's I think it's very very nice feature that we have And it's very useful It's come in very useful for myself anyway Ok so we not gonna do that we just wanna use it for creating a simple email field So we will just click save or save and close [00:20:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m17s) and save and new So that's looking at creating a text field type now let's quickly do a list view a list field Sorry Not view So we click on list And we see that has An option aray or String here now the options are set with a zero [00:20:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m45s) and a pipe And then the name In a coma now that basically represents one item In the drop down So if you see this drop down here Then Then that is one item That is an item That is an item ok So each of those [00:21:05](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m05s) Would basically be represented between the comas The pipe Makes a separation between the value being stored in the database And a value being shown To the person accessing the form Now if that value is the same value So if it If you want to store in the database the same value as the one that Is being [00:21:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) Displayed then you simply drop off the bipe with the Initial values like that So it will say option 1 2 and then that should be 3 right Option 3 Now That is another Allowed way to use it [00:21:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m50s) Or you could say I want one option to be viewed as having not selected anything yet so if you wanted to say Say option 1 Ok I wanna add another option You would say Please Select option Comma By [00:22:15](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m15s) By adding leave that please Because it's getting too long here Select an option By adding a pipe without a value Is being treated as a nul So when the form when the dropdown is built Then it will it will be like nothing is selected Basically that option see select an option It's exactly what I did here although this is a custom field this type field [00:22:57](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m57s) I don't have one of those here Sorry But just that you know That will basically Behave the same as that one OK And then the other values would be selecting And I have a you can use it as it is Or is even a total different value like that it doesn't matter just know that it possibly We would make everything lowercase which if you put it that side of the pipe [00:23:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m29s) Now This could be left Out And you can fill in these information based on your requirements So that's how you set up a list field I hope that Shows you what is Possible But as you can see this list field isn't dynamic In the way that a custom field possibly can be [00:23:55](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m55s) You see the list field here you staticly set a few values that is unchanging and which should be selected But with the custom field type which will look at in a later video you can I have another tables values populated the list for you So as it's been created your list gets longer Dynamically and will still look at that and that is obviously available but this is a More static said it once and use it over and over where is there is actually Were there is also a dynamic list option which I will illustrate later Well that is creating a list view Let's [00:24:39](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) Quickly also look at a radio button Just very similar If you do Creating a radio button There is though one point to make here If you create a radio button You see that there are only two values And you can add more than 2 to the list but I always Think of it this way [00:25:04](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m04s) As soon as it becomes a list of values then use a list A radio button should at most have 3 selections or maybe at most 4 and really depends on the Length of the text So if it's yes no and maybe and No thank you oh my Yes No Maybe Not yet decided so that's four options Ok so that could be ok But as soon as it gets a 5th value possibly you should look at a list instead again with a radio button you can just leave it at You know the default storing method [00:25:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) And again the field Attributes are Very similar to the text attributes except for this Options array option here Then also liked the list Field type it is separated by comma And the store value and the display value are separated by a pipe Now it is important to note that You cannot use [00:26:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m06s) These Exclamation marks inside Sorry not exclamation quotation marks inside of your values If you wanna use Quotations inside you need to look up the html equivalent Of that quotation marks and use that And then it all It will work but if you add a Quotation [00:26:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m38s) Inside here it will literally break off The String right there and you have only one value show up so that's just that you know Ok so that is a radio button let's look at another one quickly colour Colour is quite straight forward it has a default value you need to remember to set the label and the name Always the type It must not be changed And if you select colour here And you do change the type You realise that the component builder will simply ignore what you did here And also back to back [00:27:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s) It will not Because it is a field which When we set up the field type The type itself Was said to be mandatory and unchanging remember And That's why you you cannot override it Everything that you said to mandatory and unchanging Will fall back to the setting that you said there in the field type and it even if you change it here it will not Change [00:27:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m44s) Ok then there is the description And if it's required and show on again the show on feature is something that is very nice As we go we will get to see it in action But you can have a field like For example A list field which has an ID 2 which should be selected So did this colourfield should show So you could say Let's say that this Fields name is Access Or [00:28:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m17s) What would be in our ideal Let's say View And then One Would be If in the view field The option with the Value Of 1 is selected then will this field only show up [00:28:39](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m39s) No you can have it if 1 Or 4 is selected Then it will show up And this implementation is your Joomla Default implementation of the show on field Unfortunately It cannot target multiple other Fields yet as far as I know And that's why we have in component builder our own implementation which is far more advanced And which will look at once we get to views [00:29:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m07s) Ok so that's just looking at colour And and Let's see Another one that's quite interesting is category I suppose In category You have Extension And this extension if you read it Is the name of the extension for which the category will be retrieved for example To list content categories use the value com content [00:29:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m42s) You can add also target 1 View Use the value Com underscore component Dot view What that means is that you can just by adding the category field to a View You Automatically add a category to your component so it will you don't need to map the category at all in fact you cannot map with even if you wanted to [00:30:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m09s) Joomla Already has a category component in place And if you add a category well this category type field to which we are looking at now obviously you can Add your own category View And then use a custom field to link it's values to you to other views But if you are gonna use Joomla's category implementation that integrates with your component Then this is the way you do it and then you don't write anything for the category area Because Joomla do that itself and adds it to your component dynamically and the only thing You need to do is actually an extension [00:30:48](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m48s) Add your components name now we haven't looked at your component name And that In fact I think we possibly come back to category When we have Come to you know that area of Sermon distributor and where we add in categories to certain views But that you know The categories Can also be targeting just a specific view instead of the whole component itself So it can only be related even to just one specific View [00:31:25](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m25s) Which makes it nice that means you can have a category for listviews you can have a category for that you can have a category for this you can have multiple categories in one component This is maybe an overkill but it's none the less possible and the way you do that is Simply your component name and the specific views name And obviously the view must be in singular You you cannot target a list view it must be a editable Single View So it is only saying View Ok so that's looking at category will look at category again later stage where we actually will implement it Editor is also a very Common Field [00:32:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m11s) Which were often using And the editor is what is in your Joomla content article manager is that big block in which you articles are placed To here you can add such a block to your component And There are some Important things like the buttons and if you read the description we have here it explains to you how it works And including the Hide option And what kind of editor you want to load Obviously You're preferrable one and the alternative one [00:32:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m44s) Desired or alternative And the button option here is really like I said you can read it Hide buttons based on what you selected And then you have a filter option here and required Basically again your normal attributes as with with other field types In Joomla Since most of them are extending your base field in Joomla and then Type in name and label and defaulted These things are also available to all the others So that's quickly the editor [00:33:24](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m24s) let's see Media Just make sure with media that you Select the correct directory If none is set I think it falls back to images but you can target with a specific directory inside of images And I can see there it's mandatory so you need to set it And you can only Target Images itself which is a limitation from Joomla side So that that directory starts at images right so says the attribute should be relative to the top level [00:34:01](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m01s) Images folder So that means let's see you you want to Target a specific folder inside images called foo Then you would add that they're like that And then preview if an image is been selected do you want Image to be able to be previewed By hovering over the side of the field and you just change it to true if you want to Again the show on feature is here in the other default concepts that we've already discussed Another one that's nice Is notes Notes is basically above a field or like here if we said this is a note [00:34:43](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m43s) that you see here And so you can add notes Around your fields And it has very nice Implementation right over there But you can read through And Yeah I think that will be all for us looking at field types Well basically looking at the basic field types or Common Field types [00:35:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If there is any other feel types with you felt You need help with Please look up the Joomla documentation since the implementation is more or less a straight forward Trying to not Redesign the wheel We simply trying to implement Joomla's way of doing it And if there is a field type you need more information on you can simply Go look at Joomla's documentation on that field type and if they don't have documentation then Can you can go into [00:35:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m41s) The field Like I said libraries there are 3 places to look CMS Joomla and Legacy in the libraries folder Is the places where these Fields of found So if you look under the CMS folder you got captcha field type chromestyle content editor so there's the editor So you wanna know if there is more attributes that [00:36:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m06s) Can be used in editor You can open the editor and look through the code And see the The attributes that are Being implemented across the board here it set height with $ value author value author field set So It Goes On And if you see that there is a attribute that we are not already targeting You can like I have to explain Go to the field type open it Add the attribute [00:36:37](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m37s) Add the name add the value set with it is mandatory obviously I think if we left it out it's not And whether it's translatable translatable is an important concept Which not all fields are translatable and And when a field is translatable Sermon sorry component builder basically translate it for you So If you look at The It's use this acronym for example You see I added there the label as acronym Then while component builder builds this field into your component it takes that value [00:37:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m17s) And it Converts it into a translatable string which adds it to the language file And it adds that In here so that if somebody updates the language file that updates everywhere in the system Which is basically means that Languages are implemented everywhere in component Builders components All the components it's building it translates label for everything that you said to be translatable So if we If we look at Let's go look at a certain Field type like text [00:37:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m54s) Any property That you said is translatable like here the label is yes And description is yes And that seems to be it Hint is also translatable it's also said to yes Means that Component Builder Will dynamically take hint And translated into a language string added to your language file And replace the XML with the language string like it's done here [00:38:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m31s) So That is How you can extend existing field types And create Fields with them I hope that is Good enough for you to get your hands into or to get excited about it in to use it Obviously having Fields might still feel very Primitive And so next up will be looking at [00:38:59](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m59s) Adding those Fields to views And basically making building your view Itself +This base64 is often used where you're storing code into the database. Most of component builder's areas where you can add custom scripting uses this base64 as the story method.[00:10:22](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m22s) So if we are going to create an email field, we say that it should not be required, change data length\values to 255, leave store method to default, and change name to email. (We don't usually do uppercase.) [00:10:47](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m47s) That's what is going to be used for the database. So this field all over the system and all the code is going be called by that name: email. Underscore. [00:11:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m09s) Here the label is what will be visually seen in the form. There we'll be adding 'Enter Email.' We'll leave the text size the same. Max length is good. I'm not going to use the default field. [00:11:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m36s) Default is optional so I can just leave it out. Description: I'm going to say 'Enter Email.' We'll remove those (readonly"false"; disabled"false".) We're going to leave required to 'false' to ensure that it isn't required. Then I'm going to use validate email and I'm not going to use the field option. [00:12:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m08s) The field option is to validate against another field that they both 'equal' each other. We don't need that for this field. Here I'm going to place demo. I'm going leave those (showon; onchange) out. So there we have an email field. Now this validate option (there is some custom validating option in Joomla. Email is one of them.) [00:12:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m42s) Then there is a way to create your own validation. The way to implement that would be to write PHP up for that. You need to know how to write your own validation and to place it via the custom adding in our files; to place it in the correct location where the Joomla form builder will be able to get that field validation type and add it into your field. [00:13:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m07s) So if you know what I'm talking about then you will know where to place it, and you'll later see that in the component itself it has an option to add custom files and how to map it to the correct location. [00:13:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m31s) You can then use your own validation figure type there to extend on the validation options. But currently component builder itself doesn't do extra custom validating options. It only uses Joomla's defaults. That means you can also leave it out and then it doesn't do validation but it will still do filtering. Here is a list of the available filters that Joomla has. [00:14:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m08s) + +So that's how to create a text field. You can target these text Fields with CSS and JavaScript respectively in the list and in the Single View The views plural is the list you View single Is the Single View will the edit view in the backend And all Both of these are most Is targeting [00:14:36](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m36s) The editing view and the listview in relation to its backend display If you extend the editing View to the front Then it will also load the JavaScript to the front But You cannot extend the list to the front you need to build a custom front Which we will eventually get to which is called site views Ok so this is primarily targeting your admin area with these scripts altough Like I said you can extend the the editing one which is this view the Single View [00:15:10](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m10s) To the front Which means it will also extend that to the front The way to Target it this field Whould be That is the ID Plus j form if you forget that You could look at any other Field And you'd see it says j form underscore And then the field name [00:15:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m38s) As a ID I'm just using fire bug to do that And So you that means you can just infront of this e-mail Just in front of that email you just put Not in here though But if you want to Target it In your Java Script in your CSS let me show you Are you there J4 [00:16:08](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m08s) Underscore Now you can target it with CSS maybe color or something That's gonna make it invisible but you can target it anyway Let's make it black then And The JavaScript in the same way if you use j query Add j form underscore in front of the form name The field name sorry And the nice thing about this [00:16:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m54s) Is that you can Add this group to the field And in any view where you use this field The Script will Follow it It will go along with it So it will be added to that View Dynamically you don't need to rewrite it everywhere So soon as you working For example I have a [00:17:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m16s) I have a script The means to show you That I'm using for numbers that will be Nice to show you hold on for a moment Ok found even a better option to demonstrate I had to create a repeatable field Which we will look at later as a advanced field But inside of that repeatable field I wanted to add a A date field [00:17:49](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h17m49s) Now Those of you that work with Joomla will know that you can currently Not add A date field Repeatable field So what we did And this is gonna Possibly be very impressing But let me show you I simply used a text field [00:18:12](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m12s) And I added that To it As you can see here we have PHP right in this JavaScript block And way to add PHP here is we would do the open brackets Question mark PHP And then again Question mark close There is an a PHP and we are adding the j Query framework Now this script I added to the repeated fields [00:18:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h18m45s) Script area not to the actual text field The reason why I didn't add it to the actual text field Because the text field is obviously gonna be repeated right so you gonna have 10 20 whatever text fields That that specific text field But with this code I'm able to Target Up to 50 repeats of that Field With [00:19:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m11s) that saying ok field number we said at least 50 And this JavaScript area is being repeated 50 times and incrementally And so the course date field Date again this ID I got from after creating repeated field I went in and looked at the ID That field Added a date picker Can I set the value of the datepicker And Basically added to the field [00:19:43](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h19m43s) And it works very well so this custom scripting area For JavaScript can also take PHP inside of it And JavaScript That will be then added to the view in which this field is gonna be used And it's I think it's very very nice feature that we have And it's very useful It's come in very useful for myself anyway Ok so we not gonna do that we just wanna use it for creating a simple email field So we will just click save or save and close [00:20:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m17s) and save and new So that's looking at creating a text field type now let's quickly do a list view a list field Sorry Not view So we click on list And we see that has An option aray or String here now the options are set with a zero [00:20:45](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h20m45s) and a pipe And then the name In a coma now that basically represents one item In the drop down So if you see this drop down here Then Then that is one item That is an item That is an item ok So each of those [00:21:05](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m05s) Would basically be represented between the comas The pipe Makes a separation between the value being stored in the database And a value being shown To the person accessing the form Now if that value is the same value So if it If you want to store in the database the same value as the one that Is being [00:21:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m29s) Displayed then you simply drop off the bipe with the Initial values like that So it will say option 1 2 and then that should be 3 right Option 3 Now That is another Allowed way to use it [00:21:50](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h21m50s) Or you could say I want one option to be viewed as having not selected anything yet so if you wanted to say Say option 1 Ok I wanna add another option You would say Please Select option Comma By [00:22:15](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m15s) By adding leave that please Because it's getting too long here Select an option By adding a pipe without a value Is being treated as a nul So when the form when the dropdown is built Then it will it will be like nothing is selected Basically that option see select an option It's exactly what I did here although this is a custom field this type field [00:22:57](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h22m57s) I don't have one of those here Sorry But just that you know That will basically Behave the same as that one OK And then the other values would be selecting And I have a you can use it as it is Or is even a total different value like that it doesn't matter just know that it possibly We would make everything lowercase which if you put it that side of the pipe [00:23:29](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m29s) Now This could be left Out And you can fill in these information based on your requirements So that's how you set up a list field I hope that Shows you what is Possible But as you can see this list field isn't dynamic In the way that a custom field possibly can be [00:23:55](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h23m55s) You see the list field here you staticly set a few values that is unchanging and which should be selected But with the custom field type which will look at in a later video you can I have another tables values populated the list for you So as it's been created your list gets longer Dynamically and will still look at that and that is obviously available but this is a More static said it once and use it over and over where is there is actually Were there is also a dynamic list option which I will illustrate later Well that is creating a list view Let's [00:24:39](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h24m39s) Quickly also look at a radio button Just very similar If you do Creating a radio button There is though one point to make here If you create a radio button You see that there are only two values And you can add more than 2 to the list but I always Think of it this way [00:25:04](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m04s) As soon as it becomes a list of values then use a list A radio button should at most have 3 selections or maybe at most 4 and really depends on the Length of the text So if it's yes no and maybe and No thank you oh my Yes No Maybe Not yet decided so that's four options Ok so that could be ok But as soon as it gets a 5th value possibly you should look at a list instead again with a radio button you can just leave it at You know the default storing method [00:25:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h25m41s) And again the field Attributes are Very similar to the text attributes except for this Options array option here Then also liked the list Field type it is separated by comma And the store value and the display value are separated by a pipe Now it is important to note that You cannot use [00:26:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m06s) These Exclamation marks inside Sorry not exclamation quotation marks inside of your values If you wanna use Quotations inside you need to look up the html equivalent Of that quotation marks and use that And then it all It will work but if you add a Quotation [00:26:38](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h26m38s) Inside here it will literally break off The String right there and you have only one value show up so that's just that you know Ok so that is a radio button let's look at another one quickly colour Colour is quite straight forward it has a default value you need to remember to set the label and the name Always the type It must not be changed And if you select colour here And you do change the type You realise that the component builder will simply ignore what you did here And also back to back [00:27:16](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m16s) It will not Because it is a field which When we set up the field type The type itself Was said to be mandatory and unchanging remember And That's why you you cannot override it Everything that you said to mandatory and unchanging Will fall back to the setting that you said there in the field type and it even if you change it here it will not Change [00:27:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h27m44s) Ok then there is the description And if it's required and show on again the show on feature is something that is very nice As we go we will get to see it in action But you can have a field like For example A list field which has an ID 2 which should be selected So did this colourfield should show So you could say Let's say that this Fields name is Access Or [00:28:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m17s) What would be in our ideal Let's say View And then One Would be If in the view field The option with the Value Of 1 is selected then will this field only show up [00:28:39](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h28m39s) No you can have it if 1 Or 4 is selected Then it will show up And this implementation is your Joomla Default implementation of the show on field Unfortunately It cannot target multiple other Fields yet as far as I know And that's why we have in component builder our own implementation which is far more advanced And which will look at once we get to views [00:29:07](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m07s) Ok so that's just looking at colour And and Let's see Another one that's quite interesting is category I suppose In category You have Extension And this extension if you read it Is the name of the extension for which the category will be retrieved for example To list content categories use the value com content [00:29:42](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h29m42s) You can add also target 1 View Use the value Com underscore component Dot view What that means is that you can just by adding the category field to a View You Automatically add a category to your component so it will you don't need to map the category at all in fact you cannot map with even if you wanted to [00:30:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m09s) Joomla Already has a category component in place And if you add a category well this category type field to which we are looking at now obviously you can Add your own category View And then use a custom field to link it's values to you to other views But if you are gonna use Joomla's category implementation that integrates with your component Then this is the way you do it and then you don't write anything for the category area Because Joomla do that itself and adds it to your component dynamically and the only thing You need to do is actually an extension [00:30:48](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h30m48s) Add your components name now we haven't looked at your component name And that In fact I think we possibly come back to category When we have Come to you know that area of Sermon distributor and where we add in categories to certain views But that you know The categories Can also be targeting just a specific view instead of the whole component itself So it can only be related even to just one specific View [00:31:25](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h31m25s) Which makes it nice that means you can have a category for listviews you can have a category for that you can have a category for this you can have multiple categories in one component This is maybe an overkill but it's none the less possible and the way you do that is Simply your component name and the specific views name And obviously the view must be in singular You you cannot target a list view it must be a editable Single View So it is only saying View Ok so that's looking at category will look at category again later stage where we actually will implement it Editor is also a very Common Field [00:32:11](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m11s) Which were often using And the editor is what is in your Joomla content article manager is that big block in which you articles are placed To here you can add such a block to your component And There are some Important things like the buttons and if you read the description we have here it explains to you how it works And including the Hide option And what kind of editor you want to load Obviously You're preferrable one and the alternative one [00:32:44](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h32m44s) Desired or alternative And the button option here is really like I said you can read it Hide buttons based on what you selected And then you have a filter option here and required Basically again your normal attributes as with with other field types In Joomla Since most of them are extending your base field in Joomla and then Type in name and label and defaulted These things are also available to all the others So that's quickly the editor [00:33:24](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h33m24s) let's see Media Just make sure with media that you Select the correct directory If none is set I think it falls back to images but you can target with a specific directory inside of images And I can see there it's mandatory so you need to set it And you can only Target Images itself which is a limitation from Joomla side So that that directory starts at images right so says the attribute should be relative to the top level [00:34:01](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m01s) Images folder So that means let's see you you want to Target a specific folder inside images called foo Then you would add that they're like that And then preview if an image is been selected do you want Image to be able to be previewed By hovering over the side of the field and you just change it to true if you want to Again the show on feature is here in the other default concepts that we've already discussed Another one that's nice Is notes Notes is basically above a field or like here if we said this is a note [00:34:43](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h34m43s) that you see here And so you can add notes Around your fields And it has very nice Implementation right over there But you can read through And Yeah I think that will be all for us looking at field types Well basically looking at the basic field types or Common Field types [00:35:09](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m09s) If there is any other feel types with you felt You need help with Please look up the Joomla documentation since the implementation is more or less a straight forward Trying to not Redesign the wheel We simply trying to implement Joomla's way of doing it And if there is a field type you need more information on you can simply Go look at Joomla's documentation on that field type and if they don't have documentation then Can you can go into [00:35:41](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h35m41s) The field Like I said libraries there are 3 places to look CMS Joomla and Legacy in the libraries folder Is the places where these Fields of found So if you look under the CMS folder you got captcha field type chromestyle content editor so there's the editor So you wanna know if there is more attributes that [00:36:06](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m06s) Can be used in editor You can open the editor and look through the code And see the The attributes that are Being implemented across the board here it set height with $ value author value author field set So It Goes On And if you see that there is a attribute that we are not already targeting You can like I have to explain Go to the field type open it Add the attribute [00:36:37](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h36m37s) Add the name add the value set with it is mandatory obviously I think if we left it out it's not And whether it's translatable translatable is an important concept Which not all fields are translatable and And when a field is translatable Sermon sorry component builder basically translate it for you So If you look at The It's use this acronym for example You see I added there the label as acronym Then while component builder builds this field into your component it takes that value [00:37:17](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m17s) And it Converts it into a translatable string which adds it to the language file And it adds that In here so that if somebody updates the language file that updates everywhere in the system Which is basically means that Languages are implemented everywhere in component Builders components All the components it's building it translates label for everything that you said to be translatable So if we If we look at Let's go look at a certain Field type like text [00:37:54](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h37m54s) Any property That you said is translatable like here the label is yes And description is yes And that seems to be it Hint is also translatable it's also said to yes Means that Component Builder Will dynamically take hint And translated into a language string added to your language file And replace the XML with the language string like it's done here [00:38:31](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m31s) So That is How you can extend existing field types And create Fields with them I hope that is Good enough for you to get your hands into or to get excited about it in to use it Obviously having Fields might still feel very Primitive And so next up will be looking at [00:38:59](https://www.youtube.com/watch?v=9NO2rKnC6Ug&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h38m59s) Adding those Fields to views And basically making building your view Itself