Auto numbering rows in a Tabular Form

I have several pages where users enter tasks and steps that need to be sequenced.  The users expressed the desire to not have to manually enter the sequence numbers and have the system automate it with the ability to change them if needed.

Hats off to Jeff Kemp for the following solution which was very easy to implement!

Tabular Form – set default values with jQuery

  1. Add a class to the tabular form column that you need to auto number by setting the Element CSS Classes column attribute (“sortorder” in this example).
  2. Add the following javascript function to the page that searches through all items in the “sortorder” class, calculates the max value, and increments it:
    function setNextSortOrder() {
      var highest=0;
        if (this.value != "") {
  3. Modify the javascript call in your Add Row button to call the function:

Word of caution – this works correctly only if you are displaying all rows at a time.  If you have pagination on your form it will increment the sequence based on what is currently shown, not all records.  I worked around this by setting a page item on page load with the total number of records and modified the function to set the value to either the number of records + 1 or the highest + 1, whichever is greater.  Each time you save the page item storing your number of records will get updated.