How to add external library to SP Widget?

[adevezin]

Hello, im trying to create a custom widget just like can be seen here Create a widget.

What im trying to add is material angular. When just including:

<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.0/angular-material.js"></script>
<link href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.0/angular-material.css" rel="stylesheet" type="text/css"></link>
<link href="https://material.angularjs.org/1.1.3/docs.css" rel="stylesheet" type="text/css"></link>

in the html. It does not work. How can i add the material angular styles into the widget?

[jesseadams]

Hey Adrian,

Best way to do this is to create a new widget dependency.

Once you create the dependency record you will have two related lists. One for js includes and one for css includes. You'll want to create a new CSS include.

These can either point to records in your instance or to some external url and you set this using the source field. I'm guessing for material you'll have an external URL.

Just put that in the URL field on the include and add that dependency to your widget and you should be good to go.

Check out this link for more info Widget dependencies.

[adevezin]

Thanks this the correct answer

[amitra2]

Hi Adrian,

Can you please advise me how to create dependency for the Angular Material?

Thanks ,

Amitra

[adevezin]

Go to Service Portal > Dependencies.

Click New.

I named mine ngMaterial for both "name" and "angular module name"

Click Save

Click new under JS Includes

Select URL for Source

Input https://cdn.gitcdn.link/cdn/angular/bower-material/vX.X.X/angular-material.js

- replace the X.X.X with the version you wish to use

Click Submit

Click new under CSS includes

Select URL Source

Input https://cdn.gitcdn.link/cdn/angular/bower-material/vX.X.X/angular-material.css

Click Submit

Click new again under CSS includes

Input https://material.angularjs.org/1.1.3/docs.css

Click Submit

Go to Service Portal > Widgets (Not sure if this step is actually needed, but i did it anyways)

Click the widget name you wish to add ngMaterial as a dependency to

Click Edit... under dependencies

Double click ngMaterial

Click Save