How can I use JavaScript Libraries for JavaScript actions?
Question

Hello,


i am currently trying to build a phonenumber validator with some additional features. For that I am using a JS which needs some libraries to work. Those libraries are loaded via cdn and a RequireScript client action.


But sadly its not working because my program can't identify some code snippets depending on the libraries.

I've tried this already:

https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_and_Reactive_Apps_Using_JavaScript/Use_JavaScript_Code_from_an_External_Library


I even loaded the library under the scripts section and enabled it for the screen.

What am I doing wrong?


Thanks


A peculiar issue. Could you provide a sample OML that isolates the issue to calling the library only? Then we can help investigate why it is not working as intended.

Alright, so I was further working on my project and disabled all of the RequireScript client actions. I also encapsulated the JS calls in the GetJS library (was my first time doing it, hope I did it the right way).


Furthermore, i added all scripts that are needed in the original google project to the scripts section of the GetJS library. When i import it as dependency from my PhonenumberValidator module it just shows me the closure library script (maybe because just this one is in use?).



Edit: I wasn't able to see the scripts because they weren't set to pulic. Still doesn't fix my issue.

PhonennumberValidator.oap

Hi Lars,

I suggest you add a single min.js file to the Scripts folder of the module, and select that file in the Required Scripts of your GetJS module. Normally, the min.js should be provided as well by the library owner.


Then, when you call a function of that library in a JS node in your WebBlock, it will be recognized.

I tried your way once, and it was really hard to make it work because of the incompatible syntax and interdependencies between different js files.


I also suggest that if you only want phone number validation, you can use a simple JS with RegEx, something like this:

Regards

Wow thanks for that good answer!


I have tried this way now:

I also added this file under required scripts but it is still not working. I guess I don't understand the first part of your answer. Could you clarify that for me please?


Also I had added my scripts at the required scripts for the screen. Where is the difference for that exact example. I am just able to use it globaly then no? So it shouldn't make any difference.



Cheers


Hi,

Adding the JS code to Scripts folder and then selecting it as a Required Script in the web block, screen or module shouldn't matter for your example indeed. If you select it only for a screen, then you can only use its functions in that screen obviously. Selecting it in the module would make it available module-wide.


What I meant by adding a min.js was something like the following. So, you should actually be able to find a single min.js file at the source where you obtained the individual js files of that library. 



This can actually be what you are looking for.

After putting this in your project, it's a matter of finding the correct function to validate the phone number. There might be demos on how to do it or the readme file of the library can help.

Cheers

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.