Help:Widgets

Pages in the widget namespace may only be edited by those with certain rights for security reasons. Please contact a bureaucrat for these rights. A basic overview of widgets is available at mw:Extension:Widgets.

Special:BlankPage may be useful for testing general HTML, CSS, and JavaScript.

JavaScript libraries
MediaWiki ships with some JavaScript libraries already. In particular, its own JS api and jQuery are always loaded. Some libraries however are not loaded by default and must be loaded with  or. Listed are the module names to use when loading them:
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Creates a global  variable with functions , , , , ,.
 * 
 * 

Waiting on the document to load
Inline  tags will load before jQuery and other libraries that ship with MediaWiki. The boilerplate code below waits until everything is loaded before executing the script.

Alternatively, the ResourceLoader queue can be used:

Note: The ResourceLoader queue doesn't appear to be documented anywhere, and may not be a stable API.

Including wiki data into widgets
The wiki uses Cargo for its templates. There are two main methods of getting data from the wiki's Cargo database into the widget.

Calling a query in wikitext
Using this method, the data can be cached by the MediaWiki server.

Passing as a parameter with HTML data attributes
HTML data attributes along with the Smarty  modifier are used for this tutorial. For more advanced escape options, see the documentation on widgets.

Suppose the source code of the widget is the following:

var rootElement = document.getElementById("someid");

var heroes = (rootElement.dataset.heroes); console.log(heroes);

var exampleJSON = JSON.parse(rootElement.dataset.someJsonExample)[1]; console.log(exampleJSON);

And suppose the wikitext that calls the widget is the following: When run, the console output is something like the following: ???: Masked Knight, Abel: The Panther a

The result of a cargo query is passed to param1, while param2 demonstrates that the  option properly escapes any input passed. Data can be passed in any format because of this, including JSON. For example, cargo queries or modules may produce JSON-formatted output that may be passed into a widget.

Alternative
Instead of passing the result of the query as a parameter, it can be also placed elsewhere and operated on by the widget's JavaScript. Be sure to take into consideration placement and loading order. 

The first div statement produces something like the following for HTML output: The JavaScript included in the widget can then operate on the HTML data attribute.

Using the MediaWiki API
This method uses the MediaWiki API.

The cargoquery action can also be used to retrieve data. With this method, the client sends an API request to retrieve data. The following javascript snippet can be pasted in a web browser console to demonstrate how it works. Using this method, data can be lazy loaded only when needed. However, it cannot be cached by the MediaWiki server. This method is probably best used if there is a very large data set and the average user is only expected to use only a small portion of it. Note also that anonymous user API calls can only retrieve 500 results at once, so to get more you must set up a promise chain and use Cargo's offset parameters until there are none left.

Smarty syntax
Use of smarty syntax is possible in widgets, lists of useful functions or statements can be found here: There is no easy way to preview and test these, so feel free to use Widget:Test as a testing ground.
 * https://www.smarty.net/docsv2/en/language.modifiers.tpl
 * https://www.smarty.net/docsv2/en/language.builtin.functions.tpl