023 Adding a custom time field

ADDING A CUSTOM TIME FIELD

Fields

• How to set up a Time Field

In programing time must always be linked to a date, because time is stored as an integer, and therefore if you only want a field where only a time is set, for instance 5:15, then it is suggested that a normal text field should be used and create a Regex method.00:00:21 This could be done via a custom form filter. 00:00:51

• How to set up a Custom Form Filter

To illustrate: Use this'sermondistribitor' component, and go to 'modules', and then 'rules' may be seen. In there a 'rule' can be created. That is used as the filter name. 00:01:23 Create a file in Component Builder and place it in the Custom folder and put any name in.(See video) One of these files can be used to illustrate how to include it. 00:01:54

Joomla Form-rule Example

How to create to a rule. I think let me see if I can get you some documentation on that quickly. Go to component in Joomla and go to 'Libraries' and to 'Form' and to 'Rules'. 00:02:21 Any of these rules may be opened, look at what had been done, and follow the same convention. 'JformRule' is extended. Give it a unique name. Make sure it isn't one of these in 'JformRule'. 00:02:43 Component Builder had already constructed the XML document that is used in the construction of 'Form'. If 'Component', 'Sermon distibutor','Models', and 'Form' is opened, and for instance series.xml is opened as it already includes the Rule path. 00:03:17 That Rule path is this 'Rule'(See video). To apply a filter, simply add the word 'filter='. In Component Builder there is actually a way to add this but basically that would be the same name 'Tel', as the filter name.[00:03:48](https://www.youtube.com/watch?<<<<<<<<<<<<<<<<<<<<<<<<<<<<,,

v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m48s) In here(see video) you have your 'test' which basically tests whether this is acceptable. In here you could do regex and all kinds of nice means to validate whether the input field on the server site is acceptable. 00:04:10 So this is a server side verification of the input.

Component Builder New Text Field Example

So you'd see in component builder if I'm just go there, let say new, I would select text, just a normal text field. You would see that it has here filter as well as validate. Now the rule gets placed in validate. 00:04:44 Validate is where you place your rule name, so your custom rule name might be time for example. And then that would ensure on the server site that only time was submitted.

Script JavaScript

The next step to ensure that the user only types in numbers and a colon 00:05:13 instead of anything else, would be able to do some JavaScript in the view footer. You could add JavaScript here that targets this field by either adding a unique class name here. Or going to the form where the field, for example this(name) is a field, 00:05:37 it use firebug, and you would select that(name) field, in firebug you will see the id. So with JavaScript you can target the input of that id. And if that id has input that is not what you would expect from time, then you could 00:06:02 either scream at the user or shout or just emptied the box with a little note under it. But that would be a JavaScript implementation on top of your text field. That is maybe a long explanation, but that is how you do a field if you want time. If you want time and you don't mind that there is a date involved, I actually have build a field like that already 00:06:36 that I'm using. In the repeatable fields you can't use the calendar field.

Example Time-Date(Custom Component)

So I created a field that allows me to still do that. Let me show you. There is a component I'm working on registration component. 00:06:58 So if we go events, open an event, then you would see that I can set dates. But these dates if I click in the box, you see it has it time adjuster. I can select a date and adjust the time and click done. 00:07:26 And it updates the field with that selection. If that is the kind of field that you're looking for, then implementation is quite different. I can do quickly show you that. I'll open it you can see it, the type is a text type. So basically I've just added a hint. It's just a normal text type you could pause the video and you can look at the field XML. Now since I'm using this field in a repeatable 00:08:08 field, the JavaScript is quite different because you have working with a repeatable field that you can add as many fields as you like. But you want this date field to be active on everyone of those. And you can't really target a repeatable field simply by adding some JavaScript in this area. Unless you know that field's id. Instead of doing it in here 00:08:41 I actually added Javascript that is needed to make this field work into the repeatable fields structure. Let me close this and show you that.

JavaScript Repeatable Field Time-Date Important

It's event dates, one of those values there(1196) is the id of that date field that I did I just showed you. In scripts (you can pause the video and exactly look what I did there). 00:09:24 I'm basically including some styles as well as some JavaScript. I have a loop which loops 50 times. Because I'm only allowing, if you are looking at the repeatable field, I'm only allowing 50 fields to be added. In the loop I'm targeting through the dynamic 00:09:52 php. I'm targeting each of those fields. At the moment there's a row added. I'm checking whether that row exists, if it does I'm simply using the jQuery DateTimepicker, which is actually brought to the page by the script here. It has some options which is tweakable, and that's it. 00:10:19 That's how I add that kind of date selecting picker method in a repeatable field. I will hold it a bit there you could pause the video, jottle that down if you want and scroll down. This is actually the end of the code that is the start. 00:10:43

Multiple Date Fields

Another thing I have multiple date fields. If you open that(Dates) again, you will see that here I have a start and an ending date. In cost adjustment I also have a target date. If you look at my script you'd see that I have a field type array. 00:11:14 Which basically is used to target those different fields in their different pop-ups. If you only targeting one field, you wouldn't need this extra iterating method or variable which I'm using. Instead of having to retype it for every field, I just added a loop in the php, it's just less code. 00:11:44

About further documentation I realized that that might be necessary. Honestly I just don't have time at the moment, because their component isn't earning me a great deal of income. Besides the fact that I myself I'm using it and developing components and I have developed quite a lot already. 00:12:14 I realize that might be a community project. And something I would actually would encourage. Everywhere in component builder, in any of it's list views, we have an help menu. Which actually opens up a website 00:12:39 which has a wiki option. It's actually a readmine website. Here is the URL, you could see it, if anyone wants to get involved in in the community, we help improve the documentation per list view as well as per function as you can see I've already done quite a bit in writing documentation for every list view, explaining these buttons. 00:13:11 This help button here. You could add your own help by going to the help documentation. Here is the list of the already set up help. If you open one of these, you would see that here is the URL that we're using. As we develop this component further we would eventually add more help documentation right in the component, but it will map to this 00:13:46 website, because that way or everybody can benefit from any improvements. So the website URL for those of you might want to go there. It's projects.vdm.io/ projects/Joomla-component-builder/wiki, and you could 00:14:10 go there and from there navigate. If you want to get involved in editing the tutorial or the documentation, and you say to me, I would help you setup documentation, give me a greater discount on accessing the tutorials. We could strike a deal. Because to me I have a time constrained. 00:14:40 At this point as a community project I hope you understand. Thanks so much.