Reorder

[bshields]

Hi All,

Just thought I share something i have to do from time to time.

Often we have a browse that the customer is allowed to order. In the past (because I'm lazy) I often just give them, up and down arrow buttons and let them slide things around for themselves. I know its crap, my customers know its crap, its all crap.

I've done drag and drop before, so i decided it was time to do it properly... Well not really, a respected customer asked me to do it better.

In the attached screen cap. You can see both methods. On the right you can see the up and down arrows. On the left you can see a hamburger menu (also often used as a gripper).

You can drag the gripper and drop the row into the correct place.

It requires a couple of steps:

1. Create the gripper
2. Add some JS to do the browser side bit
3. Add some Clarion to do the server side bit
4. Write some clarion to reorder your table, given what they dragged where.

1. The Gripper

My gripper is just a column in my table and i create the html for it. I put this in "value:: Start" embed. Usual stuff. Make sure you tick allow XHTML in the column.

Drag# += 1
DragHandle = '<div id="PresentItemDrag_'&PIt:SysID&'" draggable="true" ondragstart="drag(event,'&Drag#&')" ondrop="drop(event,'&Drag#&')" ondragover="allowDrop(event)"> <i class="fas fa-bars"></i> </div>'

2. Some Client Side JS

I added mine into the HTML section before form

<script>
function drop(e,idx) {
  e.preventDefault();
  var data=e.dataTransfer.getData("Text");
  sv('','presentitemtable_presenttablepanel','','_refresh_=current','move='+data+','+idx+','+'<!-- Net:s:PRE:SysID -->','_parentproc_=presenttablepanel');
}

function drag(e,idx) {
  e.dataTransfer.setData("Text",idx);
}

function allowDrop(e) {
  e.preventDefault();
}

function handleDragEnter(e) {
  this.className = 'over';
  return false;
}

function handleDragLeave(e) {
  this.className = '';
  return false;
}
</script>

For your reference my table is PresentItemTable and its contained within a memory form PresentTablePanel. You'll have your own.

I am ordering a child file (a bit like the old invoice and line items example ie 1:MANY). PRE:SysID is my parent record SysID. I know its already in the SessionQueue.

3. Clarion on the Server to catch the reorder

I use the browse table itself to capture when the client tells me to do a reorder. There might be better ways, but works for me. I like to keep this stuff grouped together.

In Embed ProcedureSetup:

  IF p_web.IfExistsValue('move') = True
    ProcessPresentItemActions(p_web)
    RefreshAnyParent(p_web)
  .


4. My Reorder Code

Its done in ProcessPresentItemActions(p_web) and it collects to, from and parent sysid from the values passed by javascript.



Not sure if this is something others are doing in a different way. Just thought I'd share. I haven't explained it all, so there is still some mystery for the adventurous!

It's all part of my new idea of being nice to my users

Regards
Bill

[ntnewbies]

thanks bill for generously sharing the code.
appreciate it very much.

regards
jason

[DonRidley]

I think that is pretty darn cool!  Thanks for sharing!!

Don

[Bruce]

cool!

[urayoan]

Awesome! Thanks for share

[Stu]

As a frequent builder of the up/down arrows on browses, this is gonna change everything!

Seriously, the pain you have to go through, even having helper functions instead of instance-embedded code, to get the up/down buttons going - And then like you say they suck anyway.

Thank you very much Bill!