joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 82 Pull Requests Projects 4 Wiki Activity
Page: 023 Adding a custom time field
Pages
001 Hello World with Joomla Component Builder 002 Intro to JCB 003 Installation of JCB 004 General Planning 005 Field Types 006 Basic Fields 007 Admin Views 008 Advanced Fields 009 Adding Admin Views to a Component 010 Component Settings 011 Component Scripts 012 Component FTP and more 013 dynamicGet 014 Adding dynamicGet to a Site View 015 Adding Templates and Layouts to a Site View 016 Template Setup 017 Layout Setup 018 Custom Admin Views 019 Adding Site Views to a Component 020 Adding Custom Admin Views to a Component 021 Tweaking MySQL Demo Data 022 Global Settings of Component Builder 023 Adding a custom time field 024 How to integrate the Create User Helper Method in your Components 025 How to use email helper in your components 026 How to setup a store message method along side the email helper class 027 How to ensure that a field is not escaped when added to list views 028 How to change exported values and setup custom import options 029 How to overwrite the custom fields 030 How to filter a list field based on association with another field 031 Automatic import of custom code during compilation in JCB 032 JCB manual custom code implementation 033 Export Import of fully mapped components 034 How to add Custom Buttons in JCB to your component Admin Area 035 Translation Mananger in JCB explained 036 Setting Site View Permission 037 Auto create SQL updates for Componets in JCB 038 Setup Site Edit View in JCB 039 Automated backup system in JCB 040 Adding Helper Structures to any JCB component 041 Upgrade to JCB v2.5.8 and using the new Admin View and Admin Fields 042 How to setup tabs after upgrade to v2.5.8 in JCB 043 Major Release of JCB v2.6.0 044 Hello World Component with Joomla Component Builder Creator Extended 045 Adding your own rule validation to a field in JCB 046 General overview of how community snippets work 047 Tutorial on forking JCB snippets so you can share your snippets with the rest of the Community 048 Tutorial on making a pull request at Joomla Component Builder Snippets 049 The New Library Manager Area 050 Easy Translation via excel 051 Dynamic Router Implementation Explained 052 Automated database updates in Joomla during development of a component 053 Quick Subform Demonstration 054 VDM Package Import Option 055 Dynamic File and Folder Inclusion concept 056 How to use the file field type to upload a file in JCB 057 Drag and Drop Upload functionality in JCB 058 The Quick Hello Word with JCB 059 Adding none database fields to an admin view 060 The custom dashboard option in JCB 061 Add or Remove Prefix to Component Name in Joomla Menu 062 Add your own JCB packages to the JCB Communty Directory 063 Proposed Collaborative Workflow in JCB 064 How to install jcb packages 065 JAB18 Using Joomla Component Builder 066 The new fields Area to make things easier 067 Adding Language String to your Component and get the Language Placeholder for dynamic use 068 Library Manager Anticipated Functionality 069 Join Fields in the admin list view with field relations 070 How to change the License Template in JCB 071 Reuse Custom Code 072 Setup Local Development Environment with Bitnami 073 JCB Fields Type Extended 074 How to add Joomla Custom Fields 075 Expand Custom Field Type Beyond The Default 076 A Quick Demonstration to Load a List of Items in a Site View 077 Run Expansion Explained 078 How to Add a Form to a Site View 079 Update the Site Form Field via URL Parameter 080 How to Add More Helper Methods to Your Components Helper Class 081 Easy Validation Rules for Fields in JCB 082 New Placeholders Feature 083 Manage a Components Global Config Option Field in Relation With Menu Params 084 Default Database Values can be set per Field Type Beta Testing Component Settings Develop a Joomla Component Guide to use the Component Builder Developing with Joomla Component Builder Home PHP Settings TIPS: Custom Code Using the JCB Demo Component While Building Your Local Development System
23 023 Adding a custom time field
Amigo edited this page 2019-08-15 16:02:08 +02:00
Table of Contents

ADDING A CUSTOM TIME FIELD

Fields

00:00:00 (Click on these time links to see Youtube video)

  • How to set up a Time Field

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 This could be done via a custom form filter. 00:00:51

  • How to set up a Custom Form Filter

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

Joomla Form-rule Example

00:01:54

Here is some documentation on how to create a rule. Go to Component in Joomla: 'Libraries', 'Form', and 'Rules'. 00:02:21 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 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 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 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 This is the server site verification of the input.

Component Builder New Text Field

00:04:15

When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened, and 'text' is selected. 00:04:44 '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.

Script JavaScript

00:05:00

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 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 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. 00:06:36 The calendar field can not be used in the repeatable fields.

Time-Date(Custom Component)

00:06:46

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 There a date can be selected, the time adjusted, before 'Done' is clicked. 00:07:26 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 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 like. 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 Instead of doing it here, the necessary Javascript has been added to make the field functional in the repeatable fields structure.

JavaScript Repeatable Field Time-Date

00:08:46

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

Multiple Date Fields

00:10:51

If you open 'Dates', there is a start and an ending date. In Cost Adjustment, there is also a target date. 00:11:14 In the script there is a 'field type' array used to target the different fields in their different pop-ups. If only one field is targeted, the extra iterating method or variable is needed. Instead of retyping it for every field, there is 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 would be encouraged, however, if it can be done as a community project. 00:12:14 Everywhere in Component Builder, in any of its list views, there is a Help Menu that opens a website with a Wiki option. 00:12:39 It's a Readme website. Here is the URL for anyone who wants to get involved in in the community to improve the documentation per list view as well as per function. (See video.) As you can see I've done a bit in writing documentation for every list view, explaining the buttons. 00:13:11 This help button here; you can add your own help by going to the help documentation. Here is the list of already set up help. If you open one of these, you will see the URL we're using. 00:13:46 As we develop this component further we would eventually add more help documentation in the component. It will map to this website because that way everybody can benefit from the improvements. 00:14:10 The website URL is Readme You can go there and navigate from there. If you want to get involved in the editing of the tutorial or the documentation, contact me, and I will help you setup documentation. 00:14:40