popup (like sap.m.dialog) with multiple windows

[Former Member]

Hello together,

I´m planning to create a popup window, which has multiple views/screens/or something like that where you can navigate through. I want to keep it responsive so my initial thought was using sap.m.dialog. I´m also using only XML views/fragments and I want to keep it stringent.

I looked at the test ressources and found something pretty usefull for sap.ui.commons.Dialog - Dialog - SAPUI5 Demo Kit

Even though the idea is good, it doesn´t seem to work with sap.m.Dialog (especially the last example with XML fragments).

Does anyone of you know how to create a responsive popup with different screens (maybe a fragment for each view) where you can navigate through?

My approaches so far do not look very promissing, but I could also post some code if that helps.

Thanks in advance!

[Qualiture · Accepted solution]

Hi Felix,

I don't think the two dialogs are that much different. With the sap.m.Dialog fragment, nothing stops you from adding more views/fragments:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Dialog title="My Dialog Wizard" type="Message">
        <NavContainer width="100%" height="16em">
            <core:Fragment fragmentName="my.wizard.Page01" type="XML" />
            <core:Fragment fragmentName="my.wizard.Page02" type="XML" />
            <core:Fragment fragmentName="my.wizard.Page03" type="XML" />
            <core:Fragment fragmentName="my.wizard.Page04" type="XML" />
        </NavContainer>
        <beginButton>
            <Button text="Back" press="handleNavBack" />
        </beginButton>
        <endButton>
            <Button text="Next" press="handleNavNext" />
        </endButton>
    </Dialog>
</core:FragmentDefinition>

[Former Member · Accepted solution]

Thanks for your reply!

This might be indeed the best solution, but I´m still having troubles with the basic navigation. How do you reference to the NavContainer and navigate through the single fragments?

In the past I did it by creating the XML structure in JS, but I want to keep those two things separated now.

Thanks again for your help!

[Qualiture · Accepted solution]

Have a look at the API for NavContainer, that should give you everything you need

Give the NavContainer, as well as the contained Views, an ID in your XMLView (for instance, "myNavContainer" and "myView01", "myView02" etc).

A sample implementation could then be for instance:

handleNavNext: function(evt) {
    var navCon = this.getView().byId("myNavContainer");
    navCon.to(this.getView().byId("myView02"), "slide"); //hardcoded, but I'll leave it up to your own implementation
}


handleNavBack: function(evt) {
    var navCon = this.getView().byId("myNavContainer");
    navCon.back();
}

[Former Member · Accepted solution]

Yes, I thought that this should work, but when I define my fragment file outside the view, I can´t reference to the ID with this.getView().

So I did this

handleNavNext : function (e) {
     var navCon = sap.ui.getCore().byId("myNavContainer");
     navCon.to(sap.ui.getCore().byId("myFragment"), "slide");
}

But even though I can find the NavContainer by its ID sap.ui.getCore() is always undefined.

Anyway, thanks again for your help!

[Qualiture · Accepted solution]

In retrospect, I never give my fragments an ID, rather the content inside... So, if your fragments contain Pages, give these an ID, and reference that id instead.

Also, if you're using JS, you can use sap.ui.getCore().byId, but if you're using XML, you should get the reference via this.getView().byId instead