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 24 Jul 2022

    Hi Jorge,

    If I recall correctly, in APEX 20.2 you don't need add reference to jquery.ui.sortable.js anymore. APEX includes automatically needed JavaScript for that jQuery UI sortable.

    Regards,
    Jari

  • Jorge 20 Jul 2022

    I was testing the plugin with a Classic Report, to allow to end user can change de order of records..
    But in my app in apex 20.2 the console show me the following error ?
    Failed to load resource: the server responded with a status of 404 (Not Found)
    Uncaught ReferenceError: jQuery is not defined at jquery.ui.sortable.js:1077:4
    I was testing upload on file .js in the following place #WORKSPACE_IMAGES#jquery.ui.sortable.js so I dont know if I test with that location... thanks a lot

  • 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