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

Epi Dojo Editor Widget in Dashboard Gadget?

Vote:
 

Hello,

I am currently trying to get an epi dojo editor (ContentSelector, etc) to work inside a dashboard gadget.  I am unable to do so with epi widgets, It seems to load standard dojo/dijit widgets just fine.  It appears with certain epi widgets that specific things aren't loaded yet (since we are in the dashboard and not the CMS).  Does anyone have any clue how I can get something like a ContentSelector widget to work and run in a dashboard gadget?  

The specific error i'm receiving is...

dojo/parser::parse() error Error: Could not resolve dependency "epi.cms.contentRepositoryDescriptors" (epi.dependency)
    at dojo.declare.resolve (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/epi/epi.js:255:23)
    at declare.postMixInProperties (http://bbb.org.local/EPiServer/CMS/8.2.1.0/ClientResources/epi-cms/widget/_SelectorBase.js:156:64)
    at inherited__debug [as inherited] (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:4194:19)
    at declare.postMixInProperties (http://bbb.org.local/EPiServer/CMS/8.2.1.0/ClientResources/epi-cms/widget/ContentSelector.js:139:18)
    at declare.create (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dijit/_WidgetBase.js:350:8)
    at declare.postscript (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dijit/_WidgetBase.js:309:8)
    at new  (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:4381:7)
    at Object.parser.construct (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/parser.js:425:71)
    at Object. (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/parser.js:170:17)
    at Object.array.map (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:3646:24)(anonymous function) @ parser.js:844signalListener @ dojo.js:8324signalWaiting @ dojo.js:8315reject.reject @ dojo.js:8506signalDeferred @ dojo.js:8371signalListener @ dojo.js:8342signalWaiting @ dojo.js:8315Deferred.resolve @ dojo.js:8479signalDeferred @ dojo.js:8368makeDeferredSignaler @ dojo.js:8357signalListener @ dojo.js:8324signalWaiting @ dojo.js:8315Deferred.resolve @ dojo.js:8479(anonymous function) @ parser.js:655runFactory @ dojo.js:1107execModule @ dojo.js:1236(anonymous function) @ dojo.js:1271guardCheckComplete @ dojo.js:1251checkComplete @ dojo.js:1266onLoadCallback @ dojo.js:1428req.injectUrl.onLoad @ dojo.js:1662
ContentPane.js:574 Error parsing in _ContentSetter#undefined Error: Could not resolve dependency "epi.cms.contentRepositoryDescriptors" (epi.dependency)
    at dojo.declare.resolve (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/epi/epi.js:255:23)
    at declare.postMixInProperties (http://bbb.org.local/EPiServer/CMS/8.2.1.0/ClientResources/epi-cms/widget/_SelectorBase.js:156:64)
    at inherited__debug [as inherited] (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:4194:19)
    at declare.postMixInProperties (http://bbb.org.local/EPiServer/CMS/8.2.1.0/ClientResources/epi-cms/widget/ContentSelector.js:139:18)
    at declare.create (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dijit/_WidgetBase.js:350:8)
    at declare.postscript (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dijit/_WidgetBase.js:309:8)
    at new  (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:4381:7)
    at Object.parser.construct (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/parser.js:425:71)
    at Object. (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/parser.js:170:17)
    at Object.array.map (http://bbb.org.local/EPiServer/Shell/8.2.1.0/ClientResources/dojo/dojo.js:3646:24)declare._onError @ ContentPane.js:574lang.hitch @ dojo.js:3135(anonymous function) @ html.js:314signalListener @ dojo.js:8324signalWaiting @ dojo.js:8315reject.reject @ dojo.js:8506signalDeferred @ dojo.js:8371signalListener @ dojo.js:8342signalWaiting @ dojo.js:8315reject.reject @ dojo.js:8506signalDeferred @ dojo.js:8371signalListener @ dojo.js:8342signalWaiting @ dojo.js:8315Deferred.resolve @ dojo.js:8479signalDeferred @ dojo.js:8368makeDeferredSignaler @ dojo.js:8357signalListener @ dojo.js:8324signalWaiting @ dojo.js:8315Deferred.resolve @ dojo.js:8479(anonymous function) @ parser.js:655runFactory @ dojo.js:1107execModule @ dojo.js:1236(anonymous function) @ dojo.js:1271guardCheckComplete @ dojo.js:1251checkComplete @ dojo.js:1266onLoadCallback @ dojo.js:1428req.injectUrl.onLoad @ dojo.js:1662
ContentPane.js:431 Error undefined running custom onLoad code: This deferred has already been resolved
#122862
Jun 16, 2015 17:35
Vote:
 

I'm not sure about dashboard gadgets but I used the ContentSelector in a dojo component that plugs into the assets pane as a gadget. Maybe my blog post about it can help you in some way. I had to pass required settings to the ContentSelector to make it work.

http://geta.no/blogg/using-episervers-content-selector-widget-in-custom-component/

#122866
Jun 16, 2015 20:54
MiladZ - May 16, 2022 11:54
Hello Mattias,
I am trying to do something similar to the content selector you've described in your blogpost, but i want to use the component in a razor page. Any suggestions on how i can continue? I might sound stupid but I am new to this.
Vote:
 

Thanks for your reply Mattias.

My issue is that I can't use the content selector widget in the dashboard gadget because i'm assuming it needs the CMS dependency to be loaded, which at that point, it is not. 

I'm not sure how to force this, but it would be great if i was able to use CMS edit components in a dashboard widget because I have some things on this dashboard widget where they need to select a page, and am unsure how to do this any other way without trying to recreate the entire wheel.

#122867
Jun 16, 2015 21:23
Vote:
 

Hello again,

Maybe this forum post can help you. It includes a link to a Gist with code samples to use CMS components outside the CMS in a standard ASPX-page:

http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2014/4/Dojo-widgets-outside-the-shell---is-this-a-bad-idea/

#122884
Jun 17, 2015 10:45
Vote:
 

Thanks Mattias,

I have this sort of working (converted it to MVC and loaded it into an Iframe within the gadget to load up all the dojo stuff).  But I think an easier way would be to somehow tell epi through some javascript to force load their CMS compononents (since Shell is already loaded at this point).  and then I could just easily load up the dojo widgets after that.

Do you or anyone else have any ideas on how to force epi to load those CMS dojo components?

#122918
Jun 17, 2015 16:10
Vote:
 

I'm not liking the current implementation - as I fix one thing, another is broken, and so on.  If I could just figure out a way to tell epi that I need to load CMS components for this gadget that would work best and I wouldn't have to do all these tricks.  

if there was some sort of magical require[( )] statement i could do in a script tag for dojo and get epi to load the CMS components that would be great, but I can't seem to figure anything out.  

I'm really very close to just moving this into the CMS as a component there (my only issue is that the left and right asset/navigation panes are too small for the content I want, hence why the dashboard works so well, gives me more space to work with.

#122919
Jun 17, 2015 18:05
Vote:
 

I tested this out and I have a working version running. What I did first was to add a property to my gadget view model:

public IEnumerable<ModuleViewModel> CmsModuleSettings { get; set; }

Then in my Gadget controller I added a method to get all the CMS module settings (copied from the Gist I mentioned in my previous post):

static IEnumerable<ModuleViewModel> GetModuleSettings()
{
    // Adapted from EPiServer.Shell.UI.Bootstrapper.CreateViewModel

    // Creates a data structure that contains module resource paths (JS and CSS) and settings.

    var modules = ServiceLocator.Current.GetInstance<ModuleTable>();
    var resourceService = ServiceLocator.Current.GetInstance<IClientResourceService>();

    var moduleList = modules.GetModules()
        .Select(m => m.CreateViewModel(modules, resourceService))
        .OrderBy(mv => mv.ModuleDependencies != null ? mv.ModuleDependencies.Count : 0)
        .ToList();

    return moduleList;
}

Next I set the view model property in the Gadget controllers Index method:

myViewModel.CmsModuleSettings = GetModuleSettings();

In my view for the Gadget I added a data-property to one of my HTML-elements and also a container node to hold the ContentSelector widget:

<div id="cmsModuleSettings" data-cms-module-settings="@Html.SerializeObject(Model.CmsModuleSettings, "application/json")"></div>

<div id="contentSelectorNode"></div>

And finally I added this init code in my Gadget js:

require([
    "epi/shell/Bootstrapper"
], function (
    Bootstrapper
) {
    var cmsModuleSettings = JSON.parse($("#cmsModuleSettings").attr("data-cms-module-settings"));
    var bs = new Bootstrapper(cmsModuleSettings);

    bs.initializeApplication(null, "CMS").then(function() {
        require([
            "dojo/dom",
            "dojo/dom-construct",
            "epi-cms/widget/ContentSelector"
        ], function (
            dom,
            domConstruct,
            ContentSelector
        ) {
            var contentSelector = new ContentSelector({
                repositoryKey: "pages",
                allowedTypes: ["episerver.core.pagedata"],
                allowedDndTypes: [],
                showAllLanguages: false
            });
            
            contentSelector.placeAt(dom.byId("contentSelectorNode"));
        });
    });
});
#122922
Edited, Jun 17, 2015 20:47
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.