joomla/Component-Builder
joomla
/
Component-Builder
38
19
Fork 11
Code Issues 53 Pull Requests Projects 3 Releases Wiki Activity

Updated 045 Adding your own rule validation to a field in JCB (markdown)

Amigo 2019-08-09 15:34:06 +02:00
parent 207e376a8a
commit ceb4ba1ce5
1 changed files with 28 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
045-Adding-your-own-rule-validation-to-a-field-in-JCB.md

@ -1,44 +1,63 @@
# ADDING YOUR OWN RULE VALIDATION TO A FIELD IN JCB
[00:00:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m00s)
(_Click on these time links to see Youtube video_)
I would like to demonstrate to you how to add rules to your Model, basically to a Field. Adding rules to a Field, uses your custom rules to test the value before submitting it to the database. This is quite a good feature to have in your Component. [00:00:32](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m32s) I'm just going to use Hello World Component. The one we did a Hello World tutorial on. I'm going to add a rule to one of its Fields. Then quickly type it up and show you how to include it. I've gone to Admin Views. I'm going to open Greeting (first) as the Admin View. We want to change the Field in it. I think let us used this Greetings. [00:01:11](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m11s) Now we see at this time that the Field attributes don't have the validation option switch in place. We might start shipping JCB with this new validation property, well it is not new, it's just not being added yet, but if you have a version of JCB that doesn't have it set, then whatever Fieldtype you've selected you can edit the Fieldtype going here(green button), or you could edit the Fieldtype by going to Fieldtypes. [00:01:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m47s) Close out of Edit the Admin View again. And then go to Fieldtypes in Admin View.
### Select Fieldtype To Add Validation - Textarea
You can select the Fieldtype that you want to add this validation to. We want to do it for now to the Textarea. It has a filter in place. I'm going to add validation just underneath it. I'm going to click a plus. It is adjustable, it's not required, it's not translatable. Let's give it a little [00:02:22](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m22s) description. We got it all set. I wouldn't add a value here because if you don't want to use it, you just leave it empty. Let's save and close. We've done the Textarea. Let's go back to our Admin View Greetings and again open that Greetings(Textarea) field. Now we have this validate property available to us. We can copy it [00:02:59](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m59s) and add it in XML field definition.
[00:01:55](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m55s)
You can select the Fieldtype that you want to add this validation to. We want to do it for now to the Textarea. It has a filter in place. I'm going to add validation just underneath it. I'm going to click a plus. It is adjustable, it's not required, it's not translatable. Let's give it a little [00:02:22](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m22s) description. We got it all set. I wouldn't add a value here because if you don't want to use it, you just leave it empty. Let's save and close. We've done the Textarea. Let's go back to our Admin View Greetings and again open that Greetings(Textarea) field. Now we have this validate property available to us. We can copy it and add it in XML field definition.
### Custom Validation Rule
[00:03:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m03s)
Now we want to have a Custom validation here. There are built in Joomla validations as well. But you can also set up a Custom validation rule and this is form rule as its known. This is what we want to demonstrate. We going to call our rule 'strlenTen'. My string must be longer than 10 characters. [00:03:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m36s) I think that should do. I'm just going to copy this 'strlenTen' again. Save and close. So now that we've got our validation set. We don't have an area for you to write the rule and have it be included. So the way you do this and I think it's efficient, is that you right up the file yourself, you put it in the custom folder of JCB and you include it into the component that it places it in the correct place.
### JCB - Already Has Field Path And Rule Path
You see the one thing that JCB already does for you, [00:04:18](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m18s) is that it creates a folder called rules and in the forms every XML, if we open it already has a field path and a rule path. So you you can just add your rule to this folder(models/rules') Which I will demonstrate to you in the moment.
[00:04:14](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m14s)
### First Create A Rule
You see the one thing that JCB already does for you, is that it creates a folder called rules and in the forms every XML, if we open it already has a field path and a rule path. So you you can just add your rule to this folder(models/rules') Which I will demonstrate to you in the moment.
First let's create our rule. (See video) I had it this rule JFormRule. In the folder structure [00:05:14](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m14s) I'm in the admin area, components, component builder, and there is this folder called custom. And inside of this folder I've created strlenTen file. Then I placed this code here. Basic JFormRule, nothing too fancy about it. Now that we've got our file in place, we need to add it into our component. We go to the components and we open Hello World (v2) component. And we go to [00:06:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m03s) Settings and there 'Adding Custom Files and Folders. We click on 'Create component files and folders for this joomla component'. We just click on that, and OK. In 'A New Component Files & Folders' we want to add one file. Since we've added it to that custom folder everything in at custom folder will come up as a file that you can select. So there is the strlenTen file. Now the path to where we want it to place the file? [00:06:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s)
### First Create A Rule(See video)
[00:05:08](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h05m08s)
First let's create our rule. I had it this rule JFormRule. In the folder structure I'm in the admin area, components, component builder, and there is this folder called custom. And inside of this folder I've created strlenTen file. Then I placed this code here. Basic JFormRule, nothing too fancy about it. Now that we've got our file in place, we need to add it into our component. We go to the components and we open Hello World (v2) component. And we go to [00:06:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m03s) Settings and there 'Adding Custom Files and Folders. We click on 'Create component files and folders for this joomla component'. We just click on that, and OK. In 'A New Component Files & Folders' we want to add one file. Since we've added it to that custom folder everything in at custom folder will come up as a file that you can select. So there is the strlenTen file. Now the path to where we want it to place the file?
### Admin Is The Way The Package Is Build
[00:06:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s)
In the back end of the component, we go to models, forms, and we are targeting this greeting form. We opened that and we see that it has /models/rules'. Let's copy that. Now we need to remember that it is the admin area and then /models/rules'. [00:07:07](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m07s) This admin is the way the package is build. The target place should be the place inside the package. This be always the case for both Folders and Fields. In the Folder you want it to add it to the admin models rules folder. Then you need to decide whether you want this file to be updated. At this stage that files doesn't need any updating.
### Adding A License Tag
But we can change that. You can see I've just added this [00:07:41](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m41s) new licence tag to it(see video). And I've added this ###BOM###. When the file gets taken it will take this part away and replace this with your components licence and so the file will become branded like every other file in your component. [00:08:06](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Even if you use it in areas or components other than the one you originally made it for, it will dynamically looked like it was made for it because it add that components data at the header of the file. Even if you had the components name somewhere else in this, you can replace it with the well-known ###component### and it will be placed with the component name. We've got our file in place. You wanted to be updated. Let's compile the component and see it in action. In 'A New Component Files & Folders' just tick this as yes that the file should be updated. [00:08:54](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) Then save and close. Close out of the Component again. There's a shortcut to that file area underneath hello_world that you can use. We go to the Compiler and we compile our component. Let's install our Component. Now let's go look at the code to see what happened. In our components admin area, if we open the rules, we see there is the file 'strlenTen', it was placed into rules folder. If we open 'strlenTen' file we see [00:09:39](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m39s) it added our copy notice to the header of the file. Let's also look at our greeting.xml. We see the validation is there strlen.Ten so Everything so far so good.
[00:07:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m34s)
But we can change that. You can see I've just added this new licence tag to it(see video). And I've added this ###BOM###. When the file gets taken it will take this part away and replace this with your components licence and so the file will become branded like every other file in your component. [00:08:06](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m06s) Even if you use it in areas or components other than the one you originally made it for, it will dynamically looked like it was made for it because it add that components data at the header of the file. Even if you had the components name somewhere else in this, you can replace it with the well-known ###component### and it will be placed with the component name. We've got our file in place. You wanted to be updated. Let's compile the component and see it in action. In 'A New Component Files & Folders' just tick this as yes that the file should be updated. [00:08:54](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m54s) Then save and close. Close out of the Component again. There's a shortcut to that file area underneath hello_world that you can use. We go to the Compiler and we compile our component. Let's install our Component. Now let's go look at the code to see what happened. In our components admin area, if we open the rules, we see there is the file 'strlenTen', it was placed into rules folder. If we open 'strlenTen' file we see [00:09:39](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m39s) it added our copy notice to the header of the file. Let's also look at our greeting.xml. We see the validation is there strlen.Ten so Everything so far so good.
### Testing The Validation
Now let's go test this. We open the component in the back end. We go to Greetings. [00:10:10](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m10s) We click New. As you remember we set that Greetings needs to have a length of at least 10 characters. Let's test this. We add Greeting which isn't enough and we click Save. It tells us Invalid Field: Greetings. Problem. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) There's one little change I had to make to get this to work and I realize I'll need to tell you. Let's go look at this for some reason they want this file all lowercase. II had to change strlen.Ten to the T also in lowercase. Let's go do this also with the file in our custom folder. Then inside of the actual file they also want the T here to be lowercase. I suppose because they are using the upper case camel rule to sort of break-up the name. That was what I had to do to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) I also need to update the component to include this file since the name is changed, it will no longer know where it is. We can go directly to that file area with thhowe shortcut underneath hello_world and we see it is no longer selected, so we scroll down, select it again and save and close. Now that we've fixed the little glitch which I created myself, let's go back to see this again in action. [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) And save. And Invalid field: Greetings. That isn't very helpful. Maybe you would like to also show a custom message so that the user would at least know more about what is going on here. Before we do that let's add enough values and see if that it actually saves. It's saved successfully. Close. Our Greetings is been saved and our value here(Greetings) is more than 10 characters, so it was valid.
[00:10:02](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s)
Now let's go test this. We open the component in the back end. We go to Greetings. We click New. As you remember we set that Greetings needs to have a length of at least 10 characters. Let's test this. We add Greeting which isn't enough and we click Save. It tells us Invalid Field: Greetings. Problem. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) There's one little change I had to make to get this to work and I realize I'll need to tell you. Let's go look at this for some reason they want this file all lowercase. II had to change strlen.Ten to the T also in lowercase. Let's go do this also with the file in our custom folder. Then inside of the actual file they also want the T here to be lowercase. I suppose because they are using the upper case camel rule to sort of break-up the name. That was what I had to do to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) I also need to update the component to include this file since the name is changed, it will no longer know where it is. We can go directly to that file area with thhowe shortcut underneath hello_world and we see it is no longer selected, so we scroll down, select it again and save and close. Now that we've fixed the little glitch which I created myself, let's go back to see this again in action. [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) And save. And Invalid field: Greetings. That isn't very helpful. Maybe you would like to also show a custom message so that the user would at least know more about what is going on here. Before we do that let's add enough values and see if that it actually saves. It's saved successfully. Close. Our Greetings is been saved and our value here(Greetings) is more than 10 characters, so it was valid.
### Add A Custom Messages To Validation
Now let's go add a custom message to our [00:12:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m38s) validation. Remember whatever you do to the live version of this file, will not necessarily become part of the next compilation. Adding a custom message you need to go back to component builder, custom, and to that actual file(strlenten.php) and add it in there(see video) then recompile your component and it will automatically update the live demonstration. The other way to test before doing it live or before adding it to the core of your component, is to go to the live file which as we saw, is [00:13:17](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) in com_hello_world, models, rules, strlenten.php. Now let's add our custom message in here just to test. We using the element->addAttribute to the element message: Field must have more than 10 characters! That is one way of doing this of course there is another way.
[00:12:33](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h12m33s)
### Add Messages In XML Path
Now let's go add a custom message to our validation. Remember whatever you do to the live version of this file, will not necessarily become part of the next compilation. Adding a custom message you need to go back to component builder, custom, and to that actual file(strlenten.php) and add it in there(see video) then recompile your component and it will automatically update the live demonstration. The other way to test before doing it live or before adding it to the core of your component, is to go to the live file which as we saw, is [00:13:17](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m17s) in com_hello_world, models, rules, strlenten.php. Now let's add our custom message in here just to test. We using the element->addAttribute to the element message: Field must have more than 10 characters! That is one way of doing this of course there is another way.
Again this takes us back to JCB [00:13:47](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m47s) and we go to the Fields. We open Greetings and we look for the attribute message. It doesn't have message. We need to add this attribute. We'd click on Field Type and we scroll down. Let's place this under Description. We say Message. It's changeable, [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) it is translatable and it's optional. We don't make it compulsory. We got all set. Save and close. Let's add this message in Field Information to our XML field. Before we save this and go this path, let's first test our live [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) change we made to the file and see if that also works. In the file we added attribute to the element and it return false. Good, let's go test this. We again open Name item and we take away a few characters and click save. We get a Warning message that it needs more than 10 characters. That option also works very well.
### Add Messages In XML Path
[00:13:45](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h13m45s)
Again this takes us back to JCB and we go to the Fields. We open Greetings and we look for the attribute message. It doesn't have message. We need to add this attribute. We'd click on Field Type and we scroll down. Let's place this under Description. We say Message. It's changeable, [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) it is translatable and it's optional. We don't make it compulsory. We got all set. Save and close. Let's add this message in Field Information to our XML field. Before we save this and go this path, let's first test our live [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) change we made to the file and see if that also works. In the file we added attribute to the element and it return false. Good, let's go test this. We again open Name item and we take away a few characters and click save. We get a Warning message that it needs more than 10 characters. That option also works very well.
[00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s)
Now lets use the other one which I suppose is more convenient, unless you are checking multiple things and you would like to give multiple error messages based on those results then this implementation is the better option. But if you just got one message and it just needs to explain to the user one issue, then using the XML path I suppose is more convenient. In our custom file we haven't added that change. Let's go and compile our component and install. First we need to save and close out of this Field that the changes be captured. Then go to the Compiler [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) and compile our component, install. Lets go look at the code. In the code we see our custom message is again not showing up. The greeting.xml we now have this translated message='COM_HELLO_WOLRD_GREETING_GREETING_MESSAGES'. Let's go test this. Again we open Name Field and first save it the way it is. [00:16:56](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m56s) Lets take away two characters and save again. We get the expected message. This time around that message can be translated and as well it is in the XML file, it's not part of the actual function. We have now successfully added our own validation rule to one field within a view and we were able to include that rule into our component on compilation using adding custom files.