Custom Dojo widget with external resources

Member since: 2012

I am building custom widget for tag selection in CMS edit mode and would like to use custom styles and scripts, but can't get them loaded on the page.

Here is what I have.

I have this file structure:

ClientResources
    \Tags
        \styles
            \jquery-ui.css
            \jquery.tagit.css
        \vendor
            \jquery-2.0.3.js
            \jquery-ui-1.10.3.js
            \tag-it.js
        \TagsSelection.js

 Then I have EditorDescriptor to load my dojo Widget for tag editing:

    [EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "Tags")]
    public class TagsEditorSelectionEditorDescriptor : EditorDescriptor
    {
        public TagsEditorSelectionEditorDescriptor()
        {
            ClientEditingClass = "tags.TagsSelection";
        }
    }

TagsSelection.js:

define([
    "dojo/_base/declare",
    "dojo/store/JsonRest",
    "dijit/form/TextBox"
],
function (
    declare,
    JsonRest,
    TextBox) {

    return declare([TextBox], {
        postCreate: function() {
            $(this.domNode).find('input').tagit();
        }
    });
});

     

And module.config:

<?xml version="1.0" encoding="utf-8"?>
<module>
  <assemblies>
    <add assembly="Sample.Web" />
  </assemblies>

  <clientResources>
    <add name="tags-vendor" path="Tags/vendor/jquery-2.0.3.js" resourceType="Script" sortIndex="1" />
    <add name="tags-vendor" path="Tags/vendor/jquery-ui-1.10.3.js" resourceType="Script" sortIndex="2" />
    <add name="tags-styles" path="Tags/styles/jquery-ui.css" resourceType="Style" sortIndex="1" />
    <add name="tags-vendor" path="Tags/vendor/tag-it.js" resourceType="Script" sortIndex="3" />
    <add name="tags-styles" path="Tags/styles/jquery.tagit.css" resourceType="Style" sortIndex="2" />
  </clientResources>

  <dojoModules>
    <add name="tags" path="Tags" />
  </dojoModules>
  
  <clientModule>
    <requiredResources>
      <add name="tags-vendor" />
      <add name="tags-styles" />
    </requiredResources>
  </clientModule>
</module>

On the page type which uses tags selection I defined property with UIHint:

       [UIHint("Tags")]
        public virtual string Tags { get; set; }

And I am rendering it in the view:

@Html.PropertyFor(m => m.CurrentPage.Tags)

When I open edit mode and start editing the field I see in Chrome Developer Tools Network tab that TagsSelection.js is loaded, but there are no resources which are defined in modules.config.

I found this thread in forum: http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=65949

It describes that defining resources in modules.config is enought (at least as I understand).

Same also on Stack Overflow and other resources:

http://stackoverflow.com/questions/16853759/episerver-7-load-css-in-custom-dojo-modules

What I am missing?

#83163 Mar 26, 2014 21:32