| Excerpt |
|---|
The reference shows the full usage of the custom dashboard loaders for Squirro dashboards. |
| Info |
|---|
This article is now outdated by two new features of Squirro. Please see: This article still serves as a nice reference for working with dashboard loaders. |
...
For theming, changing logos etc we recommend using the two features above. |
Each of the main components of a custom dashboard loader has its own section: JavaScript, CSS.
...
| File | Type | Explanation |
|---|---|---|
loader.js | JavaScript | The executable code of the dashboard loader. This file is loaded together with the dashboard. |
| loader.css | CSS | The CSS of the dashboard loader. |
Additionally a number of CSS files can be included in a loader. They will all be made accessible to the loader code.
...
The main entry point to a loader is the customLoad() method. This method should be implemented in a custom loader and is executed before any dashboard content is loaded.
Loading custom CSS
Please note that the loader.css file gets loaded by default since Squirro version 2.6.4.
| Code Block | ||||
|---|---|---|---|---|
| ||||
return Loaders.Base.extend({
customLoad: function () {
this.customResources['loader.css']();
},
}); |
Limiting CSS confusion
It's not mandatory but we recommended developers give custom CSS class names to widgets that are being changed by dashboard loaders, this allows other developers to better understand what is being changed later on and gives you some additional specificity when changing CSS. See the image below available on all widgets. (Custom CSS Class Name)
Selecting a Dashboard Loader
To apply your loader to a dashboard you need to select it in the dashboard config. You can apply different loaders to different dashboards.
A Better Development Workflow
You can use when-changed to auto upload CSS and JS changes when you save file changes locally. Simply copy your squirro_asset command and use it with when-changed.