Fragments with their own controller - Initiated by a XML VIew

[Former Member]

Hello again!

a new day - new issues... 😞

I have to admit, I am going to get really frustrated. You always have a learning curve, when you are working with a new framework, but SAPUI is a really tough one (close second was/is Spring , a bit better after Spring boot).

I do not know how much time I invested to rewrite a js-example in a XML view. I am really not sure if it is the right approach to give the user millions of ways to do a thing. But enough complaining.

The problem today is how to attach a controller to a fragment. Pretty easy achievable in js, example: DialogTest/initial.controller.js at master · njames/DialogTest · GitHub

I am doing exactly that for my dialogs. But now I have a fragment, which will be shown directly at startup in the view.

Normally I have something like this:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ViewController">

    <Page>

        <content>

            <core:Fragment fragmentName="superView" type="XML" />

        </content>

    </Page>

</mvc:View>

But how to pass a controller in this case? 'superView' needs its own controller.

Of course, I could place it using the afterRendering Method of the view.

But this is not the way it should work...

Hope you can help me again!

Thanks a lot and best regards

Ben

[Qualiture · Accepted solution]

As the documentation states,

Fragments are light-weight UI parts (UI subtrees) which can be reused, defined similar to views, but do not have any controller or other behavior code involved

If you need to have a separate controller for that part of your UI, why not simply use a View instead of a Fragment?

[Former Member · Accepted solution]

Thanks for your answer!

As you may read, you can achieve it using JS (and totally without any hacks using the standard api).

The use cases are extremely wide-spread.

Just consider a button, that has always the exact same functionality, but appears on different views. (Just an example...)

Now to the question why no view.

I never saw an easy method to put a view into another view without doing routing or stuff like that.

If you have a single-liner xml which can initiate a view with a controller inside another view, I am happy to use it. I do not really care if it is named fragment or view.

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ViewController">

    <Page>

        <content>

            <core:Fragment fragmentName="superView" type="XML" /> <-- If you can change this line, so that another view will be put there, I will gladly take it!

        </content>

    </Page>

</mvc:View>

[Qualiture · Accepted solution]

I must admit I have never tried calling a Fragment with a separate controller (i.e. other that the controller of the view the fragment is called from)

But for nesting views, you could use this:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ViewController">
    <Page>
        <content>
        <mvc:XMLView id="nestedView" viewName="com.biz.views.NestedView"></mvc:JSView>
        </content>
    </Page>
</mvc:View>

Or, alternatively (if you need a different controller for the nested view):

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="ViewController">
    <Page>
        <content>
        <mvc:XMLView id="nestedView" viewName="com.biz.views.NestedView" controller="someOtherController"></mvc:JSView>
        </content>
    </Page>
</mvc:View>

[Former Member · Accepted solution]

Awesome, that is exactly what I was looking for. Never saw this in any documentation!

That helps a lot and solves my issue.

Even if it seems that in a js-view you could do still more than in a XML view.

Thanks Robin!

[Former Member]

Hi Ben,

The Fragment would just inherit the controller of the View where you instantiated it wouldn't it?

Is there a reason you want it to have a separate controller? I presume you just want to hook up UI elements from the Fragment to a controller?

Gregor

[Former Member]

Hi Gregor,

Robin already helped me to change from a fragment to nested views. That is working just fine.

The reason to do this is mainly the single responsibility principle. My controller should only be used for one thing and not for a lot of things. The view shows a lot of different charts and menus, which do not always have one common case. So if I put everything in one controller, I would work against this pattern.

The other solution would be to use the controller for just delegating calls from the GUI, which I also do not like, because sometimes the code need to change the GUI (e.g. binding path of a control).

Of course, things like connecting to a back end need to be stored in a seperat service / component. But GUI related things should be done in the controller without violating the SRP.

Another use case would be, where you have a fragment with a button in it. The button always have the exact same function. You would need to change the controller of each view, where this fragment is used, in order to give the button its function. In my opinion not really a way to go.

Maybe I am wrong in my understanding. If you have a different view, I would really love to hear it. Perhaps I could adopt my coding style accordingly.

Best regards

Ben

[Former Member]

Great points, I was just thinking about having visibilty of UI elements outside of the fragment.

For example I have a Fragment that shows a map but I need to take the location from an input field on the main view rather than the Fragment.

Having a shared controller would mean everthing is accessible from one place if that makes sense.

I guess you could access UI elements globally via sap.ui.getCore().byId rather than view.byId() in this case though.

Sounds like nested views are the way to go for you though. I'm mainly using Fragments as a means of organising things into smaller chunks rather than for the purpose of reuse at the moment.

Cheers,

Gregor