joomla/Component-Builder
joomla/Component-Builder
39
23
Fork 11
Code Issues 80 Pull Requests Projects 4 Wiki Activity

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

Amigo 2019-08-26 14:10:54 +02:00
parent 241cdd91a2
commit e8a6221533
1 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,10 +26,7 @@ JCB creates a folder called 'rules' and in the forms, every XML has a field path
[00:04:41](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m41s) (Please follow on video) [00:04:41](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m41s) (Please follow on video)
First, create a rule. This rule 'JFormRule' is added. In the folder structure, in the Admin area, Components, Component Builder, and there is this folder called 'Custom'. In this folder, I have created 'strlenTen' file and placed this code here, it is a basic JFormRule. Now that our file is in place, it should be added to the component. Go to the components and open Hello World (v2) component. [00:06:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m03s) Go to Settings and there at 'Adding Custom Files and Folders, click on 'Create component files and folders for this Joomla Component'. Click on that, and 'OK'. In 'A New Component Files & Folders' we want to add one file. Since we have 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 to show the path that leads to the place where we want it to place the file. First, create a rule. This rule 'JFormRule' is added. In the folder structure, in the Admin area, Components, Component Builder, and there is this folder called 'Custom'. In this folder, I have created 'strlenTen' file and placed this code here, it is a basic JFormRule. Now that our file is in place, it should be added to the component. Go to the components and open Hello World (v2) component. [00:06:03](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m03s) Go to Settings and there at 'Adding Custom Files and Folders, click on 'Create component files and folders for this Joomla Component'. Click on that, and 'OK'. In 'A New Component Files & Folders' we want to add one file. Since we have added it to that custom folder, everything in that custom folder will come up as a file that you can select. So there is the 'strlenTen' file. Now to show the path that leads to the place 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) [00:06:38](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m38s)
In the back end of the component, go to models, forms, and this greeting form is targeted. It has '/models/rules'. Copy that. 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 built. The target place should be the place inside the package. This is 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 do not need any updating. In the back end of the component, go to models, forms, and this greeting form is targeted. It has '/models/rules'. Copy that. 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 built. The target place should be the place inside the package. This is 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 do not need any updating.
@ -38,13 +35,13 @@ In the back end of the component, go to models, forms, and this greeting form is
[00:07:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m34s) [00:07:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m34s)
But we can change that. This new license tag has just been added to it(see video) as well as this ###BOM###. When the file gets taken, it will take this part away and replace this with your component's license 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 look like it was made for it because it adds 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. With our file in place, we want it to be updated. 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. Closeout of the Component again. There is a shortcut to that file area below 'hello_world'. Then go to the Compiler and compile the component. Install the Component. Go look at the code to see what happened. In the components Admin area, if rules are opened, there is the file 'strlenTen', it was placed into rules folder. If we open 'strlenTen' file, it may be seen that it added our copy notice to the header of the file. Also, look at our greeting.xml. The validation is 'strlen.Ten'. But we can change that. This new license tag has just been added to it(see video) as well as this '###BOM###'. When the file gets taken, it will take this part away and replace this with your component's license 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 look like it was made for it because it adds 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. With our file in place, we want it to be updated. 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. Closeout of the Component again. There is a shortcut to that file area below 'hello_world'. Then go to the Compiler and compile the component. Install the Component. Go look at the code to see what happened. In the components Admin area, if rules are opened, there is the file 'strlenTen', it was placed into rules folder. If we open 'strlenTen' file, it may be seen that it added our copy notice to the header of the file. Also, look at our greeting.xml. The validation is 'strlen.Ten'.
### Testing The Validation ### Testing The Validation
[00:10:02](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s) [00:10:02](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m02s)
Now let us test this. Open the component in the back end, go to 'Greetings' and click 'New'. 'Greetings' had been set to have a length of at least 10 characters. Let's test this. 'Greeting' is added which does not have enough characters and click 'Save'. It tells us, 'WARNING: Invalid Field: Greetings'. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) One little change is necessary to get this to work. For some reason, they want this file all lowercase. The 'T' uppercase in 'strlen.Ten' need to change to 'T' lowercase. Do this also with the file in our Custom folder. Then in the actual file, the 'T' should be lowercase. Perhaps the upper case camel rule had been used to sort of break-up the name to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) The component needs to be updated to include this file since the name has been changed, and will no longer know where it is. Go directly to that file area with the shortcut below 'hello_world' and see it is no longer selected. Scroll down, and select it again and save and close. Now that the little glitch is fixed which I had created, go back to see this again in action and save. [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) It shows 'Invalid field: Greetings'. That is is not very helpful. Maybe you would like to show a custom message so that the user would at least know more about what is going on. Before we do that let's add enough values and see if that it actually saves. It was saved successfully. Close. Our 'Greetings' has been saved and our value here(Greetings) is more than 10 characters, so it was valid. Now let us test this. Open the component in the back end, go to 'Greetings' and click 'New'. 'Greetings' had been set to have a length of at least 10 characters. Let's test this. 'Greeting' is added which does not have enough characters and click 'Save'. It tells us, 'WARNING: Invalid Field: Greetings'. [00:10:36](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m36s) One little change is necessary to get this to work. For some reason, they want this file all lowercase. The 'T' uppercase in 'strlen.Ten' need to change to 'T' lowercase. Do this also with the file in our Custom folder. Then in the actual file, the 'T' should be lowercase. Perhaps the upper case camel rule had been used to sort of break-up the name to get it to work. [00:11:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m20s) The component needs to be updated to include this file since the name has been changed, and will no longer know where it is. Go directly to that file area with the shortcut below 'hello_world' and see it is no longer selected. Scroll down, and select it again and save and close. Now that the little glitch which I had created is fixed, go back to see this again in action and save. [00:11:57](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m57s) It shows 'Invalid field: Greetings'. That is is not very helpful. Maybe you would like to show a custom message so that the user would at least know more about what is going on. Before we do that let's add enough values and see that it actually saves. It was saved successfully. Close. Our 'Greetings' has been saved and our value here(Greetings) is more than 10 characters, so it was valid.
### Add A Custom Messages To Validation ### Add A Custom Messages To Validation
@ -59,4 +56,4 @@ Now let's add a custom message to our validation. Remember whatever you do to th
Again this takes us back to JCB and we go to the Fields. Open 'Greetings' and look for the attribute message. It does not have a message. To add this attribute, click on Field Type and scroll down. Place this under 'Description'. Say 'Message'. It is changeable, translatable and optional. [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) It is not compulsory. With all set, Save and close. Let's add this message in Field Information in our XML field. Before we save this and go this path, let's first test our live change to the file and see if that also works. [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) In the file we added this attribute to the element and it returns 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. Again this takes us back to JCB and we go to the Fields. Open 'Greetings' and look for the attribute message. It does not have a message. To add this attribute, click on Field Type and scroll down. Place this under 'Description'. Say 'Message'. It is changeable, translatable and optional. [00:14:21](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h14m21s) It is not compulsory. With all set, Save and close. Let's add this message in Field Information in our XML field. Before we save this and go this path, let's first test our live change to the file and see if that also works. [00:15:00](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m00s) In the file we added this attribute to the element and it returns 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.
[00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s) [00:15:34](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h15m34s)
Now, let's use the other one which I suppose is more convenient unless you are checking multiple things and 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 it is more convenient. In our custom file, we have not added that change. Compile the component and install it. First, save and close this Field that the changes can be captured. Then go to the Compiler and compile the component and install. [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) In the code the custom message is again not showing up. The 'greeting.xml' is now this translated 'message='COM_HELLO_WOLRD_GREETING_GREETING_MESSAGES'. Test this. 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) Take away two characters and save again. There is the expected message. This time around that message can be translated and as well it is in the XML file, it is not part of the actual function. We have now successfully added our own validation rule to one field within a view and were able to include that rule into our component on compilation using adding custom files. Now, use the other one which I suppose is more convenient unless you are checking multiple things and 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 it is more convenient. In our custom file, we have not added that change. Compile the component and install it. First, save and close this Field so that the changes can be captured. Then go to the Compiler and compile the component and install. [00:16:20](https://www.youtube.com/watch?v=Z6-ggKtX35o&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h16m20s) In the code the custom message is again not showing up. The 'greeting.xml' is now this translated 'message='COM_HELLO_WOLRD_GREETING_GREETING_MESSAGES'. Test this. 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) Take away two characters and save again. There is the expected message. This time around that message can be translated and as well it is in the XML file, it is not part of the actual function. We have now successfully added our own validation rule to one field within a view and were able to include that rule into our component on compilation by using adding custom files.