006 Basic Fields

Basic Fields

In this tutorial we will look at creating fields. There are two groups. Easy, plain, or common field types which we will be looking at first, and advanced field types which are primarily your custom field types, which we'll look at only after we had covered the admin views and how you connect fields to views. 00:00:15 It's quite important because those custom field types only make sense if you see the relationship between views and fields.

First we'll look at the more common field types. Not all of them, of course. I'm just going illustrate to you a text field type and a list field type. 00:00:54 All the other sort of fields follow the same kind of implementation.

So let's create a new field type. We would select text as our first illustration. It will automatically load the fields here set on the field types default settings we looked at previously. When it comes to this information here you need to have a good background on MySQL to understand what a varchar, a text, a medium text, a long text, and so on, exactly means. 00:01:29 These are basically the data types in relation to the database. I have now added the feature of you being able to change that because I want to liberate your ability to develop applications that are more advanced than a cookie cutter kind of component builder. 00:02:04 This component builder wants to leave enough room for you to make very advanced choices. So the more I constrain it to a sort of "just click here, there; don't know any code, just go on and build something," the more I am going to frustrate the real developer who wants to design something more advanced and versatile. 00:02:25 hasThere are component builders out there that probably have done that, but I want to give you enough tools to be creative which means a little bit more complexity all over. But if you know PHP and have worked with PHP in relation to SQL or any other SQL database connections via Java or any other language, you will know that there is such a thing as a data type.00:02:59 You will know that it has a length, that you can set some default value to it, and that you can decide whether it's a key or a unique key. Just realize that if you set it as a unique key (as an Index type) it means that specific field will only allow a value once and if that same value is placed in it, it will be an error. 00:03:38 You hardly ever use that. You won't even use it for an alias because the alias implementation in Joomla deals with the duplication within the model when it saves the information. It actually checks whether there is an alias in the database and implements the alias so that it doesn't conflict. So even there you do not need that feature. But it is available and you might see a need to use it, so I added it there.

Then your normal null switch. (Whether the table should be null if it's empty.) 00:04:15 Usually you would use one of these default values and then set it to "not null."

Now the storing method. Most of the time you will use default. This is because these other methods require much more knowledge of what you are trying to achieve. If you do have that knowledge, then I would say that JSON would probably be used when you are storing an array of items to the database. 00:04:42 Yet when you are using list (which we'll look at just now,) you wouldn't need to use JSON because Joomla's implementation of the list field type deals with arrays. 00:05:09 If the list allows for multiple selection then you need to use JSON. 00:05:37 If the field type is check boxes it will be going here and it will add it. If there are multiple selected, it will add it as a JSON option object if the type name is tag. 00:05:56 So if you are using a tag field type it will not go in here no matter what you do. If it's not zero, which is default, then it will fall back onto this. If it is check box and you haven't selected one of those features.... 00:06:22 For example, if you haven't selected one of these JSON base64 and it is a checkbox field type, then it will fall back to JSON. 00:06:47 That's the default switch. In the switch it takes what you've set. If you set it to JSON, it will use JSON; if you set it to base, it will use base; if you had done an encryption, it will use that; but if you had set none and it is a checkbox, it will set it to JSON even if you had set the checkbox to default. 00:07:12 We are still making sure it's safe as JSON because Joomla doesn't deal with check boxes correctly. In fact it tells you that there is a warning on their pages. The Component Builder knows that and so I coded it in so that it will make sure that we storing it as a JSON Object and not just the array itself.

This is just looking at the check boxes and other JSON items for the view and so for most things that we are looking at the UI. 00:07:47 If we are not sure how the implementation works, looking at the code is the quickest way to actually understand what would be the way to select. That means if you're not a PHP developer and you cannot figure out where this line or this particular area of code is being addressed, then obviously this is to your own disadvantage. But if you're able to read PHP then the compiler itself leaves in the XML files and other files that you are building. 00:08:20 In other models of things that it's building it is showing you in which file it is actually building this part of this group and exactly on what line. So that is the way for you to get in there and see exactly what is being done. 00:08:52 It will also help you to determine what you need to change for it to work if it isn't working. There is no way for me to avoid this. The reason why there is no way to avoid them, (...) by Joomla themselves.

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 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 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 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 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 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 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 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 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 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 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

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 view; view (single) is the single view that will be the edit view in the backend. Both of these are targeting the editing view and the list view in relation to its backend display. 00:14:36 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 view to the front. You need to build a custom front which we will eventually get to which is called site views.

So this is primarily targeting your admin area with these scripts. Although you can extend the the editing one, which is the single view, to the front, which means it will also extend that to the front. 00:15:10 The way to target this field would be: that is the ID plus jform. If you forget that, you could look at any other field and you'd see it says jform_ and then the field name as a ID. 00:15:38 I'm just using fire bug to do that. So that means you can just put that in front of the email. Not here though if you want to target it in your Java Script or in your CSS. Let me show you. You'd add #jform_email. 00:16:08 Now you can target it with CSS. Maybe color or something. JavaScript is done in the same way. If you use jQuery, add jform_ in front of the field name.

The nice thing about this is that you can add the script to the field and in any view where you use this field this script will follow it. 00:16:54 It will go along with it. It will be added to that view dynamically. You don't need to rewrite it everywhere. For example, I have a script that I'm using for numbers. 00:17:16 Here is an even better option to demonstrate: I had to create a repeatable field, which we will look at later; it's an advanced field. Inside of that repeatable field I wanted to add a date field. 00:17:49 Now those of you that work with Joomla will know that you can't currently add a date field to a repeatable field. So what we did (this is probably going to be very impressing) we simply used a text field and added that to it. 00:18:12 As you can see here we have PHP right in this JavaScript block. The way to add PHP here is to do the open brackets, question mark, PHP, and then again question mark, close. There is an a PHP and we are adding the jQuery framework. Now this script I added to the repeated fields script area not to the actual text field. 00:18:45 The reason why I didn't add it to the actual text field is because the text field is going be repeated. So you are going to have ten, twenty, or whatever of that specific text field. But with this code I'm able to target up to fifty repeats of that field. 00:19:11 With that field number we said at least fifty, and this JavaScript area is being repeated fifty times. So the course_date_fields_date is an ID I got from after creating the repeated field. I went in and looked at the ID of that field, added a datepicker, set the value of the datepicker, and basically added it to the field. 00:19:43 It works very well. So this custom scripting area for JavaScript can also take PHP inside of it (and JavaScript) that will then be added to the view in which this field is going to be used. However, since we are just using it for creating a simple email field, we will click save; or save and close or save and new. 00:20:17

So that was looking at creating a text field type. Now we'll do a list field. We click on list and we see that it has an option array or string there. The options are set with a zero, a (...), the name, and a coma. 00:20:45 That basically represents one item in the drop down. So if you see this drop down here then each of those items would basically be represented between the comas. 00:21:05 The (...) makes a separation between the value being stored in the database and the value being shown to the person accessing the form. If that value is the same value (if you want to store in the database the same value as the one that is being displayed) then you simply drop off the (...) with the initial values like that. It will now say option one, option two and option three. 00:21:29 That is one permitted way to use it. 00:21:50 You could also say that you want one option to be viewed as having not selected anything yet. So if you want to add another option you would type "select an option,." 00:22:15 By adding a (...) without a value it is being treated as a null. So when the drop down is built, it will be as if nothing is selected. 00:22:57 Now the other values would be selecting. You can use them as IDs or use a totally different value. It doesn't matter. Just know that it would possibly make everything lowercase if you put it on that side of the (...). 00:23:29 You can fill in this information based on your requirements. So that's how you set up a list field.

I hope this 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 You see the list field here where you statically set a few values that is unchanging and which should be selected. But with the custom field type you can have other tables values populate the list for you. So as it's being created your list gets longer dynamically. We will still look at that and it is obviously available, but this is more static "set it once and use it over and over" whereas there is actually also a dynamic list option which I will illustrate later. 00:24:39

Let's look at a radio button which is very similar to creating a radio button. There is one point to make here however. If you create a radio button you'd see that there are only two values. You can add more than two to the list, but I always think of it this way: 00:25:04 as soon as it becomes a list of values then use a list. A radio button should have four selections at most. (It depends on the length of the text.) As soon as it gets a fifth value, you should look at a list instead. Again, with a radio button you can just leave it at the default storing method. 00:25:41 Again the field attributes are very similar to the text attributes except for the 'options array' option here. Then also like the list field type, it is separated by comma, and the store value and the display value are separated by a pipe. It is important to note that you cannot use quotation marks inside of your values. 00:26:06 If you want to use quotations inside you need to look up the html equivalent of those quotation marks and use that. Then it would work, but if you add an quotation inside, it will break off the string and you would have only one value show up. 00:26:38

Let's look at another one. Color is quite straight forward. It has a default value. You need to remember to set the label and the name. The type must not be changed. If you select color here and you do change the type, the component builder will simply ignore what you did. 00:27:16 The reason for this is because we had set the type itself to be mandatory and unchanging when we had set up the field type. That's why you cannot override it. Everything that you set to mandatory and unchanging will fall back to the setting that you set there in the field type. Even if you change it here, it will not change. 00:27:44

Then there is the description, and if it's required, the showon feature. You can have a list field which has an ID too which should be selected so that this color field should show. So you could say that this field's name is 'view' and 1. 00:28:17 Only if the option with the value of 1 is selected in the view field will this field show up. 00:28:39 You can have it if 1 or 4 is selected then it will show up. This implementation is your Joomla default implementation of the showon field. Unfortunately it cannot target multiple other fields yet, and that's why we have our own implementation in component builder which is far more advanced. 00:29:07

Another one that's quite interesting is category. In category you have extension. If you read it, this extension 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 You can add also target one view, use the value 'com_component.view.' That means that by adding the category field to a view you automatically add a category to your component so you don't need to map the category. In fact, you cannot map it even if you wanted to. 00:30:09 Joomla already has a category component in place. (You can add your own category view and then use a custom field to link its values to other views.) If you are going use Joomla's category implementation that integrates with your component, this is the way you do it. You don't write anything for the category area because Joomla do that itself and adds it to your component dynamically. The only thing you need to do is an extension, add your component's name. 00:30:48 The categories can also be targeting a specific view instead of the whole component itself. So it can be related to just one specific view which means that you can have multiple categories for one component. 00:31:25 This is maybe an overkill, but it's none the less possible. The way you do that is simply, your component name, and the specific views' name. (The view must be singular. You cannot target a list view; it must be a editable, single view.)

Editor is also a very common field which we are often using. 00:32:11 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 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 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 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 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 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 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 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 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 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 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 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 Adding those Fields to views And basically making building your view Itself