Skip to Main Content

Drag & Drop tabular form rows

Here is how drag & Drop tabular form rows to order records how you like.This solution works for tabular forms where you do not use pagination on APEX 4.1. Your table need have column that store display sequence id. If your table do not have column that can be used for this, alter your table and add column.

ALTER TABLE your_table ADD (display_seq NUMBER);

Go into the report attributes of your tabular form. On the right hand side of the page you will see Tasks. In there click Add Derived Column. Edit derived column attributes and chnage Display As to Standard Report Column. Add to Column Formatting HTML Expression:

Add to Column Formatting HTML Expression:

<img class="sort-row" src="#IMAGE_PREFIX#ws/sort.gif" alt="" />

Next uncheck all Sort checkboxes from report attributes and add order by to your report query:

ORDER BY display_seq

Create dynamic Action. Select Advanced

  • Name: Set Form Ordering
  • Event: After Refresh
  • Selection Type: Region
  • Region: {select your report region}
  • Condition: No Condition
  • Action: Execute JavaScript code
  • Fire On Page Load: True
  • Code:
    $(this.triggeringElement).find(".report-standard").sortable({
     cursor: "move",
     handle: "img.sort-row",
     items: "tr:not(:first)",
     containment: ".report-standard",
     axis: "y",
     opacity: 0.9,
     revert: true,
     helper: function(e,u){
     u.children().each(function(){
      $(this).width($(this).width());
     });
     return u;
     }
    }).find("img.sort-row").css({"cursor":"move"}).disableSelection();
    
  • Selection Type: None

Create PL/SQL process On Submit - After Computations and Validations:

FOR i IN 1 .. APEX_APPLICATION.G_FROWID.COUNT
LOOP
  UPDATE emp SET sort_order = i WHERE rowid = APEX_APPLICATION.G_FROWID(i);
END LOOP;

Add to page HTML Header:

<script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8.14/ui/minified/jquery.ui.sortable.min.js"></script>

NOTE ! If you are on APEX 5:
Instead of adding jQuery UI library to HTML header, place below to page JavaScript file URLs

#JQUERYUI_DIRECTORY#ui/#MIN_DIRECTORY#jquery.ui.sortable#MIN#.js

See working example.

Pagination

Comments

  • Jari Laine 15 Feb 2022

    Hi Fabio,

    Please email details.

    It's bit late here already so I will check latest tomorrow.

    Regards,
    Jari

  • Fabio 15 Feb 2022

    Hi Jari, thanks but I'm starting with apex.
    you would be able to connect if I give you the link

  • Jari Laine 15 Feb 2022

    Hi Fabio,

    Try add debug to process

    ​​​​​apex_debug.info('Start updating display sequences %s rows', APEX_APPLICATION.G_F01.COUNT);
    FOR i IN 1 .. APEX_APPLICATION.G_F01.COUNT
    LOOP
      UPDATE emp SET sort_order = i WHERE id = APEX_APPLICATION.G_F01(i);
      apex_debug.info('Updating using pk %s row %s updated', APEX_APPLICATION.G_F01(i), SQL%ROWCOUNT);
    END LOOP;

    Run page in debug mode and do some updates to form and submit page. Then view debug log and find those debug rows and post here.

    Regards,
    Jari

  • fabio 15 Feb 2022

    HI Jari
    this?
    headers="F01">&lt;input type=&quot;hidden&quot; name=&quot;f01&quot; value=&quot;4&quot; &#x2F;&gt;</td></tr>

  • Jari Laine 15 Feb 2022

    Hi Fabio,

    If you see page source e.g. using browser developer tool and try search string f01 , can you find input elements that really hold you primary key values?

    Regards,
    Jari

  • Fabio 15 Feb 2022

    Hi i have this table
    Id- primarykey
    I use this EMPNO:
    ​​​​​FOR i IN 1 .. APEX_APPLICATION.G_F01.COUNT
    LOOP
    UPDATE emp SET sort_order = i WHERE id = APEX_APPLICATION.G_F01(i);
    END LOOP;

  • Jari Laine 15 Feb 2022

    Hi Fabio,

    I assume you mean update still not work.

    Could you please post process code you did try exactly?

    Regards,
    Jari

  • Fabio 15 Feb 2022

    hi jari, thanks for the reply but unfortunately i can't get it to work

  • Jari Laine 15 Feb 2022

    Hi fabio,

    I don't know why APEX_APPLICATION.G_FROWID not work on APEX 21.x.

    I assume you have primary key column as hidden in tabular form. Inspect page source and see what is hidden item name. Use that array and do update using that e.g., if hidden primary key item name is f01 and primary key column is EMPNO:

     ​​​​​FOR i IN 1 .. APEX_APPLICATION.G_F01.COUNT
    LOOP
      UPDATE emp SET sort_order = i WHERE empno = APEX_APPLICATION.G_F01(i);
    END LOOP;

    Regards,
    Jari

  • fabio 15 Feb 2022

    Thanks for your help now it works.
    saving sequence doesn't work when I use this
    FOR i IN 1 .. APEX_APPLICATION.G_FROWID.COUNT
    LOOP
    UPDATE emp SET sort_order = i WHERE rowid = APEX_APPLICATION.G_FROWID (i);
    END LOOP;
    do you have any idea?