Creating a Dojo based component
This will plug in a component to the EPiServer CMS assets panel. The actual logic for this UI component is located in something called a widget, which is an abstraction layer on top of the browser DOM (There are some similarities with web controls: they both abstract the DOM and they both have a life cycle). The base functionality for every widget is defined within Dijit which is Dojo’s system for creating user interface “classes”. In this first example we’ll just scratch the surface by creating a simple widget that shows the name of the current content item (page, block etc.) in a div.
On the server side plug-in we defined WidgetType = “alloy.components.CustomComponent”, which is the name of the client side widget used for rendering the UI. In this example we also have a module.config file in the site root that defines a new root namespace for Dojo called “alloy” that corresponds to the “ClientResources/Scripts” folder. Since we have added the namespace “components” to our widget definition we add our widget here: “[siteroot]/ClientResources/Scripts/Components/CustomComponent.js”.
Let’s dissect the contents of the widget to get an understanding of what it contains:
“define” is one of few variables that DOJO adds to the global namespace and is used when declaring AMD modules. Define takes three arguments, a module name, an array of dependencies and the module factory. The module name and dependencies are optional, and in this example the optional module name has been omitted since it will be resolved automatically by the loader. So the first parameter in this example is an Array of strings that defines all dependencies that this class needs to work. The second parameter is a function, the factory, which gets passed all dependencies and returns the resulting module class. When using this pattern all variables will be declared in the local scope of your widget or class and don’t have to resort to using global variables.
Note: Defining modules and classes using this pattern in not specific to Dojo but part of the AMD pattern (Asynchronous Module Definition). More information about the AMD pattern is available here: https://github.com/amdjs/amdjs-api/wiki/AMD
- WidgetBase: The base class used to implement widgets. There are many derived classes that you can inherit from but in this sample we just want to have a plain vanilla widget.
- _TemplatedMixin: This mixin gives the possibility to add an HTML template to the widget by setting the templateString property.
- _ContentContextMixin: This is a class defined in EPiServer CMS that gives you some methods and events to keep track of the currently selected content item, for instance getCurrentContent and contentContextChanged.
We add a simple html string to the templateString property and in the template we add a div with the attribute data-dojo-attach-point="contentName". This enables us to interact with this node through a property with the same name as the value of the attribute, in our case “contentName”.
In our class we also implement the contentContextChange event and use the “dojo/html” class to set the inner html of our div to the name of the current content item. The result is pretty similar to the web forms sample in the first blog in this series:
This is part of a blog post series to extend the user interface in EPiServer 7:
Plugging in a Dojo based component