DEV Community

Explorer
Explorer

Posted on

🗑️ 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); }; }); } } }
Enter fullscreen mode Exit fullscreen mode 
// 🔹 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); } });
Enter fullscreen mode Exit fullscreen mode 
<!-- 🔹 Add Row Button --> <button id="addRowBtn" class="btn btn-primary"> ➕ Add Row </button>
Enter fullscreen mode Exit fullscreen mode

🧠 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#
Enter fullscreen mode Exit fullscreen mode

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

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

FormUtil.getField("appointments_spreadSheet")
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

🌟 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.

🧭 Final Thoughts

By adding these small enhancements, your Joget Spreadsheet becomes much more interactive and user-friendly.

Top comments (0)