Select to view content in your preferred language

Adding extern SOAP libray to WAB Custom Widget

2169
10
07-02-2020 07:10 AM
GerardMartin
Regular Contributor

I am trying to use `tinysoap` library (https://github.com/mhzed/tinysoap) in an Web AppBuilder Custom Widget. 

I am able to use this library in WebAppBuilder application, as I show on the following sample code (real code included in HTML file). All my functions are included in a class called `myClass` in `customLibrary.js` file. Most functions in `customLibrary.js` call `tinysoap` functions, and everything works well:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="node_modules/tinysoap/tinysoap-browser-min.js"></script>

 <script src="node_modules/lib/customLibrary.js"></script>
 <script src="https://js.arcgis.com/4.15/"></script>
 ...
 <script>
    var tinySoap = this.tinysoap;
    require([], function(){
        //code goes here
        myClass.myfunction(){...}; 
    });
 </script>

Now I have to implement the same functionality in a Web AppBuilder Custom Widget.

I have had to modify javascript code from `customLibrary.js` class to `myModule.js`, and now I have this content (sample code):

# myModule.js

define([], function () {

 var myModule = {};
 const url = "http://example.com/wsdl?wsdl";

 myModule.myFunction = function(userTxtValue, callback) {
  if (userTxtValue){
    console.log('1. myModule.myFunction:', userTxtValue);
 
    var args = {name: userTxtValue};
    tinySoap.createClient(url, function(err, client){
       client.soapClientFunction(args, function(err, result){
          return callback(result);
       });
    });
   }
 };
 return myModule;
});

# Widget.js
So, I have `Widget.js` file with reference to `myModule.js`, without problems, using in this way:

define(['./myModule'], function(customModule) {
   customModule.myFunction( userTxtValue, function(result) { 
      console.log("widget.js, result:", result);
    });
 });

Also, I have tried to insert in  init.js (its is not desirable situation) but it doesn't work

dojoConfig.packages = [{
 name: "widgets",
 location: window.path + "widgets"
 }, {
   name: "jquery",
   location: "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2",
   main: "jquery"
 }, {
   name: "tinysoap",
   location: window.path + "widgets/myWidget/node_modules/tinysoap/lib",
   main: "soap"
 },
 ...
 }]

None of these test works.

So, what is the proper way to add `tinysoap` library to my widget?

Thank you in advance !

0 Kudos
10 Replies
Raul_Jimenez
Esri Contributor

Yes, you're totally right Shay, I have opened an issue in the repo letting them know about this situation, and if they are OK I will try to send a pull request to fix i.

BTW, I have just figured out that the problem with the "args" variable was caused by myself... ^_^'', I did a find and replace "arguments" by "args" because I was using the Grunt tasks provided by the Yeoman generator, and when it found the "arguments" variable in the code it prints out this message: 

Warning: widgets/CustomTinySoap/libs/tinysoap-browser-min.js: arguments is a reserved word in strict mode (499:50)

And it doesn't copy the code to the Web AppBuilder app.

So I have reverted the changes:

Does anyone know how can I avoid that issue?, do I need to remove the "use strict" from somewhere?

UPDATE (10th August): I have opened an issue in the yeoman generator repo about this.

Conclusions

  • The problem was not with WAB, was with the tinysoap library itself in this case. It is a confusion between the "require" form RequireJS.org with "require" from NodeJS. It runs an if statement "if (typeof require === "undefined")" in order to check if the code is been run in the client/browser or in the server with NodeJS. But in this case because of the RequireJS library is loaded the code thinks that it is running within a NodeJS environment and it tries to load "https", "http", "util", "fs" and "crypto" which are NodeJS core libraries, and of course, it fails because RequireJS doesn't know how to load them. That's the reason of the "undefined Module" error, it's not related a problem loading the tinysoap library itself. So my solution here was just commenting those lines (18, 24, 39, 36 and 42).

  • The second problem was related to accessing the library within the scope of the Widget. I don't know why it was not accessible there, so I just simply added it to the global scope (a.k.a. "window" object) <- please, forgive me about that, xD, I just took the short path. Someone can tell me the right way to do this? Or why this is happening in the first place? Notice: in my code I use "tinysoap" instead of "tinySoap" as Gerard, so in my case the right way to call it is tinysoap.createClient --> UPDATE (7th August):I just checked it again and it works now... so I have removed this.

And I think this last thing has nothing to do with the solution, but just in case... as mentioned in my previous message, I used "jimu/loaderplugins/jquery-loader!" to load the library instead of the other ways mentioned in the developers documentation.

And I think that's all. I hope that helps.


Best regards,

Raul