topic Re: How do i import javascript libraries in a strictly widget level? in Web AppBuilder Custom Widgets Questions

How do i import javascript libraries in a strictly widget level?

Matheus_ViníciusRamos_da_Fonse — Mon, 08 Jul 2019 20:43:30 GMT

I've been working on a custom widget for a few weeks now and it has go !tten to the point in which i need to add "print to PDF" functionality. The widget in question generates a report in a modal found within the widget's own HTML file.
I looke online for solutions and i found this: jsPDF. It allows me to save a <div> element of the modal as a PDF to be saved and potentially printed in A4 paper. Problem is: I don't know what to do in order to import into the widget.
Here's what i've tried:

Tried adding in my define([]) array in this Widget.js
I did this once successfully for jquery, so i assumed it would work for this as well. I had loaded in jquery before by doing
'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-3.4.1.min.js'
So i assumed it'd be as simple as changing the URL in this statement and adding it to the array. Like this:
'jimu/loaderplugins/jquery-loader!https://unpkg.com/jspdf@latest/dist/jspdf.min.js'
And it was no good. Upon clicking on the widget inside a test application, nothing in the widget itself would load.
Tried copying the code found in the .js file and moving it into Widget.js
This is also something i've once successfully in order to import functionality into my widget. I used a jquery library (jQuery Modal) to generate a complete modal to add my report in. But doing the same with jsPDF proved to not work at all.

So, what can i do to import jsPDF into my widget and widget only? I want to be able to drag and drop the widget folder into other apps in the future for easy modifications.

Re: How do i import javascript libraries in a strictly widget level?

RobertScheitlin__GISP — Mon, 08 Jul 2019 21:44:39 GMT

https://developers.arcgis.com/web-appbuilder/sample-code/add-a-third-party-library.htm

Put the library in the widget or theme folder and add it to your widget or theme dependency array. Use this approach to load an AMD module that only applies to one widget or theme.

Re: How do i import javascript libraries in a strictly widget level?

Matheus_ViníciusRamos_da_Fonse — Wed, 10 Jul 2019 17:15:14 GMT

And how exactly do i do that? I've tried adding it to the define array and then the function array. But it still won't work.

Re: How do i import javascript libraries in a strictly widget level?

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:59:56 GMT

Matheus,

I am not sure what you are doing wrong then. I just added a third party library to one of my widgets and it worked fine.

define([
    'dojo/on',
    'dojo/query',
    './rcolor'
...
function(on, query, rColor, ...‍‍‍‍‍‍

So I have a file called rcolor.js in my widgets folder, and it just works.

Re: How do i import javascript libraries in a strictly widget level?

Matheus_ViníciusRamos_da_Fonse — Wed, 10 Jul 2019 18:20:08 GMT

It seemed to have worked as the widget now loads. Thank you. Now i've to solve the 'jsPDF is not a constructor' error.