Gadget development, step 3: Developing the client side
Defining resources
Use the following attribute on the controller to place the gadget on the dashboard.
C#
[Gadget]
[EPiServer.Shell.Web.ScriptResource("Content/QuickChat.js")]
public class QuickChatController : Controller
{
}
This declares a JavaScript file located in the Content directory of the QuickChat module, which is loaded with the dashboard. The script is loaded every time the dashboard appears, regardless of whether there are any QuickChat gadgets, so take care to put stable code in the JavaScript file. While the script is executed each time the dashboard loads, the way to associate with a gadget instance is client script init methods:
[Gadget(ClientScriptInitMethod = "quickchat.init")]
[EPiServer.Shell.Web.ScriptResource("Scripts/QuickChat.js")]
public class QuickChatController : Controller
Client scripts
The script resource attribute assumes a JavaScript quickchat.init method is present on the client as shown in the following quickchat.js file.
C#
(function($) {
quickchat = {};
quickchat.init = function(e, gadget) {
setInterval(function() {
var typedText = $("input[type='text']", gadget.element).attr("value");
if (!typedText) {
gadget.loadView("Index");
}
}, 5000);
};
})(epiJQuery);
The init method is invoked by the dashboard and starts updating the gadget every five seconds. While this is an easy way to update the gadget regularly, it is not particularly suited for a chat because it steals focus from the text box.
Next step
Do you find this information helpful? Please log in to provide feedback.
Last updated: Nov 25, 2015