Can we add html folder and html class inside etc/clientlibs

[MunmunBo]

@Pulkit_Jain_ 

Vijay_Katoch

Can we add html folder as we add only js and css are added.

[MunmunBo]

HTML code :

<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Data will be inserted here -->
</tbody>
</table>

Javascript code:

function fetchDataAndPopulateTable() {
const apiUrl = 'https://api.example.com/data'; // Replace with your API endpoint

fetch(apiUrl)
.then((response) => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then((data) => {
const tableBody = document.getElementById('table-body');
tableBody.innerHTML = ''; // Clear existing table rows

data.forEach((item) => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.email}</td>
`;
tableBody.appendChild(row);
});
})
.catch((error) => {
console.error('There was a problem with the fetch operation:', error);
});
}

// Call the function to fetch data and populate the table
fetchDataAndPopulateTable();

[Pulkit_Jain_]

@MunmunBo 

Why do you want to add the HTML to the Clientlib?

Clientlib is supposed to honor JS and CSS files

[MunmunBo]

@Pulkit_Jain_ Was creating a new form which will have save draft data and edit button 

so was planning to add headers and all in html.

Can you share some examples which has pure javascript code for fetching draft data and making each row eaditable.

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

[MunmunBo]

I am getting error as syntax error while clicking on button to add rules but it table is being displayed in main screen as i have not added only show in case of button thats okay but the code must not throw error incase of button click for edit rules is there any other way to display headers in js 

function createTable(headers, data) {

const table = document.createElement("table");

// 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", () => {

console.log("Edit clicked for item:", item);

// Handle the edit button click here

// You can access the data for this row via the "item" variable

});

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 the table to the document body

document.body.appendChild(table);

[MunmunBo]

@Pulkit_Jain_  

Any one can please reply , as no issue in javascript in the above code.Is there any other format to create table in javascript to show data saved as draft

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