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 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 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 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.

Script JavaScript

00:05:13The 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 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 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 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 In there a date can be selected and the time adjusted and then 'Done' should be clicked. 00:07:26 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 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 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.

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 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 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 That's how that kind of date selecting picker method is added in a Repeatable Field. 00:10:43

Multiple Date Fields

If you open 'Dates' again, it may be seen that there is a start and an ending date. In Cost Adjustment there is also a target date. 00:11:14Looking at the script there is a 'field type' array which basically is used to target those different fields in their different pop-ups. If only one field is targeted, this extra iterating method or variable is needed. Instead of having to retype it for every field, there is just a loop added in the PHP, it is just less code. 00:11:44

Further documentation might be necessary but time does not allow it but it would be encouraged if it can be done as a community project .00:12:14 Everywhere in Component Builder, in any of it's list views, is a Help Menu which actually opens up a website which has a Wiki option. 00:12:39 It's a Readme website. Here is the URL(See video) if anyone wants to get involved in in the community, to 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 everybody can benefit from any improvements. So the website URL: ### 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. 00:14:40