Skip to Content

SAPUI5 Dynamic binding of data in an Upload Collection

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Apr 25 at 02:17 PM

    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)

    Add comment
    10|10000 characters needed 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();
      }
      })
      }));

  • Apr 25 at 01:36 PM

    what's your problem?

    Add comment
    10|10000 characters needed characters exceeded

    • 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!

  • Apr 25 at 02:20 PM
    
    //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.

    Add comment
    10|10000 characters needed 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 ;)