From 561bbb654a49a05b2c64d947827d2f7f4d9f2c8f Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Tue, 11 Jun 2019 15:24:19 +0200 Subject: [PATCH] Updated 023 Adding a custom time field (markdown) --- 023-Adding-a-custom-time-field.md | 32 ++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/023-Adding-a-custom-time-field.md b/023-Adding-a-custom-time-field.md index c44e300..ef218d6 100644 --- a/023-Adding-a-custom-time-field.md +++ b/023-Adding-a-custom-time-field.md @@ -1 +1,31 @@ -Hi Ok I would like to quickly demonstrate how to set up a time field Now you know that In programing obviously a time must always be linked to a date Because time is stored as an integer [00:00:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m21s) And therefore If you only want A Field Where only a time is set let's say 5:15 or something Then I would suggest to use a normal text field And you Create a regex Method This could be done via a [00:00:51](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m51s) I just close this This could be done via a Custom form Filter The way to setup a custom filter let me use This component you go to modules and then you would see rules And in here you can create a rule And then you would use that as the filter name [00:01:23](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m23s) So you would component Builder you would create a file And you would place it in your custom folder Any any name Put it in here So let me illustrate that let me Well I'm gonna illustrate that I'll just use one of these files to illustrate how to include it But you would basically create a Rule [00:01:54](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) How to create to create a rule I think let me see if I can get you some documentation on that quickly I think the easiest would be to basically go to your Scroll up here go to Your in component You're in Joomla right So you go to libraries Joomla Then form and then Rules [00:02:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m21s) Can You can open any of these rules And you can look And what they've done And you would follow the same convention you basically extend J form rule You give it a unique name Make sure it isn't one of these Jform rule And then [00:02:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) We are already component Builder Already when it when it constructs the The XML document That is used In your Construction of your form Sermon Distibuter modules your Form If I open any of them let say this one it already includes the rule path [00:03:17](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m17s) you see and that rule path is This rule So if you are using a filter So how you would apply it is this you would simply add the word filter equals now in component builder there is actually a way to add This But basically That would be the same name As That I suppose that Tel [00:03:48](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m48s) would be the filter name Ok And then in here you have your Test which Basically tests Whether this is Acceptable And in here you could do regex and all kinds of nice Means to to validate whether the input field On the server side is actually acceptable [00:04:10](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m10s) So this is a server side Verification of the input And so you'd see in component builder if I'm just go there It's a new And I would select text Just a normal text field You would see that it has here Filter As well as validate Now I think the rule gets placed here in validate [00:04:44](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) That's right 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 side that only time was submitted Now The Next Step to Ensure that The user only types in . numbers and a colon [00:05:13](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) Instead of anything else would be able to do some JavaScript here in the View footer You could add JavaScript here that targets This field Via adding a A class a unique class name here Or Going to the form where the field for example this is a field right [00:05:37](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) it use firebug And you would select That field so 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) 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 Now That is maybe a long explanation But that is how you do a field if only you want time If you want time and you don't mind that there is a date in volved I actually have Build a field like that already [00:06:36](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m36s) That I'm using You see because in In the repeatable Fields you can't use the calendar Field So I created a field That's sort of Allows me to still do that let me show you There is a component I'm working on registration component [00:06:58](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) So if we go events Open an event Then you would see that ok Yeah I can set dates But these dates If I click in the box You see it has it time Adjuster And I can select a date And adjust the time and click done [00:07:26](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m26s) 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 I can do to show you that Ok so I'll open it you can see it it the type is a text type So basically I've just added it added it 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) Field the JavaScript Is quite different right because you You have a 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 here Unless you know that feels ID and so instead of doing it in here [00:08:41](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) I actually added to Javascript that is needed to make this field work Into the repeatable fields structure so let me close this and show you that Case I think it's event dates So one of those Values there is obviously the ID Of that date field that I did I just showed you and so in scripts Again here I can maybe zoom in a little You can you can pause the video and exactly look what I did there [00:09:24](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) Basically including Some Styles as well as some JavaScript And then 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 So I only need to loop 50 times And then In the loop I'm actually targeting through the dynamic [00:09:52](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) 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 Date Time picker which is actually Brought to The Page by this The Script here And then it has some options which is tweakable And that's it [00:10:19](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) That's how I add That kind of date selecting picker method In a repeatable field Again I will hold it a bit there you could pause the video jottle that down if you want and Scroll down again This is this is actually the end of the code that is the start Ok that's all that it takes [00:10:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s) To to add O, yes another thing because I have multiple data Fields so if you open that again You see that here I have a start and an ending date And here in cost adjustment I also have A Target date And so if you look at my script You'd see that I have a field type array [00:11:14](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) Which basically is used to Target those different fields in there different pop-ups So You would if you only targeting one field You wouldn't need this extra iterating Method or Variable which I'm using here Instead of having to retype it for every field I just added A loop In the PHP it's just code Ok that's [00:11:44](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m44s) I think that should do it About further documentation I realized that that might be necessary And 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m14s) I realize that that might be a community project And something I would Actually encourage So Everywhere in component builder in any of it's list view We have an help menu Already Which actually opens up A Website [00:12:39](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m39s) Which has a wiki Option it's Actually a redmine website Here is the URL you could see it And if 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 And [00:13:11](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) Even So on so this help button here you could add your own Help by going to the help Documentation And 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 And Obviously As we develop this component further We would eventually add more help documentation right in the component But it will in actual fact map to this [00:13:46](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s) This website Because that way or everybody can benefit from any improvements So the website URL For those of you Might wanna go there It's projects. VDM Again projects and Joomla component Builder Wiki And yes you could I [00:14:10](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m10s) Suppose just go there and from there navigate If you want to get involved in editing the The tutorial or the documentation And you say to me, OK Llewellyn I would help you setup Documentation Give me a greater discount on accessing the tutorials We could strike a deal Because to me I really I have a time Constrained [00:14:40](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m40s) and so at this point As a community project I hope you understand Thanks so much +# ADDING A CUSTOM TIME FIELD + +### Fields + +Hi I would like to quickly demonstrate how to set up a time field. Now do know that in programing a time must always be linked to a date. Because time is stored as an integer, [00:00:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m21s) and therefore if you only want a field where only a time is set, let's say 5:15 or something, then I would suggest to use a normal text field. And you Create a regex method. [00:00:51](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m51s) This could be done via a custom form filter. The way to setup a custom filter, let me use this(sermondistribitor) component, you go to modules, and then you would see rules. In here you can create a rule. Then you would use that as the filter name. [00:01:23](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m23s) So you would in component builder, you would create a file, and you would place it in your custom folder. Just any name, put it in here. I'll just use one of these files to illustrate how to include it. But you would basically create a rule. [00:01:54](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) + +### Joomla Fomr-rule Example + +How to create to create a rule? I think let me see if I can get you some documentation on that quickly. I think the easiest would be to basically go to you are in component, you're in Joomla right. So you go to libraries Joomla. Then form and then rules. [00:02:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m21s) You can open any of these rules, you can look at what they've done, you would follow the same convention. You basically extend JformRule. You give it a unique name. Make sure it isn't one of these JformRule. [00:02:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) We are already component builder, already when it when it constructs the XML document that is used in your construction of your form. Component, sermon distibutor, models. Your form if I open any of them, let say this series.xml it already includes the rule path. [00:03:17](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m17s) That rule path is this rule. So if you are using a filter, how you would apply it is, you would 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 [00:03:48](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m48s) would be the filter name. 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m10s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m36s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m26s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s) + +### 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m44s) + +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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m14s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m39s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m11s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m46s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m10s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m40s) At this point as a community project I hope you understand. Thanks so much.