Get module path from Dojo widget

Vote:
 

Hi,

I've created a Dojo-based addon component, and in order to communicate with the server I've created an AJAX-enabled web service. It resides in a folder called Ajax in the module's root folder, but in order to call it I need to obtain the path to it. Hardcoding the url to something like "http://someserver/modules/MyModule/Ajax/ajax.asmx" would probably work but doesn't feel right. 

So, how can I determine the path to the (public) module folder from my Dojo widget? Is there a JS class similar to the EPiServer.Shell.Paths class that I can use?

#65557
Feb 01, 2013 9:12
Vote:
 

Hello William.

There are no such helpers on the client side, you can only use server side helper EPiServer.Shell.Paths.ToResource and pass it results to the client side. The way, how it can be passed, depends on how your client component is loaded.

#65573
Feb 01, 2013 13:05
Vote:
 

Ok, I've followed the pattern described in this article:

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2012/10/Creating-a-Dojo-based-component/

The problem is, the widget is loaded by the CMS, and the only server-side code that exists is where the the widget is defined (using the Component attribute). So I don't really see where I would be able to pass the paths info to the client?

Speaking of widgets, how can i define custom CSS for my widget? I have defined the baseClass property in my widget, but how can I import the CSS file? Or do I have to rely on inline styles only?

#65576
Feb 01, 2013 13:37
Vote:
 

See Stefans blog post about how to load a custom CSS-file:

http://world.episerver.com/Blogs/Stefan-Torstensson/Dates/2012/12/Adding-a-new-device-to-the-view-resolution-drop-down/

If you want to load or update data from your component I suggest you go for the REST-approach described in this post:

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2012/11/Creating-a-more-advanced-property-editor/

Here is some documentation about the JSON-REST-store in Dojo:

http://dojotoolkit.org/reference-guide/1.7/quickstart/rest.html

#65595
Edited, Feb 01, 2013 16:23
Vote:
 

Well, if you really want to pass some value to the client side, you can define your component on the server side like this (referring to the sample from Linus blog post):

[Component]
public sealed class CustomComponent : ComponentDefinitionBase
{
    public CustomComponent()
    : base("alloy.components.CustomComponent")
    {
        PlugInAreas = new [] { PlugInArea.AssetsPanel};
        Categories = new [] {"cms"};
        Title = "My custom component";
        Description = "Shows information about the current content item.";
    }

    public override IComponent CreateComponent()
    {
        Settings["myCustomProperty"] = "MY_SERVER_VALUE";
        return base.CreateComponent();
    }
}

    

And whatever you add to the Settings dictionary will be set as a property of your client side component:

define([
...
) {
    return declare("alloy.components.CustomComponent",
        [_WidgetBase, _TemplatedMixin, _ContentContextMixin], {
            ...
            myCustomProperty: null,
            ...
            contextChanged: function (context, callerData) {
                if (this.myCustomProperty === "MY_SERVER_VALUE") {
                	...
                }
                ...	
            }
        });
});

    

#65606
Edited, Feb 01, 2013 17:29
Vote:
 

Very helpful, thank you both!

#65620
Feb 04, 2013 8:12
Vote:
 

There's actually rudimentary client side support for resolving paths in the epi/routes module. It's primarily intended for resolving routes to controllers, but can be used for other purposes as well.

If you declare a route in your module.config like:

<routes>
  <route url="{moduleArea}/{path}">
  </route>
</routes>

You can then use the epi/routes module to resolve server side paths like below:

var path = routes.getActionPath({
  moduleArea: "MyModule",
  path: "path/to/my.aspx"
});

For more information, have a look at the the module.config documentation.

#65626
Feb 04, 2013 10:41
Vote:
 

Thanks, I will try that out.

One final question: I've noticed that the epi.cms.widgets.base resource bundle isn't loaded in the dashboard, and thus the method of including custom CSS-files by piggybacking as described in Stefan's blog post doesn't work for my dashboard widget. Is there another resource bundle in dashboard mode that I can piggyback on? 

#65673
Feb 05, 2013 13:38
Vote:
 

The piggy-backing part described in my blog post is just a way of getting css files into the CMS UI when there are no hooks for pulling the resources in.

If you're creating a component, your client module will be activated as soon as the component is added to the UI. So prefereably you should create your own resource bundle in your module.config, and it should be loaded automatically when needed.

<clientResources>
  <add name="my.uniquely.named.bundle" path="ClientResources/fancy.css" resourceType="Style"/>
</clientResources>

<clientModule>
  <requiredResources>
    <add name="my.uniquely.named.bundle" />
  </requiredResources>
</clientModule>

    

#65679
Feb 05, 2013 15:08
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.