Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

AI OnAI Off
Navigation [hide] [expand]
Area: Optimizely CMS

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($) {
        // using this pattern helps keeping your privates private
            quickchat = {};
            quickchat.init = function(e, gadget) {
                setInterval(function() {
          // reload on an interval unless typing
            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

Last updated: Nov 25, 2015