joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 80 Pull Requests Projects 4 Wiki Activity

Updated 023 Adding a custom time field (markdown)

Amigo 2019-06-27 10:01:03 +02:00
parent 683b4122f3
commit 8130b4e003
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
023-Adding-a-custom-time-field.md

@ -20,17 +20,16 @@ When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened,
### Script JavaScript ### Script JavaScript
[00:05:13](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s)The next step to ensure that the user only types in numbers and a colon instead of anything else and would be able to do some JavaScript in the view footer. [00:05:37](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) JavaScript may be added that targets this field by either adding a unique class name or going to the 'form' where the 'field', for example:(See video) This 'name' is a field so it uses firebug, then select that 'name' field and in firebug the 'id' may be seen. So with JavaScript the input of that 'id' can be targeted. [00:06:02](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) If that 'id' has input and that is not what is expected from 'time', then the user can be informed or the box may be emptied with a note underneath. But that would be a JavaScript implementation on top of the text field. If time is needed and if it does not matter that there is a date involved, a field like that had already been build by VDM.[00:06:36](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m36s) The calendar field can not be used in the repeatable fields.<<<<<<<<<<<<<<<<< [00:05:13](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s)The next step to ensure that the user only types in numbers and a colon instead of anything else and would be able to do some JavaScript in the view footer. [00:05:37](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) JavaScript may be added that targets this field by either adding a unique class name or going to the 'form' where the 'field', for example:(See video) This 'name' is a field so it uses firebug, then select that 'name' field and in firebug the 'id' may be seen. So with JavaScript the input of that 'id' can be targeted. [00:06:02](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) If that 'id' has input and that is not what is expected from 'time', then the user can be informed or the box may be emptied with a note underneath. But that would be a JavaScript implementation on top of the text field. If time is needed and if it does not matter that there is a date involved, a field like that had already been build by VDM.[00:06:36](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m36s) The calendar field can not be used in the repeatable fields.
### Time-Date(Custom Component)
So a field had been created that makes it possible to still do that. For example: If 'Events' is opened on the Registry Dashboard there is a function where dates may be set. [00:06:58](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m58s) But these dates if I click in the box, you see it has it time adjuster. In there a date can be selected and the time adjusted then done should be clicked. [00:07:26](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m26s) With that selection the field is updated . If that is the kind of field that you're looking for, The implementation is quite different when this kind of field is used(See video). For example: If 'Fields' is opened and 'text' is selected in the 'Type' column and a hint is added. (You could pause the video and look at the field XML.) [00:08:08](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m08s) Since this field is used in a repeatable field, the JavaScript is quite different because you have been working with a repeatable field where you could add as many fields as you liked but wanted the date field to be active on everyone of those and you could not really target a repeatable field simply by adding some JavaScript in the area unless that field's ID was known. [00:08:41](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) Instead of doing it in here(See video) Javascript is actually added which is needed to make this field work into the repeatable fields structure.<<<<<<<<<<<<<<<<<
### 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_ ### 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) 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)