Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

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

Avatar

Level 3

@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);

 

Screenshot from 2023-09-28 12-19-01.pngScreenshot from 2023-09-28 12-18-55.png

 

 

 

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);

1 Accepted Solution

Avatar

Correct answer by
Employee

@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);

 

View solution in original post

3 Replies

Avatar

Community Advisor

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.

 



Esteban Bustamante

Avatar

Administrator

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



Kautuk Sahni

Avatar

Correct answer by
Employee

@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);