How to add external library to SP Widget?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-11-2017 06:14 AM
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?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-11-2017 06:25 AM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-11-2017 06:57 AM
Thanks this the correct answer
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-13-2017 05:08 AM
Hi Adrian,
Can you please advise me how to create dependency for the Angular Material?
Thanks ,
Amitra
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎04-13-2017 06:08 AM
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