topic Re: Adding extern SOAP libray to WAB Custom Widget in Web AppBuilder Custom Widgets Questions

Adding extern SOAP libray to WAB Custom Widget

GerardMartin — Sun, 12 Dec 2021 17:00:07 GMT

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 !

Re: Adding extern SOAP libray to WAB Custom Widget

shaylavi — Sun, 12 Dec 2021 10:30:30 GMT

Hi Gerard,

Why adding the library into the init is not a desirable solution?

ESRI recommends it as one of 3 ways to add external libraries, just make sure you're implementing it right
Use other libraries—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for Developers

Try putting the library under the libs folder and inside init.js you should have something like -

window.path + 'libs/tinysoap/tinysoap.js'

Inside your custom widget, the library should already be available as part of your global scope -

define([
    'dojo/_base/declare',
    'jimu/BaseWidget'
], function (declare, BaseWidget) {
     return declare([BaseWidget], {
          startup: function() {
               // ** library should be accessible at this point **
          }
     });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Shay

Re: Adding extern SOAP libray to WAB Custom Widget

GerardMartin — Tue, 14 Jul 2020 11:04:43 GMT

Shay, thank you very much for your answer !

But, although I have followed your suggestions the code still doesn't work

Step 1. I have copy tinysoap folder to ./client/stemapp/libs folder

This is the content of tinysoap [1] folder. As you can see, it is not an AMD module.

[1] GitHub - mhzed/tinysoap: soap client in pure javascript, runs in browser

Step 2.1. I have included this sentence in init.js:

And I got this error ( You can see ./CustomWidget/widget.js code )

Step 2.2. So I try with this sentence in init.js:

And I got this error,

Step 3. Finally, I have included \tinysoap\ in .stemapp\libs\packages.js, but I got the same error in step 2.2

So, I'm sure I'm making a mistake, but I am not a JS developer and I can't see where is the problem ...

Maybe, I have to read this library differently?

Many thanks for your help !

Re: Adding extern SOAP libray to WAB Custom Widget

shaylavi — Tue, 14 Jul 2020 11:40:01 GMT

I would try to break down the problem by using just your own custom javascript file that doesn't do much, maybe contains a test function, and a few properties, just to see that you are able to add an external resource.

Once you got through that part, you can try to add an actual library that was already proven to be supported and possible to be added - maybe even find a sample code that implements that external resource to see the syntax and learn from it.

Once you managed to do the above, you know that you are adding the external resource right and you know that it's possible to add an external resource. At this point, you can surely know that tinysoap cannot be added and it's not your fault. My guess is that it's dependant on other files and cannot be initialized like that without a proper install through NPM, but all of this cannot be proven until you follow the above approach and if you're not a javascript developer, I guess that doesn't make things easier.

Shay.

Re: Adding extern SOAP libray to WAB Custom Widget

GerardMartin — Tue, 14 Jul 2020 12:15:44 GMT

Many thanks for your quick answer Shay !

1. I have done exactly what you suggest: I have used ESRI Custom widget to simplify the problem, It is the code of widget.js that I showed in examples.

2. Also, I have used tinysoap in an Web App Builder App succesfully (see first message).

3. In reference to NPM packages, I have been looking for tinysoap in NPM repository (https://www.npmjs.com) but it was not there, only in github: GitHub - mhzed/tinysoap: soap client in pure javascript, runs in browser

You're right that there are dependencies.

So, the qüestion is, how to use a third party library (not implemneted as AMD module) in a ESRI widget, only as nmp package?

Thanks in advance for your time !

Re: Adding extern SOAP libray to WAB Custom Widget

shaylavi — Tue, 14 Jul 2020 12:29:35 GMT

No worries, Gerard. Seems like you've done an impressive job there for someone who's not a JS developer.

To use libraries like tinysoap that has dependencies, you would probably have to switch to work with the newer versions of javascript (es6), where you are able to use NPM as well.

You can use ESRI's Yeoman tool to create an empty widget for you in es6 -

GitHub - Esri/generator-esri-appbuilder-js: Yeoman generator to help customize Esri's WebAppBuilder

Then it should be straight forward on how to install tinysoap, but the rest of your code will need to be rewritten, so I'm not sure if it's worth it over finding a different solution.

I just recently answered someone with a resource on how to code in es6 a custom widget. You can here's a live demo by ESRI on how to code a widget in modern javascript + typescript -

Web AppBuilder for ArcGIS: Advanced Development tools and Techniques - YouTube

Might be good preparation for you when starting to work with version 4 of the javascript API

Shay.

Re: Adding extern SOAP libray to WAB Custom Widget

GerardMartin — Tue, 14 Jul 2020 13:00:09 GMT

THANK YOU FOR YOUR HELP Shay !

I need some time to process all this information , thanks again !

Re: Adding extern SOAP libray to WAB Custom Widget

GerardMartin — Wed, 15 Jul 2020 07:22:42 GMT

Thank you Shay, ESRI's Yeoman tool is a good widget generator

but it is not a solution for my problem: too much work rewrite all the code.

I keep looking how to solve this issue ...

Re: Adding extern SOAP libray to WAB Custom Widget

Raul_Jimenez — Sun, 12 Dec 2021 10:30:33 GMT

Hi Gerard Martin and Shay Lavi ,

By recommendation of Gavin Rehkemper I have been trying using "jimu/loaderplugins/jquery-loader!" as explained here, this is the code I've used:

define([
        'dojo/_base/declare', 
        'jimu/BaseWidget',
        'jimu/loaderplugins/jquery-loader!./widgets/CustomTinySoap/libs/jquery.min.js, ./widgets/CustomTinySoap/libs/tinysoap-browser-min.js'
    ],
function(declare, BaseWidget, $, tinySoap) {
  return declare([BaseWidget], {

    baseClass: 'custom-tiny-soap',

    postCreate: function() {
      this.inherited(arguments);
      console.log('CustomTinySoap::postCreate');
      var userTxtValue = "rossinyol";
      
      const url = "" // SOAP Service

      tinysoap.createClient(url, function(err, client){
                client.setSecurity( tinysoap.WSSecurity('','') ); 
                client.localitzaToponim(argsToponim, function(err, result){
                    console.log('localitzaToponim: ', result['item']);
                    return callback(result['item']);

                }); //END client.localitzaToponim();
            });// END tinySoap.createClient();            
    }

  });

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Then, I noticed the libraries were loaded properly, but the error was still there:

// ERROR: Uncaught Error: undefinedModule at tinysoap-browser-min.js? Wab_dv = 2.13: 1‍‍

And then I thought.... maybe the issue is not with Web AppBuilder itself but of the library. So I prettified the tinysoap-browser-min.js (because I couldn't find the regular version) and I noticed the problems started at the beginning of the library, while the library is checking if the function "require" exists (line 5):

! function(t, e) {
	e = {}
    var n = function() {
        var j = {};
        if (typeof require === "undefined") j.__sr = function() {};
        else j.__sr = require;
        return j.__r = function(t) {
            var e = j[t];
            return null === e.sts && e.load.call(), e.mod.exports
        }, j.https = {
            sts: 1,
            mod: {
                exports: j.__sr("https")
            }
        }, j.http = {
            sts: 1,
            mod: {
                exports: j.__sr("http")
            }
        }, j.util = {
            sts: 1,
            mod: {
                exports: j.__sr("util")
            }
        }, j.fs = {
            sts: 1,
            mod: {
                exports: j.__sr("fs")
            }
        }, j.crypto = {
            sts: 1,
            mod: {
                exports: j.__sr("crypto")
            }
        }, j.a = {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I found it's failing on lines 13, 18, 23, 28, ... I guess it is because... the code is prepared to run also on NodeJS? and the condition is just trying to determine if you're running the code on NodeJS but it is not considering that you can have another "require" function, in this case, RequireJS library so when it tries to load the libraries ... RequireJS fails, right?

I just tried commenting all those lines, and ... ta-da! it didn't fail .... at that point xDDD.

For some reason the "tinysoap" was not initialized under the scope of the widget, so I also did one more change, I added this line before the end of the script:

window.tinysoap = n, "object" == typeof exports && "undefined" != typeof module && (module.exports = n)‍‍

Of course, doing that, I was able to use the library within the widget.

Here you can find my modified tinysoap-browser-min.js file.

Which is my problem now?, well, first I'm having a CORS problem, to avoid that during development I have used Moesif Orign & CORS Changer chrome extension.

But after that I had another issue...

--- SHORT BREAK FROM PREVIOUS CODE --
Before keep looking on WAB I decided to check if libraries work the same way even after my changes. Here you can see two vanilla examples using the tinysoap library:
Using the library directly from the CDN -> right now it's failing because "argsToponim" is not defined, so that OK
Using my modified version of the library -> It's now failing to try to parse the XML, I still haven't figure out why but the variable "args" on line 670 is not defined.
And as you can see it seems they don't.
--- END SHORT BREAK FROM PREVIOUS CODE --

And for now... this is everything I can say xD, I hope my tests can help us find a solution to the problem.

Best regards,

Raul

Re: Adding extern SOAP libray to WAB Custom Widget

shaylavi — Thu, 06 Aug 2020 10:13:27 GMT

Impressive work Raul, thanks for sharing. It's important to keep in mind that this isn't a sustainable solution.

I would consider it as a temporary patch (which can last for a few years as well), but it's hard to maintain and pass-over to other developers if/when necessary. Updates of the application/library might break it as well.

Shay.

Re: Adding extern SOAP libray to WAB Custom Widget

Raul_Jimenez — Thu, 06 Aug 2020 12:26:26 GMT

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