Skip to main content

List Members

This script gets a list of workspace members and displays them in a table. Clicking a table row will display the json for the complete member record.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Members Table</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      padding: 10px;
      text-align: left;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f4f4f4;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #f1f1f1;
      cursor: pointer;
    }
    .container {
      max-width: 900px;
      margin: 0 auto;
    }
    .header {
      text-align: center;
      margin-bottom: 20px;
    }
    .details-panel {
      position: fixed;
      top: 0;
      right: -400px;
      width: 400px;
      height: 100%;
      background-color: #fff;
      box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      padding: 20px;
      transition: right 0.3s ease;
    }
    .details-panel.active {
      right: 0;
    }
    .details-panel .close-btn {
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      color: #333;
      margin-bottom: 10px;
    }
    .details-panel .content {
      font-size: 14px;
    }
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="header">Members Table</h1>
    <table id="membersTable">
      <thead>
        <tr>
          <th>Name</th>
          <th>Job Title</th>
          <th>Last Login</th>
        </tr>
      </thead>
      <tbody>
        <!-- Data will be populated here by the script -->
      </tbody>
    </table>
  </div>

  <div class="details-panel" id="detailsPanel">
    <button class="close-btn" onclick="closeDetails()">Close</button>
    <div class="content" id="detailsContent"></div>
  </div>

  <script>
    /**
 * Closes the details panel by removing the 'active' class
 */
function closeDetails() {
    document.getElementById("detailsPanel").classList.remove("active");
}

/**
 * Opens the details panel and displays the provided content
 * @param {Object} content - The member data to display in the panel
 */
function openDetails(content) {
    const detailsPanel = document.getElementById("detailsPanel");
    const detailsContent = document.getElementById("detailsContent");
    // Format the content as pretty-printed JSON
    detailsContent.innerHTML = `<pre>${JSON.stringify(content, null, 2)}</pre>`;
    detailsPanel.classList.add("active");
}

// Fetch and display member list using SmartSuite SDK
window.SmartSuite.list_members()
    .then((res) => {
        console.log("Response:", res); // Log the full response for debugging

        // Extract items array from the nested response structure
        const items = res.response?.items;

        // Validate response structure
        if (!items || !Array.isArray(items)) {
            console.error("Invalid response structure. Expected 'response.items' array.");
            return;
        }

        // Get reference to the table body where member rows will be inserted
        const tableBody = document.querySelector("#membersTable tbody");

        // Iterate through each member and create table rows
        items.forEach((member) => {
            // Extract member details with fallback values if data is missing
            const name = member.full_name?.sys_root || "N/A";
            const jobTitle = member.job_title || "N/A";
            const lastLogin = member.last_login?.date
                ? new Date(member.last_login.date).toLocaleDateString("en-US")
                : "N/A";

            // Create a new table row element
            const row = document.createElement("tr");
            
            // Populate row with member data
            row.innerHTML = `
                <td>${name}</td>
                <td>${jobTitle}</td>
                <td>${lastLogin}</td>
            `;

            // Add click handler to show member details when row is clicked
            row.addEventListener("click", () => openDetails(member));
            
            // Add the row to the table
            tableBody.appendChild(row);
        });
    })
    .catch((err) => {
        console.error("Error fetching members:", err);
    });
  </script>
</body>
</html>