How dynamically create UI element in front-end or back-end

[al]

How dynamically create UI element in front-end or back-end,  is there any suggestions or demo codes? 

A UI5 beginner , so please give me some details

1. oData structure:

2. Q1- Q8 should be displayed in a radio button group.

    if Q? has value , then add one radio button in the group.  otherwise do not display it.

   eg:  case 1--- show 2 radio buttons: FF & HH

           "Q1" : "",

            "Q2" : "",

            "Q3" : "",

            "Q4" : "",

            "Q5" : "",

            "Q6" : "FF",

            "Q7" : "",

            "Q8" : "HH"

          case 2  show 4 radio buttons : AA BB FF & HH

            "Q1" : "AA",

            "Q2" : "BB",

            "Q3" : "",

            "Q4" : "",

            "Q5" : "",

            "Q6" : "FF",

            "Q7" : "",

            "Q8" : "HH"

[former_member182372 · Accepted solution]

http://jsbin.com/lifayewosu/edit?html,css,js,output

[al · Accepted solution]

Hi Rashchynski,

Reading your codes and

many thanks!

i wan to read the odata first then add the radio button into radio button group. 

i check api there is  addButton(oButton): sap.m.RadioButtonGroup .  but do not know how to implement it . 

your codes define the 4 radio button in html file but i want to add them dynamically. 

Regards

Alex

[Abdul_Waheed · Accepted solution]

var _radioButtonGroup = new sap.m.RadioButtonGroup("idRadioButtonGroup");

for(var i=0; i < YOURODATA.length ; i++){

     if(YOURODATA["Q"+i] !== ""){

     _radioButtonGroup.addButton(new sap.m.RadioButton("idRadioButton"+i));

     }

}

Finally append _radioButtonGroup  to layout.

[former_member182372 · Accepted solution]

one addition:

_radioButtonGroup.addButton(new sap.m.RadioButton("idRadioButton"+i), { text : YOURODATA["Q"+i] } );

[al · Accepted solution]

Thanks! Radio button successfully dynamically bind to radio button group now.

Now i am facing an additional problem.

Before binding radio button I need to judge whether the binging proerty is empty or not.

I tried follwoing way to retrieve the property but faield. 

1. var oQuality = this.getModel().getProperty

2. var oQuality = this.getView().getProerty

could you please take look below snippet and give me some hints ?  thanks alot!

  onProductSelected: function(oEvent) {

  var oKey = oEvent.getParameter("selectedItem").mProperties.key;

  var oKeys = oKey.split("_");

  var oView = this.getView();

  oView.unbindElement();

  oView.bindElement({

  path: "/QIEItemSet(InboundDeliveryUUID=guid'"

  + oKeys[0] "')",

  events: {

  dataRequested: function(oEvent) {

  oView.setBusy(true);

  },

  dataReceived: function(oEvent) {

  oView.setBusy(false);

  }

  }

  });

  this.byId("ProductInputNum").setValue(0);

/****dynamically binding radio button*/

     var oData = this.getModel().getProperty("/" + "QualityDescription1"); 

  var rdb1 = new sap.m.RadioButton({

  text : "{QualityDescription1}",

  selected : false

  });

  this.getView().byId("radiobuttongroup").removeAllButtons();

  this.getView().byId("radiobuttongroup").addButton(rdb1);

/****dynamically binding radio button*/

  },