006 Basic Fields

Basic Fields

In this tutorial we are looking at creating fields. There are two groups. There are easy, plain, or common field types Which we will be looking at first. 00:00:15 Then there are also advanced field types which are primarily your custom field types, which we'll only look at after we have covered the admin views and how you connect fields to views. It's quite important because those custom field types really only makes 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 too 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 There 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. Not even for an alias will you use that 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 the 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. Now 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 So that's the default switch. In the switch it takes what you've set. If you had set it to JSON, it will use JSON; if you set it to base, it will use base; if you've done an encryption it will use that; but if you've 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 going make sure it's safe as JSON because Joomla doesn't deal with check boxes correctly. In fact it tells you that has a warning on their pages.

The Component Builder knows that and so well I know that is why I coded it in so that it will anyway make sure that we storing it JSON Object and not just the array itself And so This is just looking at the check boxes and other JSON items for the view And So for most things 00:07:47 That we are looking at the UI 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 and now That means if you're not a PHP developer And you cannot figure out where this line Or this that particular area of code is being addressed Then obviously this is to your own Disadvantage But if you're able to Read PHP 00:08:20 Then the compiler itself leaves in the In the XML files and Another files that you are building wait I'm way off line here 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 And that will also help you to determine what you need to change for it to possibly work if it isn't working Now there is no way for me to avoid this And the reason why there is no way to avoid them by Joomla themselves Ok so going back to just a normal text field We would just leave it to Default These other options of encryption We will explain in a later video 00:09:22 And possibly will not Ever use these I had the need for them in a component that I had to develop And so I added those features in And at this stage it's really Quite difficult to implement If you do not have many Let me put it this way The basic one Which is actually more secure if you would ask certain people 00:09:50 Is easy to implement But the advanced one Which is for other purposes than just your normal encryption Is a little 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 Builders areas where you can add custom scripting Is using this base64 00:10:22 As the story method Ok so now here if we gonna create an email field And I'm gonna say that it should not be required I'm gonna change this to 255 Leave this to default Change that to Email This is the name surnames We 00:10:47 Uzusally don't do uppercase And then That's what's gonna be used for the database right So this field All over The system and all the code Is gonna be called by that Name Email Underscore 00:11:09 Sorry Lowercase Email 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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