Drag and Drop Feature

Hi TB Community!

Is there a way we can drag and drop inside the created application from the table?

Meaning, If I have a table inside the application. I can just drag it and drop it to the position I want them to be?

Thank you!

Are you referring to changing the order of a record in the table? Or moving around tables and componnts from app side?

Something like this? I think we have snippets for that where you can allow your users to tweak how things are viewed on their end.

2023-01-18_15-26-24

If you need to reorder records in a table, I don’t believe we have a way to do that.

Thank you so much for the reply. I really appreciate it.

Yes @moe I was referring to the record in the table. I tried the numbering sequence and it works. However, there is a hassle to the user side.

I am looking for a way that I can re-arrange the record on the table, so that when I send this to someone it will be in the same format/order.

My goal is that when the user decides to change the sequence from the original order, they will be able to do it.

Is this possible?

I hope you can help me with this please.

Thank you so much.

I’m confident this is easily possible. Will investigate a bit more later and update you here.

Looking forward to it. Thank you very much.

Edison, here you go:

Final Output:
2023-01-19_13-03-26

I’ve just uploaded a video of me doing this.

Here are the steps I’ve taken:

  1. Add the record ID to the first column.
  2. Install the Rest API pipe and get the code for updating existing record.
  3. Update the pipe and set the table and field ids.
  4. Wrap the code in a function
  5. Use the Javascript below.
  6. Update the pipe not to run equations (highly recommended!)

Heres my JS code. Be sure to update the values appropriately:

TB.render('component_X', function(data) {
	$('tbody').sortable({
	    
	     update: function ($item, container, _super, event) {
             $('tr').not(":first").each(function (i){
                 var order = i + 1;
                 var recordId = $(this).find("td:first").text(); 
                 //console.log("Update Record ID: " + recordId + " to number: " + order)
                 updateOrder(order, recordId)
                 
             })
        }
	    
	});
	
});

function updateOrder(orderVal, recordId){
    TB.triggerPipe('YOUR_UNIQUE_PIPE_ID', 
    	{tableId: 'o6WQb5NnBZ', field_id: 'field_71', field_val: orderVal, recordId: recordId},
    	function(type, response, xhrRespone) {
    		//console.log('pipe response', type, response, xhrRespone);
    	}
    );
}
4 Likes

Thank you. I will try this now and get back to you. Thank you sir @moe :slight_smile:

Thank you very much @moe. It works. When duplicating, it keeps the order the way I want it. Thank you.

I hope you can also help me with this:

Thank you