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 17:20:24 +02:00
parent 51cdaca6f6
commit 6ffc443b96
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,32 +4,31 @@
* 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m21s) This could be done via a custom form filter. [00:00:51](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m51s)
In programming time must always be linked to a date. Since time is stored as an integer, if you want a field where a time is set, (for instance 5:15), a normal text field can be used and a Regex method created. [00:00:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m21s) This could be done via a custom form filter. [00:00:51](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m51s)
* 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m23s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s)
To illustrate: Use 'sermondistribitor' component, go to 'modules', and 'rules' can be seen. There a 'rule' can be created. It is used as the filter name. [00:01:23](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m23s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s)
### 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m21s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m17s) 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) is a 'test' which basically tests whether this is acceptable. A Regex may be done 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 the server side verification of the input.
Here is some documentation on how to create a rule. Go to component in Joomla: 'Libraries', 'Form', and 'Rules'. [00:02:21](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m21s) Any of these rules may be opened. See 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](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m43s) Component Builder already constructed the XML document used in the construction of 'Form'. 'Component', 'Sermon distributor','Models', and 'Form' are opened, as is series.xml as 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.' (See video.) To apply a filter, add 'filter='. In Component Builder there is a way to add this; but it 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) Here is a 'test' that sees whether this is acceptable. (See video.) A Regex may be done 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) This is the server side verification of the input.
### Component Builder New Text Field
When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened, and 'text' is selected. [00:04:44](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) There will be seen 'filter="string"' as well as 'validate'. Now the 'rule' name gets placed in 'validate', so the custom rule name might be time for example, and would ensure that only time had been submitted on the server site.
When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened, and 'text' is selected. [00:04:44](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m44s) 'Filter="string"' as well as 'validate' is found there. The 'rule' name is placed in 'validate'. The custom rule name might be, for example, time, and would ensure that only time had been submitted on the server site. [00:05:13](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m13s)
### 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.
The next step is ensuring the user only types in numbers and a colon, not anything else, and would be able to do JavaScript in the view footer. [00:05:37](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m37s) JavaScript targeting the field by either adding a unique class name or going to the 'form' may be added. For example: This 'name' is a field. (It uses firebug.) It selects the 'name' field and the 'id' may be seen in firebug. With JavaScript the input of the 'id' can be targeted. [00:06:02](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m02s) If the 'id' has input and it is not what is expected from 'time', the user can be informed or the box may be emptied with a note underneath. That, however, would be a JavaScript implementation on top of the text field. If time is needed and it does not matter that a date is 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) In there a date can be selected and the time adjusted and 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.
A field had been created making 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) There a date can be selected, the time adjusted, before 'Done' is 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 you're looking for, the implementation is different when this kind of field is used. (See video.) For example: 'Fields' are opened, 'text' selected in the 'Type' column, and a hint is added. (You can 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 the field is used in a repeatable field, the JavaScript is different; you worked with a repeatable field where you could add as many fields as you liked. However, you wanted the date field to be active on each of those and you could not target a repeatable field by adding JavaScript in the area unless the field's ID was known. [00:08:41](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m41s) Instead of doing it here, Javascript is added. It is needed to make the field work into the repeatable fields structure.
### JavaScript Repeatable Field Time-Date
If Field(See video) is opened, select 'Event Dates', then one of those values (in the XML Field Definition) '1196', is the ID of that date field. (You can pause the video and follow what is done there).
[00:09:24](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) In 'Scripts' some styles is included as well as some JavaScript. There is a loop which loops 50 times. Looking at the Repeatable Field, it may be seen that only 50 fields are allowed to be added in the loop which is targeted through the dynamic PHP. [00:09:52](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Each of that fields is targeted. At the moment there is a row added. Check whether that row exists, if it does simply use the 'jQuery DateTimepicker', which is actually brought to the page by the script. It has some options which is tweakable. [00:10:19](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) That's how that kind of date selecting picker method is added in a Repeatable Field. [00:10:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s)
If Field is opened, select 'Event Dates'. One of the values (in the XML Field Definition), '1196', is the ID of the date field. (You can pause the video and follow what is being done.) [00:09:24](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m24s) In 'Scripts' some styles are included as well as some JavaScript. There is a loop looping 50 times. Looking at the Repeatable Field, only 50 fields are allowed to be added in the loop that is targeted through the dynamic PHP. [00:09:52](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m52s) Each of those fields are targeted. There is a row added. Check whether the row exists. If it does use the 'jQuery DateTimepicker', which is brought to the page by the script. It has some tweakable options. [00:10:19](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m19s) That's how that kind of date selecting picker method is added in a Repeatable Field. [00:10:43](https://www.youtube.com/watch?v=epA9zv4yWu0&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m43s)
### Multiple Date Fields