I am trying to make a new form by fetching data from draft table but not able to do using javascript | Community
Skip to main content
M
MunmunBo
Level 3
September 28, 2023
Solved

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

  • September 28, 2023
  • 3 replies
  • 765 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by sudhansh

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

 

3 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
September 29, 2023

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
    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    October 4, 2023

    @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
    sudhansh
    Adobe Employee
    sudhanshAdobe EmployeeAccepted solution
    Adobe Employee
    October 5, 2023

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

     

      Terms & ConditionsAccessibility statement

      Loading footer...