Error when trying to load custom Client Editor

Question

I've followed the steps in this article to create a basic custom editor but I'm getting a 404 error when trying to enter Forms Edit mode from

/EPiServer/CMS/1.0.456/ClientResources/dtk/app/editors/EmailTextbox.js

The document linked article states that EPiServer automatically adds a mapping from /ClinetResources/Scripts to the app namespace. I took a punt and added a module.config to the root of my site, like so:

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
        <!-- This adds the Alloy template assembly to the "default module" -->
        <add assembly="PropertyTest" />
    </assemblies>

    <dojoModules>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
        <add name="app" path="Scripts" />
    </dojoModules>
</module>

This fixed the 404 but now I get a type error in the console when I try to enter forms mode

TypeError {}                                   dojo.js:15
(anonymous function)                    dojo.js:15
dojo.Deferred.reject.errback         dojo.js:15
_174                                              dojo.js:15
dojo.Deferred._171.then.then       dojo.js:15
dojo.Deferred.when.dojo.when      dojo.js:15
dojo.declare._createInternal          widgets.js:2
(anonymous function)                    widgets.js:2
_388                                              dojo.js:15
map                                               dojo.js:15
dojo.declare._createWidgets        widgets.js:2
(anonymous function)                   widgets.js:2
_388                                             dojo.js:15
_c6                                                dojo.js:15
_36                                                dojo.js:15
_7a                           dojo.js:15
_ee                           dojo.js:15
req.injectUrl._109                           dojo.js:15

Why is this erroring?

The source of my JS file is as per the linked article but I've included below for completeness.

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

    declare("app.editors.EmailTextbox", [_Widget, _TemplatedMixin], {

        // templateString: [protected] String  
        //    A string that represents the default widget template.  
        templateString: '<div> \
                          <input type="email" data-dojo-attach-point="email" data-dojo-attach-event="onchange:_onChange" /> \
                         </div>',

        postCreate: function () {
            // summary:  
            //    Set the value to the textbox after the DOM fragment is created.  
            // tags:  
            //    protected  

            this.set('value', this.value);

            if (this.intermediateChanges) {
                this.connect(this.email, 'onkeydown', this._onIntermediateChange);
                this.connect(this.email, 'onkeyup', this._onIntermediateChange);
            }
        },

        focus: function () {
            // summary:  
            //    Put focus on this widget.  
            // tags:  
            //    public  

            dijit.focus(this.email);
        },

        isValid: function () {
            // summary:  
            //    Indicates whether the current value is valid.  
            // tags:  
            //    public  

            var emailRegex = '[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+';
            if (!this.required) {
                emailRegex = '(' + emailRegex + ')?';
            }
            var regex = new RegExp('^' + emailRegex + '$');
            return regex.test(this.value);
        },

        onChange: function (value) {
            // summary:   
            //    Called when the value in the widget changes.   
            // tags:   
            //    public callback   
        },

        _onIntermediateChange: function (event) {
            // summary:   
            //    Handles the textbox key press events event and populates this to the onChange method.   
            // tags:   
            //    private   

            if (this.intermediateChanges) {
                this._set('value', event.target.value);
                this.onChange(this.value);
            }
        },

        _onChange: function (event) {
            // summary:   
            //    Handles the textbox change event and populates this to the onChange method.   
            // tags:   
            //    private   

            this._set('value', event.target.value);
            this.onChange(this.value);
        },

        _setValueAttr: function (value) {
            // summary:   
            //    Sets the value of the widget to "value" and updates the value displayed in the textbox.   
            // tags:   
            //    private   

            this._set('value', value);
            this.email.value = this.value || '';
        }
    });
});

score 0 · Answer 1 · answered Nov 13 '13 at 12:46

If you've gotten your script to load properly then it's a good idea to deploy the debug versions of the script files. Head over to Debugging EPiServer CMS client side files for the download and instructions on how to deploy them.

With the compressed and minified versions it's very hard to figure out what's going wrong.

score 0 · Answer 2 · edited Nov 22 '13 at 08:20

0

Are you aware that you can just use the RegularExpression attribute if you want email validation ?

[RegularExpression(EPiServer.Framework.Validator.EmailRegexString)]  
public virtual string Email { get; set; }

edited Nov 22 '13 at 08:20

AlexB

7,302
12
56
74

answered Nov 22 '13 at 07:58

Linus Ekström

1

Hi @AlexB. The EmailTextBox is the example editor plugin from EPiServer. I was using it to illustrate the JavaScript issue loading editor plugins, not as a genuine *how do I...* – Greg B Nov 22 '13 at 12:15

score 0 · Answer 3 · answered Sep 19 '16 at 07:52

0

If this occurs on a development box the solution is to disable the Broswer Link in Visual Studio.

http://www.herlitz.nu/2016/09/19/cant-load-the-episerver-edit-gui-in-development-environment/

answered Sep 19 '16 at 07:52

Eric Herlitz

25,354
27
113
157

Error when trying to load custom Client Editor

3 Answers3