Skip to Content
0

SAPUI5 Dynamic binding of data in an Upload Collection

Apr 25 at 01:30 PM

165

avatar image

Hi experts,
I've got a funny issue and I can't get it working.

I've got a sap.ui.table.Table that is dynamically created with a JSON data binding. Everything goes well untill I need a button at every data row and when a user clicks on the button a dialog is opened with a Upload Collection with UploadCollectionItems dynamically bound to it. I tried several ways how to do it and I can't figure it out.

This is my code

oTable.addColumn(new sap.ui.table.Column({
    label: new sap.m.Label({text: ""}),
    template: new sap.m.Button({
     icon: "sap-icon://attachment",
     press: function(oEvent) {
      var oDialog = new sap.m.Dialog({
         title: "File manager",
         icon: "sap-icon://attachment",
         content:
         new sap.m.UploadCollection({
          items: {
             path: oEvent.getSource().getBindingContext().getPath() + "/documents",
             template: new sap.m.UploadCollectionItem({fileName: "{filename}"}),
             templateShareable: true
            }
         })
      });
      oDialog.open();
     }
    })
}));


To explain:

oEvent.getSource().getBindingContext().getPath() + "/documents"

This is a path to the row, if I do something like this:

var oPath = oEvent.getSource().getBindingContext().getPath() + "/documents";
var oFiles = oModel.getProperty(oPath);

so the oFiles array contains the items where item.filename really exists

Am I missing something?

Thank you very much for any help!

Miroslav

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Miroslav Sedlar Apr 25 at 02:17 PM
0

1. the MenuButton binding works

2. the binding in the dialog for the UploadCollection doesn't work

3. the array oFiles being assigned to the items but not using binding, I really need to use a binding (just assigning the array works)


q01.jpg (9.6 kB)
q02.jpg (36.6 kB)
q03.jpg (42.8 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

Working solution with the oFiles array without binding is here:

oTable.addColumn(new sap.ui.table.Column({
label: new sap.m.Label({text: ""}),
template: new sap.m.Button({
icon: "sap-icon://attachment",
press: function(oEvent) {
var oModel = sap.ui.getCore().dataTableOptions.dataModel;
var oPath = oEvent.getSource().getBindingContext().getPath() + "/documents";
var oFiles = oModel.getProperty(oPath);
var oUploadCollectionItems = [];
$.each(oFiles, function(key, item) {
oUploadCollectionItems.push(new sap.m.UploadCollectionItem({fileName: item.filename}));
});
   var oDialog = new sap.m.Dialog({
title: "File manager",
icon: "sap-icon://attachment",
content:
new sap.m.UploadCollection({
items: oUploadCollectionItems
})
});
oDialog.open();
}
})
}));

0
Jun Wu Apr 25 at 01:36 PM
0

what's your problem?

Show 2 Share
10 |10000 characters needed characters left characters exceeded

The problem is, that the UploadCollection shows no entries. It should display the items from the given path.

0

and I think that the problem could be that it is a dialog which is opened dynamically, because if I add a MenuButton with the same items, it works

oTable.addColumn(new sap.ui.table.Column({
label: new sap.m.Label({text: ""}),
template: new sap.m.MenuButton({
icon: "sap-icon://download",
menu: new sap.m.Menu({
items: {
path: "documents",
template: new sap.m.MenuItem({text: "{filename}"}),
templateShareable: true
}
})
})
}));

but not with the UploadCollection being opened in the dialog

thanks!

0
Jun Wu Apr 25 at 02:20 PM
0

//assume you have your controller

oController

oTable.addColumn(newsap.ui.table.Column({
    label:newsap.m.Label({text:""}),
    template:newsap.m.Button({icon:"sap-icon://attachment",
     press:function(oEvent){
      var oDialog =newsap.m.Dialog({title:"File manager",icon:"sap-icon://attachment",
         content:newsap.m.UploadCollection({
          items:{
             path: oEvent.getSource().getBindingContext().getPath()+"/documents",
             template:newsap.m.UploadCollectionItem({fileName:"{filename}"}),
             templateShareable: true
            }})});

oController.getView().addDepedent(oDialog);
      oDialog.open();

}})}));

give it a try.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks, that was one of ideas I was searching for,that the dialog is not assigned to the view, so the data binding doesn't work.

BUT:

theView.addDepedent(oDialog);

returns an error that the object doesn't support the method, if I look into the console for theView variable it says:

Element sap.ui.core.mvc.XMLView and by browsing the object there is the method addDependent()

but I will give it more effort to it. Maybe I will try to use an XML fragment and dialog inside. But'm not sure if it helps ;)

0