dynamically selecting fragment

[ashish_bansal]

Hi All,

We are starting to work on a Fiori App where we have a Master Detail page. As it is common with the detail section we also have a table, which displays some data. For us, this table could have different layout (when a different issue is selected in the Master section) while other information on the detail page remains same. So i am planning to use fragments (which would contain table) in the view and will have different fragments for different layouts (which are fixed). But i am struggling to find how to dynamically select specific fragment when specific issue would be selected from the Master List.

For e.g. I would have 1 master view, 1 detail view and 4 fragments (corresponding to 4 issues we have). In the master list i would see those 4 issues and when i select any of them, the detail view and the corresponding fragment would be displayed. Is it possible to select any fragment or do i have to include all the fragments in the Detail view and then maybe make it visible and invisible.

I am planning to have only fragments (and not separate views for every issue) because maybe we would not require seperate controllers for those table as it contains some basic data for display.

I am new to Fiori development so i would appreciate if you could provide me with some code snipplets on how to dynamically select fragments. Thanks.

Regards,

Ashish

[ashish_bansal · Accepted solution]

Or is it somehow possible to include a fragment into a view after instantiating a fragment programmatically ??

[former_member182862 · Accepted solution]

Yes, it is possible to do this programmatically in view. Example

        createContent: function(oController) {
            this._oTables = sap.ui.jsfragment({
                fragmentName: "example.fragment.Table"
            }, oController);
...
           return page;
      },

-D

[former_member206705 · Accepted solution]

Hi Ashish,

Since you're using XML views for the Fiori app, I'd suggest the following approach

In your detail page, have a container (like a VBox).

In the attachRoutePatternMatched function in the detail controller, decide the fragment that you'd like to use, depending on the contextPath argument from the master list (i.e, selected Item of the master list). Now you can destroy the items inside the VBox and add this fragment as its content. Here is a sample snippet

in S3.controller.js

this.oRouter.attachRoutePatternMatched(function(oEvent) {
  if (oEvent.getParameter("name") === "detail") {
  var contextPath = oEvent.getParameter("arguments").contextPath
  var context = new sap.ui.model.Context(view.getModel(), '/' + contextPath);
  view.setBindingContext(context);
  var vbox = view.byId("vBox");
 //default is condition 1
  var fragment = sap.ui.xmlfragment(["com.sap.md.sample.view.odd"].join("."), this);
  if(/*condiion 1*/){
  fragment = sap.ui.xmlfragment(["com.sap.md.sample.view.even"].join("."), this);
  }
  debugger;
     vBox.destroyItems(); //destroyt the items since you dont want the previous fragment inside it anymore
  vBox.addItem(fragment); //add the new fragment

  }
  }, this);

Hope this helps,

Thanks and best regards,

shilpa

[ashish_bansal · Accepted solution]

Hi Shilpa,

Super... Thanks a lot for your reply. Looks really good. Maximum of the time it works but many times i also get error messages in the console saying: "adding element with duplicate id 'listingDetail'"
Here listingDetail is the id of the element in my fragment. It looks like it is trying to initialize the same thing again. But surprisingly this happens only few times and if this happens then ofcourse nothing is displayed. Is there any way to make sure than this error is not thrown or do you know why does this happen? Thanks again..

Regards,
Ashish

[ashish_bansal · Accepted solution]

Hi Dennis,

Thanks for your reply. I actually already tried the same and put this createContent inside the detail controller js but it never gets called. How do i call it, i thought this should have got called by itself but not in my case. Do i have to do something in the view??

Regards,

Ashish