Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

Access current page in ViewConfiguration

Vote:
 

I'm wondering if there is a way to access the current page in a ViewConfiguration. My Custom view looks like this:

[ServiceConfiguration(typeof(ViewConfiguration))]
public class CustomView : ViewConfiguration
{
   public CustomView()
   {
       .....
       ViewType = VirtualPathUtility.ToAbsolute("~/GetRemoteData/");
    }
}

And I need to put some sort of reference to the current page in .

Any suggestions?

#192662
May 22, 2018 12:54
Vote:
 

Hi!

It's a too early stage to access current page in the ViewConfiguration constructor I would guess. And also, ViewType is expected to be a dojo widget. Maybe this will work instead?

[ServiceConfiguration(typeof(ViewConfiguration))]
public class CustomView : ViewConfiguration<CustomPageType>
{
   public CustomView()
   {
       .....
       ControllerType = "alloy/contentediting/MyCustomViewController";
    }
}

And then your view controller script will look like this:

define([
// dojo
    'dojo/_base/array',
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/when',
// dijit
    'dijit/_TemplatedMixin',
    'dijit/_Widget',
    'dijit/_WidgetsInTemplateMixin',
// epi
    'epi-cms/core/ContentReference',
    'epi-cms/_ContentContextMixin'
],

function (
// dojo
    array,
    declare,
    lang,
    when,
// dijit
    _TemplatedMixin,
    _Widget,
    _WidgetsInTemplateMixin,
// epi
    ContentReference,
    _ContentContextMixin
) {

    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _ContentContextMixin], {
        templateString: 
            '<div style="width: 100%; height: 100%;"> \
                <div data-dojo-attach-point="mainLayoutContainer" data-dojo-type="epi/shell/layout/PreserveRatioBorderContainer" data-dojo-props="gutters: false, livesplitters: false" style="width: 100%; height: 100%"> \
                    <div data-dojo-attach-point="toolbar" data-dojo-type="epi-cms/contentediting/EditToolbar" data-dojo-props="region:\'top\'"></div> \
                    <div data-dojo-attach-point="notificationBar" data-dojo-type="epi-cms/contentediting/NotificationBar" data-dojo-props="region:\'top\', layoutPriority: 99"></div> \
                    <div data-dojo-attach-point="editLayoutContainer" data-dojo-type="epi/shell/layout/CardContainer" data-dojo-props="region: \'center\', layoutPriority: 100"> \
                        <div data-dojo-attach-point="iframe" data-dojo-type="epi/shell/widget/Iframe" data-dojo-props="fitContainer: true"> \
                        </div> \
                    </div> \
                </div> \
            </div>',

        startup: function () {
            if (this._started) {
                return;
            }

            this.inherited(arguments);

            when(this.getCurrentContext(), lang.hitch(this, function (context) {
                var contentLink = new ContentReference(context.id);
                this.iframe.load('/GetRemoteData/' + contentLink.id, null, false, false);
                this.contextChanged(context);
            }));
        }
    });
});

For this example, you will need the script to be placed in ~/ClientResources/Scripts/contentediting/MyCustomViewController.js

You also need a dojo path mapping in ~/module.config:

<module loadFromBin="false">
    <dojo>
        <paths>
            <add name="alloy" path="Scripts" />
        </paths>
    </dojo>

    <dojoModules>
        <add name="alloy" path="Scripts" />
    </dojoModules>
</module>
#193322
May 29, 2018 9:19
Vote:
 

Hi again!

After some research I have a much better solution for you:

[ServiceConfiguration(typeof(ViewConfiguration))]
public class MyViewConfiguration : ViewConfiguration<CustomPageType>
{
    public MyViewConfiguration()
    {
        this.ControllerType = "alloy/widget/GetRemoteDataIFrameController";
        this.ViewType = VirtualPathUtility.ToAbsolute("~/GetRemoteData");
    }
}

And this is the custom IFrameController script code (should be placed in ~/ClientResources/Scripts/widget/GetRemoteDataIFrameController.js):

define([
// dojo
    'dojo/_base/declare',
    'dojo/_base/array',
// epi
    'epi-cms/widget/IFrameController'
],

    function (
        declare,
        array,
    // epi
        IFrameController
    ) {

        return declare([IFrameController], {
            updateView: function (data, context) {
                // summary:
                //    Sets up the view by loading the URL of the inner iframe.
                if (data && data.skipUpdateView) {
                    return;
                }

                this.toolbar.update({
                    currentContext: context,
                    viewConfigurations: {
                        availableViews: data.availableViews,
                        viewName: data.viewName
                    }
                });

                var matchingItems = array.filter(data.availableViews, function (item) {
                    return item.key === data.viewName;
                });

                if (matchingItems.length === 0) {
                    return;
                }

                this.load(matchingItems[0].viewType + '/' + context.id, null, true);
            }
        });
    });

See my previous post for Dojo path mapping sample.

#193337
Edited, May 29, 2018 11:16
Vote:
 

Thank you for the response. 

Your suggestion worked fine apart from a slight issue:

When I use the MyCustomViewController I loose the "breadcrumb" and "toolbar" from the top of the EPi-interface.

I can see that you have defined divs for them in the template markup, but I have no idea how to fill that with default epi content. Any suggestions?

Thanks for the help.

#193338
May 29, 2018 11:17
Vote:
 

Yes, I actually posted a better solution right before your post, but you have probably already noticed that. :)

#193339
May 29, 2018 11:22
Vote:
 

Thanks again, I'll try that method and see if it helps with my UI issues!

Hi again!

After somse research I have a much better solution for you:

#193340
May 29, 2018 11:23
Vote:
 

Actually, if you can settle with query strings in your GetRemoteData controller, you can just use epi-cms/widget/IFrameController and read the pageidentifier from the query string parameter "id". Your view configuration would then be:

[ServiceConfiguration(typeof(ViewConfiguration))]
public class MyViewConfiguration : ViewConfiguration<CustomPageType>
{
    public MyViewConfiguration()
    {
        this.ControllerType = "epi-cms/widget/IFrameController";
        this.ViewType = VirtualPathUtility.ToAbsolute("~/GetRemoteData");
    }
}
#193341
May 29, 2018 11:32
Vote:
 

That worked perfectly :)

Thanks for taking the time to help, much appreciated.

#193343
May 29, 2018 11:39
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.