Custom Cell Renderers & Action Buttons in Joget Spreadsheet Elements

#joget #javascript #webdev #tutorial

The built-in Spreadsheet Element in Joget DX provides a spreadsheet-like interface for managing tabular records inside forms. However, standard spreadsheet columns only support basic text or dropdown inputs out of the box.

If you want to add row-level action buttons (like a Delete Row button) or turn plain cell text into an interactive Modal Popup Link, you can supply custom Handsontable renderer functions directly inside your Spreadsheet column properties.

In this guide, we'll look at two practical examples: adding a custom row-deletion button and rendering interactive drill-down links.

Example 1: Adding a Custom Delete Row Button

In your Joget Spreadsheet element, open column properties for an action column and configure the custom renderer function below:

{{
  renderer: function (instance, td, row, col, prop, value, cellProperties) {
    // Render custom HTML button inside the cell
    td.innerHTML = "<button type='button' class='btn-delete-row'>Delete</button>";
    td.style.textAlign = "center";

    // Attach click handler to remove the target row from the Handsontable instance
    const btn = td.querySelector(".btn-delete-row");
    btn.onclick = function (e) {
      e.preventDefault();
      e.stopPropagation();

      // Get underlying Handsontable instance from the form field
      const hotInstance = FormUtil.getField("your_spreadsheet_field_id").data("hot");
      if (hotInstance) {
        hotInstance.alter("remove_row", row);
      }
    };
  }
}}

Key Highlights:

instance.alter("remove_row", row) removes the target row directly from the underlying data model.
e.stopPropagation() prevents Handsontable from entering cell-edit mode when the button is clicked.

Example 2: Interactive Drill-Down Popup Links

To display a clickable link in a grid cell that opens a detailed record inside a Joget modal dialog (popup iframe), use this cell renderer:

{{
  renderer: function (instance, td, row, col, prop, value, cellProperties) {
    // Read record type and ID from other properties in the same row
    const recordType = instance.getDataAtRowProp(row, "record_type");
    const recordId = instance.getDataAtRowProp(row, "id");

    if (!value) {
      td.innerHTML = "";
      return;
    }

    let targetUrl = "#";
    if (recordType === "complaint") {
      targetUrl = "/jw/web/userview/app_id/v/_/view_complaint?id=" + recordId + "&embed=true";
    } else if (recordType === "report") {
      targetUrl = "/jw/web/userview/app_id/v/_/view_report?id=" + recordId + "&embed=true";
    }

    // Render as a clickable link
    td.innerHTML = "<a href='#' class='grid-cell-link'>" + value + "</a>";

    const link = td.querySelector(".grid-cell-link");
    link.onclick = function (e) {
      e.preventDefault();
      e.stopPropagation();

      // Open inside Joget's built-in popup dialog wrapper
      if (typeof UI !== "undefined" && UI.showPopup) {
        UI.showPopup(targetUrl);
      } else {
        window.open(targetUrl, "_blank");
      }
    };
  }
}}