🗑️ Add Delete Button and Add Row Feature in Joget Spreadsheet using JS

#javascript #joget #lowcode #handsontable

🧩 Overview

In Joget, the Spreadsheet form element (powered by Handsontable) is perfect for managing tabular data inside forms.
However, it doesn’t natively provide built-in row-level delete buttons or a convenient add row feature.

In this guide, we’ll learn how to:
✅ Add a delete button to each row in a Joget Spreadsheet.
✅ Create a separate “Add Row” button that dynamically inserts new rows.
✅ Keep the entire implementation simple, secure, and fully functional.

⚙️ How It Works

💡 The approach uses a custom column renderer and a jQuery button event:

The custom renderer injects a Delete button in a column cell.
The button calls hot.alter("remove_row", row) to delete that row.
A separate Add Row button triggers hot.alter("insert_row_below") to insert a new row at the bottom.
Both actions are performed dynamically without reloading the form.

🧠 Important:

Set the spreadsheet column format type to Custom.
Paste the renderer script directly in the custom field configuration.
Avoid adding any extra comments inside the renderer function (to prevent Joget parser issues).

💻 Full Code

<!-- 🔹 Place this inside your Spreadsheet column (Format Type: Custom) -->
{ { 
  renderer: function (instance, td, row, col, prop, value, cellProperties) { 
    td.innerHTML = "<button type='button' class='eaction'>#i18n.ocs_delete_btn#</button>"; 
    td.style.textAlign = "center"; 
    $(document).ready(function () { 
      let hot = FormUtil.getField("appointments_spreadSheet").data("hot"); 
      let btn = td.querySelector(".eaction"); 
      btn.onclick = function (e) { 
        e.preventDefault(); 
        e.stopPropagation(); 
        hot.alter("remove_row", row); 
      }; 
    }); 
  } 
} }

// 🔹 Add this script in a Custom HTML element below your Spreadsheet

$("#addRowBtn").on("click", function(e) {
    e.preventDefault();
    let hot = FormUtil.getField("appointments_spreadSheet").data("hot");
    console.log({hot: hot});
    if (!hot) {
        console.error("Handsontable not initialized");
        return;
    }

    try {
        let lastRow = hot.countRows();
        hot.alter("insert_row_below", lastRow);
    } catch (err) {
        console.error("Failed to add row", err);
    }
});

<!-- 🔹 Add Row Button -->
<button id="addRowBtn" class="btn btn-primary">
  ➕ Add Row
</button>

🧠 Example Use Cases

✅ Employee Shift Planner – Quickly add or remove shift rows.
✅ Project Task Tracker – Manage task entries dynamically.
✅ Material Request Form – Add/remove item rows on demand.
✅ Appointment List – Delete canceled appointments instantly.

🛠️ Customization Tips

💡 To change the delete button label:
Replace

#i18n.ocs_delete_btn#

with plain text (e.g., "Delete" or "Remove").

⚙️ To use a custom Spreadsheet ID:
Update this line:

FormUtil.getField("appointments_spreadSheet")

to match your spreadsheet’s field ID.

🎨 To style buttons:
Apply CSS in a Custom HTML element:

<style>
  .eaction {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 6px;
  }
  #addRowBtn {
    margin-top: 10px;
  }
</style>

🌟 Key Benefits

✅ User-friendly: Adds clear visual controls to manage rows.
⚙️ Lightweight: Uses only jQuery and built-in Joget APIs.
🚀 Instant updates: No form reload needed.
🧩 Reusable: Works in any spreadsheet-based form.
🔧 Customizable: Easily adjust button text, color, or logic.

🔒 Security Note

⚠️ Ensure that delete actions are contextually safe —

Only use this feature for client-side data entry (not for record deletion in the database).
If connected to backend records, validate all deletion logic on the server side before applying changes.