Lessons learned working with dojo in #Episerver backend UI

Some dos and don’ts I wished i knew…. Learning by doing.

Published 28th sept 2019
Episerver CMS version > 8

Had the *priviledge* working with Dojo when doing an Episerver addon, the task was extending the ThumbnailSelector.

EPiServer back-end UI uses the Dojo Toolkit as the JavaScript framework for all CMS client-side development.

Episerver uses version 1.8.9, a version from december 2014. While version 1 still being maintained, new development is primarily focused on modern Dojo by JsFoundation. Version 6 exists.

Explaining Dojo toolkit v1 basics with 2 examples

Declare a Dojo class

Import libs/instantiated classes and declare

In this example i override the _onButtonClick, add som custom stuff, and trigger the base _onButtonClick.

The this.inherited(arguments) statement calls the parent class’ method of the same name.

DON’TS

Do not mix frameworks

I used Jquery $.ajax in a method – seemed to work at the begining but I lost track of the context (this). Doh!

Do not set global variables

While loosing “this”, i parked my object in a global variable, like window.MyPlugin = this;

it seemed like a good idea as a quick fix, but somehow you lost context of wrapping dojo widgets. Doh!

Do not loose the context

The main conclusion here is to always have “this” pointing to your dojo class. if this point to window, you lost it.

Below are some tips

DOS

Use lang.hitch to stay in context with “this”

lang.hitch returns a function that will execute a given function in a given scope.

Postmessage and dojo

window.postMessage is a common pattern to allows an object or string to be sent to another window or frame using JavaScript. The window.postMessage method helps solve the Cross-Origin communication challenge by providing a controlled method of communicating between windows in different origins.

To listen on “message” use window.addEventListener(“message”, this._listener, true)

BUT NOT ENOUGH the _listener method is sent by value, meaning context will be gone.

to solve this

.bind(this) will pass by ref

Remember to remove the Listener properly or else you will have alot of listeners

Use When and XhrWrapper for Ajax calls

dojo/when transparently applies callbacks to values and/or promises as well as converts foreign promises to native ones.

Also look at dojo/request as a better alternative
https://dojotoolkit.org/documentation/tutorials/1.10/ajax/index.html

Run code when dom ready

dojo/ready registers a function to run when the DOM is ready and all outstanding require() calls have been resolved, and other registered functions with a higher priority have completed.

Passing values from backend cms to plugin

Use Editor descriptor:

This ends upp in “this.disableMediaSelector” in the dojo declared class object.

Use the DialogService

Require “epi/shell/DialogService”

this._dialogService.alert(“some message”);

More Dojo reading

More plugin help

How to pack a nuget addon for #Episerver, Example FotoWare Plugin

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso

Like it? please up vote
1