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

1266
4
Jump to solution
07-08-2019 01:43 PM
Labels (1)
Matheus_ViníciusRamos_da_Fonse
New Contributor III

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.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.
Matheus_ViníciusRamos_da_Fonse
New Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

Matheus_ViníciusRamos_da_Fonse
New Contributor III

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

0 Kudos