Creating an editor widget

November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off

Home / Forums / Developers (Main Products) Forum / CMS 7.5 - 11 /

Creating an editor widget

Jonas Lindau

Vote:

Hi,

So i finally decided to jump the dojo hurdle and try to create a editor widget. I really tried to make it as simple as possible and followed the instructions on this page: https://world.episerver.com/documentation/developer-guides/CMS/editing/Creating-an-editor-widget/

But, ofcourse it's not working and i really can't figure out why.

The first step i did was create the JS-file under ClientResources/Scripts/Editors/EmailEditors.js.

define([
    "dojo/_base/declare",
    "dijit/_Widget",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _Widget,
    _TemplatedMixin) {

        return declare([_Widget, _TemplatedMixin], {
            templateString: '<div><input type="email" data-dojo-attach-point="email" data-dojo-attach-event="onchange:_onChange" /><div>'
        })

    });

Then i createt a property on one of my pages

[ClientEditor(ClientEditingClass = "msbse/editors/EmailEditor")]
[Display(Name = "Email", Description = "", GroupName = SystemTabNames.Content, Order = 50)]
public virtual string Email { get; set; }

And, a step i guess is missing in the documenteation is creating a module.config? Or is this obsolete? Anyway, i created i module.config

<?xml version="1.0" encoding="utf-8"?>
<module>
  <assemblies>
    <add assembly="MsbSe" />
  </assemblies>
  <dojo>
    <paths>
      <add name="msbse" path="Scripts" />
    </paths>
  </dojo>
</module>

Edit mode on tha page conatining the property ends up blank, and the console shows this error:

placeAt@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:21462
addChild@http://localhost:50403/EPiServer/CMS/11.4.4/ClientResources/epi-cms/widgets.js:2:993043
_addDefaultHandlers/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:247217
_createInternal/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245713
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
_2f2@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:75368
_2f1/_2ff.then@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:77262
when@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:82064
_createInternal@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245550
_createWidgets/_6e6<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245144
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
map@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:33783
_createWidgets@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245074
createWidgets/</<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:244659
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
_c8@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:11378
_36@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:12993
_7c/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13239
_37@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13083
_7c@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13164
_f0@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:14796
_10a@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:17619
widgets.js:2:245265
place@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:95510
addChild@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:37667
_19e@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:39734
addChild@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:265450
_19e@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:39734
addChild@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:649091
_19e@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:39734
addChild@http://localhost:50403/EPiServer/CMS/11.4.4/ClientResources/epi-cms/widgets.js:2:993091
_addDefaultHandlers/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:247217
_createInternal/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245713
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
_2f2@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:75368
_2f1/_2ff.then@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:77262
when@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:82064
_createInternal@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245550
_createWidgets/_6e6<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245144
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
map@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:33783
_createWidgets@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:245074
createWidgets/</<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/epi/shell/widgets.js:2:244659
hitch/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:30936
_c8@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:11378
_36@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:12993
_7c/<@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13239
_37@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13083
_7c@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:13164
_f0@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:14796
_10a@http://localhost:50403/EPiServer/Shell/11.4.4/ClientResources/dojo/dojo.js:15:17619


WidgetFactory: Could not resolve one or more widgets

What im i missing here?

#199465

Nov 28, 2018 9:58

David Knipe

Vote:

Hi Jonas

The Alloy starter site has an example of a property editor in Dojo: https://github.com/episerver/alloy-mvc-template/blob/master/src/Alloy.Mvc.Template/ClientResources/Scripts/Editors/StringList.js

You might be able to glean something from here to make yours work?

David

#199472

Nov 28, 2018 11:43

Ben McKernan

Vote:

My first guess would be to make sure the name of the JS file matches the name in the ClientEditor attribute, e.g.

[ClientEditor(ClientEditingClass = "msbse/editors/EmailEditors")]

That is to say EmailEditors with an s on the end.

#199488

Nov 28, 2018 14:55

Please login to post a reply