CODEWITHSUNDEEP
javascriptdata-bindingsapui5
Suhas Bhattu
Suhas Bhattu

Reputation: 551

Add different controls in different rows in UI5 table

I have table sap.ui.table.Table ans I have a model in which some records have links and some doesn't. I want to render the link in the sap.m.Link component in the column and when the link is not available in the record, it should render "Link is not provided." in the sap.m.Text in the column.

As the sap.ui.table.Column has the template aggregation which does not support binding aggregation as it is only 0 or 1 controls supported. And the formatter is also applicable here. Is there any way that the content of the column can be changed runtime according to the module data?

My module data is :

var data = [{
   id : 1,
   link : 'abc.com'
},
{
   id : 2
},
{
   id : 3,
   link : 'pqr.com'
}]

I am providing the code:

var link = new sap.m.Link({text : "{link}"});
var noLink = new sap.m.Text({text : "Link is not provided."});

var idColumn = new sap.ui.table.Column({
    label : [new sap.m.Label({text : "ID"})],
    template : [new sap.m.Text({text : "{id}"})]
});

var linkColumn = new sap.ui.table.Column({
   label : [new sap.m.Label({text : "Link"})],
   template : [??????]
});

var table = new sap.ui.table.Table({
    columns : [idColumn, linkColumn]
});

var model = new sap.ui.model.json.JSONModel();
model.setData({items : data});
table.setModel(model);
table.bindRows("/items");

I want to add the link and noLink in the column likColumn runtime according to the data in the module. How can I achieve this?

Upvotes: 0

Views: 979

Answers (1)

rcedillo
rcedillo

Reputation: 356

The display content of each column can be changed using formatter

e.g:

   new sap.m.Link({
      width: "20em",
      //editable: false,
      //text: "{items>link}"   
      text: {
        path: "items>link",
        formatter: function(link){
          if (link === undefined) return "Link is not provided"
          return link;
        }
      }
    });

...

oTable.addEventDelegate({
    onAfterRendering: function(){
        $('#idTable a:contains("Link is not provided")').removeClass("sapMLnk");
    }
}, oTable);

UPDATE: This is a jsbin with the full example of what you need: UPDATED example

Upvotes: 1

Related Questions