From 8130b4e0033e4ae49a2220c2b9c8fca705d2a3b6 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 27 Jun 2019 10:01:03 +0200 Subject: [PATCH] Updated 023 Adding a custom time field (markdown) --- 023-Adding-a-custom-time-field.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/023-Adding-a-custom-time-field.md b/023-Adding-a-custom-time-field.md index 8643a0f..c5717d4 100644 --- a/023-Adding-a-custom-time-field.md +++ b/023-Adding-a-custom-time-field.md @@ -20,16 +20,15 @@ When 'new' in Component Builder Fields is clicked, 'New Fields' will be opened, ### 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_