Using Custom JS or CSS Files in Gadgets
To include your own JS or CSS files in gadgets, perform the following steps.
1. Copy the custom JS or CSS files to the respective directories under the gadget directory.
For JS files, copy to
YOUR_PROJECT > WebContent > gadgetName > scripts.
For CSS files, copy to
YOUR_PROJECT > WebContent > gadgetName > styles.
2. Navigate to the gadgetDefinition.xml located under YOUR_PROJECT > WebContent > WEB-INF > gadgets > <Gadget_ID>.
3. Edit the gadget-definition.xml file to include the scripts or CSS.
4. Select the Gadget Defintion Editor tab.
5. Expand scripts and styles, and add the JS files or CSS files by navigating to the respective directory. If your JS files contains one or more AngularJS modules you might want to add to the gadget, specify the module names in the Dependencies section.
6. Directly invoke the custom functions from your own JS files directly in the controller. For CSS files, the styles will be automatically applied to your gadget.
Note:
Styles under CSS files are applied universally to all the gadgets. Make sure you have applied selectors in your CSS to apply it selectively to your gadgets. For example, if you use a style shown below, this style will get applied to all elements having myStyle as class.
.myStyle{
border:solid 1px #FFF;
}
To ensure proper encapsulation, use style as shown below.
.myGadget .myStyle{
border:solid 1px #FFF;
}
7. Use myGagdet style in the class of the root element in your gadget's view file.
Note:
Style will not be applied in myGadget2.