Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Custom Dojo widget with external resources

Vote:
 

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
Vote:
 

Hi Maris!

Modules are currently not automatically started when you have an editor inside the module that is loaded. In EPiServer 7.5, you can define that the module should be started after another module has been started by defining a module dependency with the runAfter attribute. You can read about it here: http://world.episerver.com/Documentation/Items/Developers-Guide/EPiServer-Framework/75/Configuration/Configuring-moduleconfig/

#83170
Mar 27, 2014 8:17
Vote:
 

So you could add the following configuration under the clientModule section in your module config file:

<moduleDependencies>
<add dependency="CMS" type="RunAfter" />
</moduleDependencies>

#83171
Mar 27, 2014 8:18
Vote:
 

Thanks Linus! It works - great!!!

#83174
Mar 27, 2014 9:17
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.