cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic views in XML. Alternative 'IF' and 'FOREACH'.

Former Member
0 Kudos

Hello!

When I spoke at different forums, many advised me to use to create view XML. I decided to take the advice. But I'm having trouble creating dynamic views.

Tell me, please, what are the alternative operators 'if' and 'forEach' in XML.

Thank you in advance.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Hi,

Can i get clear with your question? You need to create XML ? Can you give some example

Former Member
0 Kudos

Hi Pradeep!

Here's example of simple dynamic view in JavaScript. Can you implement it in XML?

CONTROLLER:


ap.ui.controller("sap.ui.simple.controller.JSView", {

   

  o_struct: {

  "panels": [

       {

       number: 1,

       expandable : true,

         expanded : true,

         buttons:[

             {

             text: "Hello!",

             press: "onShowHello"

             },

             {

             text: "Bye!",

             press: "onShowBye"

             }

         ]

       },

       {

       number: 2,

       expandable : true,

         expanded : false,

         buttons:[

             {

             text: "1",

             press: "onShow1"

             },

             {

             text: "2",

             press: "onShow2"

             },

             {

             text: "3",

             press: "onShow3"

             }

         ]

       }

  ]

  },

  onInit: function() {}

});

VIEW:


sap.ui.jsview("sap.ui.simple.view.JSView", {

  getControllerName: function() {

  return "sap.ui.simple.controller.JSView";

  },

  createContent: function(oController) {

  var o_data = oController.o_struct;

  var panels = [];

  var buttons = [];

  o_data.panels.forEach(function(panel, i){

  buttons = [];

  panel.buttons.forEach(function(button, j){

  buttons[j] = new sap.m.Button("SimpleButton_"+i+j, {

  text: button.text

  });

  });

  panels[i] = new sap.m.Panel("SimplePanel_"+i ,{

  headerText: "Panel-" + panel.number,

  expandable: panel.expandable,

     expanded: panel.expanded,

     content: [buttons]

  });

  });

  var oBox = new sap.m.VBox("SimpleVBox", {

  items: [panels]

  });

  var oPage = new sap.m.Page({

  title:"Simple JSView",

  showNavButton:false,

  content: [oBox]

  });

  return oPage;

  }

});

If yes, then me would be very interested to see your solution!

former_member183518
Active Participant
0 Kudos

You can make use of HanldeBars and do the same via XML views.


{{#each panels}}

  <Panel headerText="{{this.number}}">

       {{#each buttons}}

            <Button text="{{this.text}}"/>

       {{/each}}

  </Panel>

{{/each}}

JS Bin - Collaborative JavaScript Debugging

Go through this for how you can use if conditions using XML templates

XML Templating in SAPUI5 - User Interface Add-On for SAP NetWeaver - SAP Library

Former Member
0 Kudos

Hello, Sakthivel! Thank you for your example! And thanks for the link! You helped me a lot!

Answers (1)

Answers (1)

dominik_auras
Participant
0 Kudos

I have the same problem. Everyone says to use XML and most tutorials are with XML.

So I figured out this solution (havent tried it yet but should solve the Problem):

Define everything than can be static in XML view. And then everything that has to be dynamic in the onInit method oft the corresponding controller.

Because if you read the documentation you will notice that the onInit method is called after the view is completely loaded. So after this happened you can append the rest oft the view via JavaScript dynamically.

Hope this will help ...

I will test it soon too!

Kind regards,

Dominik