SAPUI5/OPENUI5 - Routing with Dialogs

Question

I´m currently stuck with the combination of routing and dialogs. I have a view with list elements and when I click on an element in the list I want the Detail view to be shown in a Dialog (Popup). The thing is, I also want the ID of the list element in my url and when I reload the page while the dialog is still open, I want to jump to this exact position again (the dialog is in fullscreen, it looks like a own view).

So, what I got so far:

When I click on an element in the list I call this function

campaignSelectHandler : function () {
    if(!this.fragment) {
        var controller = new sap.ui.controller("ui.controls.fragments.EventDetail");
        this.fragment = sap.ui.xmlfragment("ui.controls.fragments.EventDetail", controller);
    }
    //this.router.navTo(navigation.Constants.EventDetailFragment, {id : 12345});
    this.router.navTo(navigation.Constants.EventDetailFragment, {id: 1337});
    this.fragment.open();
},

Next thing is I jump to my fragment

<Dialog     id="dialogEventDetail"
        xmlns:view="ui.views.pages"
        xmlns="sap.m"
        xmlns:controls="ui.controls"
        xmlns:core="sap.ui.core"
        xmlns:mvc="sap.ui.core.mvc"
        contentWidth="100%" contentHeight="100%"
        showHeader="false"
        class="eventDetail"
        horizontalScrolling="false"
        verticalScrolling="false">

<mvc:XMLView viewName="ui.views.pages.EventDetail">

</mvc:XMLView>

</Dialog>

In this Dialog fragment I load my view including my controller etc. This works for opening a Dialog and display the url path but obviously as soon as I reload the page everything is gone.

In addition to that, I extend the "ui.views.pages.EventDetail" view from a AbstractController where I initiate the router. It works fine for my normal view but when I open the dialog I loose the reference to it and cannot route back to my initial view.

I know this solution cannot work so I hope you have some advices on how to get it to work!

Thanks in advance!

BTW: This is the Component.js

routes : [
            {
                pattern : "",
                name : navigation.Constants.MyEvents,
                view : navigation.Constants.MyEvents,
                viewId : navigation.Constants.MyEvents,
                targetAggregation : "pages",
                targetControl : "idAppControl",
                subroutes : [
                    {
                        pattern : "{id}",
                        name : navigation.Constants.EventDetailFragment,
                        view : navigation.Constants.EventDetailFragment
                    }
                ]
            }

Answer 1

On refresh your attachRouteMatched method is called.

onInit: function() {
    var _this = this
    var oRouter = sap.ui.core.routing.Router.getRouter("appRouter");
    //can also use directly this.oRouter.attachRouteMatched(...)
    //I see you using this.router 
    oRouter.attachRouteMatched(function(oEvent) {
        if (oEvent.getParameter("name") !== navigation.Constants.EventDetailFragment) {
            return:
        }
        try {

            var oHasher = new sap.ui.core.routing.HashChanger();
            var hash = oHasher.getHash(); //this will get everything which is in URL after #
            //TODO : split the hash accordingly and find the event id and open your dialog and assign to oEventId
            if (!_this.fragment) {
                var controller = new sap.ui.controller("ui.controls.fragments.EventDetail");
                _this.fragment = sap.ui.xmlfragment("ui.controls.fragments.EventDetail", controller);
            }
            _this.router.navTo(navigation.Constants.EventDetailFragment, {
                id: oEventId
            });
            _this.fragment.open();
        } catch (e) {
            jQuery.sap.log.warning("Couldn't find the right event")
        }
    }, this);
}

Actually you can reuse campaignSelectHandler just change the signature implementation such a way that it accepts the eventId

Hope this helps