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 08:35:18 +02:00
parent 6dbe461582
commit 683b4122f3
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,20 +12,20 @@ To illustrate: Use this 'sermondistribitor' component, and go to 'modules', and
### Joomla Form-rule Example ### 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?<<<<<<<<<<<<<<<<<<<<<<<<<<<<,, 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.
### 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.
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](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 ### 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. [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.<<<<<<<<<<<<<<<<<
### Example Time-Date(Custom Component) ### Example Time-Date(Custom Component)