Custom function on table column reordering --> change underlying table model

Question

I use SheetJS to upload an excel sheet to a ui.table. While uploading I add a technical ID to my column names, which I will need later on in my project. This is how I am adding the technical ID:

getColumnNames: function(worksheet, aData) {
        var firstRow = aData[0];
        var oColumns = [];
        var cells = Object.keys(worksheet);
        for (var i = 0; i < Object.keys(firstRow).length; i++) {            
            var columnName = Object.keys(firstRow)[i];
            var technicalName = "COL" + ('0' + (i+1)).slice(-2);
            oColumns.push({
                columnId: columnName,
                technicalId: technicalName
            });
        }
    return oColumns;
},

When creating the Model, I bind both the columnId and the technicalId to each column.

My users should have the option to reorder the table columns in order to do a mapping to another table. (Context here is not really relevant) So basically there is another table below my uploaded table and a user should be able to reorder the columns of the "uploadTable" to match them with the table below.

Now in order to do a proper mapping, my technical ID has to be adjusted after the reordering is done. Therefore I'd like to add a function that's being executed after the user clicked a "refresh" button.

This function should adjust the technical columnNames. --> E.g. data gets uploaded, column on position 1 has the technical ID "COL01" now it gets dragged to position 2 --> technical ID should change to COL02 and vice versa.

I believe, the only way to do this is by accessing the DomRef of the table, because that's the only place where the actual current table structure is stored, but I'm not exactly sure how I would proceed.

My reordering function only gets the data so far:

onReorder : function() {
    var table = this.getView().byId("uploadData");
    var currentStructre = table.getDomRef();
},

I would appreciate any hints towards this. If anything is unclear, I'm happy to explain it!

rikusv · Accepted Answer · 2018-10-12T09:27:47.650

0

sap.ui.table.Table allows its columns to be reordered by dragging and dropping, and the event columnMove is fired after.

One could keep track of and update some sequence label (e.g. ids) using an approach like this:

Remember ids (for example column label as id):

ids = oTable.getColumns().map(oColumn => oColumn.getAggregation('label').getText())

Update ids:

oTable.attachColumnMove(function(oEvent) {
  var from = oEvent.getParameter('column').getIndex();
  var to = oEvent.getParameter('newPos');
  var name = names.splice(from, 1);
  names.splice(to, 0, name);
  // Then write new ids to model;
})

edited Oct 12 '18 at 09:27

answered Oct 10 '18 at 08:06

rikusv

646
5
10

great! I just tried to do this but apparently I'm doing something wrong: I still have my function "onReorder" that gets called when clicking a button, in that function I defined my Table and then say oTable.attachColumnMove(function(oEvenet) { .... }) but this never gets executed.. How do I use this event? sorry! – sonja Oct 10 '18 at 14:10
You probably don't need the button nor the `onReorder` function. When the table is created, attach the `columnMove` event and then just process the rest on there. – rikusv Oct 10 '18 at 15:17
Hmmm I don't seem to get it right. When adding this " oTable.attachColumnMove(function(oEvent) { var aColumns = oEvent.getSource().getColumns(); console.log(aColumns); })" to my code right after my table got created/rows got binded (so still in the "create function"), it's not working since my user could do something else before reordering the table columns. When I reorder, my breakpoint in that function doesn't get executed.. So I thought by adding a "refresh" button, I would manually fire that function? – sonja Oct 12 '18 at 06:17
I tested with your code exactly (`oTable.attachColumnMove(function(oEvent) { var aColumns = oEvent.getSource().getColumns(); console.log(aColumns); })`), and it works for me. Are you sure you are using `ui.table` as per your original question i.e. [`sap.ui.table.Table`](https://sapui5.hana.ondemand.com/#/api/sap.ui.table.Table)? Perhaps share your table creation code so that I can check that. – rikusv Oct 12 '18 at 06:35
you're right it's working now for me, too. But there's one other issue I'd like to share if that's ok: let'S say I have Column1 and Column2 now when I move Column2 on the first place, the "oEvent.getSource().getColumns()" still tells me, that Column2 is on second place, so my reassigning of IDs doesn't work that way.. do you understand what I mean? sorry for bad explanation. – sonja Oct 12 '18 at 06:57
so basically, the oEvent.getSource() gets the table in its state **before** the columns are reordered.. oh and yes it's a ui.table? – sonja Oct 12 '18 at 07:42
Ah, oops. Here is one way to address that: Save your technical names somewhere. As example, I'm just using the column labels: `names = oTable.getColumns().map(oColumn => oColumn.getAggregation('label').getText())` Then handle the actual column move and update the model with the new sequence: `oTable.attachColumnMove(function(oEvent) { var from = oEvent.getParameter('column').getIndex(); var to = oEvent.getParameter('newPos'); var name = names.splice(from, 1); names.splice(to, 0, name); // Write new names sequence to model })` – rikusv Oct 12 '18 at 07:49
do you have time to talk in a chat very quick? – sonja Oct 12 '18 at 08:20
I have a few minutes. – rikusv Oct 12 '18 at 08:39
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/181737/discussion-between-sonja-and-rikusv). – sonja Oct 12 '18 at 08:43

Custom function on table column reordering --> change underlying table model

1 Answers1