readme.md

Enhanced Table Row Click Events

This script is used to add an onclick event to a table row and then redirect the user to a different page that is not the default behaviour.

In this case we are grabbing the event type (max form name) and id from the table row, creating a clickable event to redirect. The caveat being that the table is loaded asynchronously and is subject to change.

First we need to poll the DOM to make sure the table is loaded.

Then once the table is loaded we can attach a listener to the table and attach the onclick event to the table row.

The data-uid on the table row changes with every search/load, so we need to reattach the onclick event to the table row with every change.

---

---

Table Row Click Event Listener

• The site variable defines the base URL for redirection.
• The listenForClicksOnTRsWithDataUid function iterates through rows with data-uid attributes, constructing URLs and redirecting users when a row is clicked.

Table Row Monitoring

To adapt to changing rows, the script employs a "polling" mechanism to check for the table's existence and a MutationObserver to detect structural changes.

• The pollForTable function checks for the table's existence at regular intervals.
• Once the table is found, event listeners are attached to existing rows, and a MutationObserver is set up to monitor changes.
• The logDataUidChange function responds to new rows by attaching click event listeners.
• The observer continues to monitor the table for future changes, maintaining consistent functionality.

caseSearchTableRowEvents.html

<script>
  // Overview.
  // 
  // This script is used to listen for clicks on table rows with a data-uid attribute.
  // It also listens for new rows being added to the table and attaches the event listener to the new rows.
  // Then it redirects the user to the form page with the correct ID to prefill the form
  //
  // But first we need to poll the DOM for the table container because the table is loaded asynchronously.
  //
  // The script is added to the page via a script editor web part.


  // Config
  const site = '/programs/animals/maxbis/Pages/Cases/'

  
  // Listen for clicks on table rows with a data-uid attribute
  function listenForClicksOnTRsWithDataUid() {
    const trElementsWithDataUid = document.querySelectorAll("tr[data-uid]");
    trElementsWithDataUid.forEach(function (trElement) {
      trElement.addEventListener("click", function (event) {
        event.stopPropagation();
        // console.log(event.currentTarget.children[0].textContent);
        const secondElement = event.currentTarget.children[1].textContent;
        // console.log("Second Element:", secondElement);
        const url = `${site}${encodeURIComponent(
          secondElement
        )}.aspx?topListItemId=${event.currentTarget.children[0].textContent}`;
        window.location.href = url;
      });
    });
  }

  // Poll for the table container
  function pollForTable() {
    const intervalId = setInterval(() => {
      const tableContainer = document.querySelector("table.k-selectable"); 

      if (tableContainer) {
        // console.log('Found table container:', tableContainer);

        // Attach the event listener to the existing rows
        listenForClicksOnTRsWithDataUid();

        // Clear the interval if the container is found
        clearInterval(intervalId);

        // Function to log changes to the data-uid attribute
        function logDataUidChange(mutationsList, observer) {
          mutationsList.forEach((mutation) => {
            if (mutation.type === "childList") {
              mutation.addedNodes.forEach((node) => {
                if (node instanceof HTMLTableRowElement) {
                  const dataUid = node.getAttribute("data-uid");
                  // console.log("New row added:", node)
                  // console.log(`New row with data-uid "${dataUid}" added.`);

                  // Attach the event listener to the new row
                  listenForClicksOnTRsWithDataUid();
                }
              });
            }
          });
        }

        // Create a new observer with the callback function
        const observer = new MutationObserver(logDataUidChange);

        // Start observing the container for changes to its child nodes (rows)
        observer.observe(tableContainer, { childList: true, subtree: true });
      }
    }, 200);
  }

  pollForTable();
</script>