I am trying to make a new form by fetching data from draft table but not able to do using javascript

[MunmunBo]

@Pulkit_Jain_ continuing previous question here as unable to reply there.

The below code i try to add in etc/clientlib/js but i am getting syntax error but the code get displayed in screen but when try to edit any button edit rules i get 500 ( syntax error).

// Function to create the table (without showing it initially)
function createTable(headers, data) {
const table = document.createElement("table");
table.style.display = "none"; // Hide the table initially

// Create the table header
const thead = table.createTHead();
const headerRow = thead.insertRow();

headers.forEach((headerText) => {
const th = document.createElement("th");
th.textContent = headerText;
headerRow.appendChild(th);
});

// Create the table body
const tbody = table.createTBody();

data.forEach((item) => {
const row = tbody.insertRow();

// Add data cells to the row
Object.values(item).forEach((value) => {
const cell = row.insertCell();
cell.textContent = value;
});

// Add an "Edit" button to the row
const editButtonCell = row.insertCell();
const editButton = document.createElement("button");
editButton.textContent = "Edit";
editButton.addEventListener("click", () => {
// Make an API call here
window.location.href = "/content/forms/af/draft-testing/login2-form.html?wcmmode=disabled";
});
editButtonCell.appendChild(editButton);
});

return table;
}

// Define your headers and data
const headers = ["Submission Id", "Draft Data"];
const drafts = [
{ "Submission Id": "1", "Draft Data": "Draft 1 Data" },
{ "Submission Id": "2", "Draft Data": "Draft 2 Data" },
// Add more draft data objects as needed
];

// Call the function to create the table with your draft data
const table = createTable(headers, drafts);

// Add an event listener to a button (e.g., a "Show Table" button) to display the table when clicked
const showTableButton = document.getElementById("guideContainer-rootPanel-guidebutton_776468279___widget"); // Replace with your button's ID
showTableButton.addEventListener("click", () => {
table.style.display = "table"; // Show the table when the button is clicked
});

// Add the table to the document body initially (hidden)
document.body.appendChild(table);

and below code i wrote to show the table only when click on button .

// Function to create the table (without showing it initially)
function createTable(headers, data) {
const table = document.createElement("table");
table.style.display = "none"; // Hide the table initially

// Create the table header
const thead = table.createTHead();
const headerRow = thead.insertRow();

headers.forEach((headerText) => {
const th = document.createElement("th");
th.textContent = headerText;
headerRow.appendChild(th);
});

// Create the table body
const tbody = table.createTBody();

data.forEach((item) => {
const row = tbody.insertRow();

// Add data cells to the row
Object.values(item).forEach((value) => {
const cell = row.insertCell();
cell.textContent = value;
});

// Add an "Edit" button to the row
const editButtonCell = row.insertCell();
const editButton = document.createElement("button");
editButton.textContent = "Edit";
editButton.addEventListener("click", () => {
// Make an API call here
window.location.href = "/content/forms/af/draft-testing/login2-form.html?wcmmode=disabled";
});
editButtonCell.appendChild(editButton);
});

return table;
}

// Define your headers and data
const headers = ["Submission Id", "Draft Data"];
const drafts = [
{ "Submission Id": "1", "Draft Data": "Draft 1 Data" },
{ "Submission Id": "2", "Draft Data": "Draft 2 Data" },
// Add more draft data objects as needed
];

// Call the function to create the table with your draft data
const table = createTable(headers, drafts);

// Add an event listener to a button (e.g., a "Show Table" button) to display the table when clicked
const showTableButton = document.getElementById("show-table-button"); // Replace with your button's ID
showTableButton.addEventListener("click", () => {
table.style.display = "table"; // Show the table when the button is clicked
});

// Add the table to the document body initially (hidden)
document.body.appendChild(table);

[EstebanBustamante]

The code snippet you have provided does not have any syntaxis issues, the most obvious reason for this error would be that the element you are trying to get is not available at the moment the JS runs, I am referring to this line:

const showTableButton = document.getElementById("show-table-button");

The only way to fix this is to debug and check the execution step by step, you can check the below threads to learn more about debugging js:

https://developer.chrome.com/docs/devtools/javascript/ 

https://coderpad.io/blog/development/javascript-debugging-in-chrome/ 

Hope this helps.

[kautuk_sahni]

@MunmunBo Did you find the suggestion from Esteban helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[sudhansh · Accepted solution]

@MunmunBo You code is using ES6 syntax which is not currently supported for custom functions. Could you convert your code to ES5 and validate if it resolves the issue.

Here is a quick conversion I tried - would recommend you do the logic validation at your end.

// Function to create the table (without showing it initially)
function createTable(headers, data) {
  var table = document.createElement("table");
  table.style.display = "none"; // Hide the table initially

  // Create the table header
  var thead = table.createTHead();
  var headerRow = thead.insertRow();
  headers.forEach(function (headerText) {
    var th = document.createElement("th");
    th.textContent = headerText;
    headerRow.appendChild(th);
  });

  // Create the table body
  var tbody = table.createTBody();
  data.forEach(function (item) {
    var row = tbody.insertRow();

    // Add data cells to the row
    Object.values(item).forEach(function (value) {
      var cell = row.insertCell();
      cell.textContent = value;
    });

    // Add an "Edit" button to the row
    var editButtonCell = row.insertCell();
    var editButton = document.createElement("button");
    editButton.textContent = "Edit";
    editButton.addEventListener("click", function () {
      // Make an API call here
      window.location.href = "/content/forms/af/draft-testing/login2-form.html?wcmmode=disabled";
    });
    editButtonCell.appendChild(editButton);
  });
  return table;
}

// Define your headers and data
var headers = ["Submission Id", "Draft Data"];
var drafts = [{
  "Submission Id": "1",
  "Draft Data": "Draft 1 Data"
}, {
  "Submission Id": "2",
  "Draft Data": "Draft 2 Data"
}
// Add more draft data objects as needed
];

// Call the function to create the table with your draft data
var table = createTable(headers, drafts);

// Add an event listener to a button (e.g., a "Show Table" button) to display the table when clicked
var showTableButton = document.getElementById("show-table-button"); // Replace with your button's ID
showTableButton.addEventListener("click", function () {
  table.style.display = "table"; // Show the table when the button is clicked
});

// Add the table to the document body initially (hidden)
document.body.appendChild(table);