How to create tabular format dynamically for Html field on custom form?

[Lakshmiprasann7]

Hi All,

My requirement is to get data from 3rd party and make them populate as tabular format. For which I have tried with client scripts and incorporated d the logic using html tags however I have faced a challenge to make it readonly.

I could'nt able to make readonly from portal for client users. Please suggest how can I create tabular format dynamically for html field.

[Sujit Jadhav]

Hello @Lakshmiprasann7 ,

To create a tabular format dynamically for an HTML field on a custom form in ServiceNow, you can use HTML and JavaScript to generate the table structure and content dynamically. Here's a basic example of how you can achieve this:

1. HTML Field:

   • First, add an HTML field to your form. This field will serve as the container for your dynamic table.

2. Javascript:

   • Write a JavaScript function to generate the table dynamically. This function can be called when the form loads or when specific conditions are met.
   • The function should create the table structure and populate it with data as needed.

Here's an example of how you can create a dynamic table using Javascript:

<script>
function createDynamicTable() {
// Get the HTML element to contain the table
var container = document.getElementById('dynamicTableContainer');

// Create the table element
var table = document.createElement('table');

// Create and append the table header row
var headerRow = table.insertRow();
var headers = ['Column 1', 'Column 2', 'Column 3']; // Example column headers
for (var i = 0; i < headers.length; i++) {
var headerCell = document.createElement('th');
headerCell.textContent = headers[i];
headerRow.appendChild(headerCell);
}

// Create and append table rows with data
var rowData = [
['Data 1', 'Data 2', 'Data 3'],
['Data 4', 'Data 5', 'Data 6'],
// Add more rows as needed
];
for (var j = 0; j < rowData.length; j++) {
var row = table.insertRow();
for (var k = 0; k < rowData[j].length; k++) {
var cell = row.insertCell();
cell.textContent = rowData[j][k];
}
}

// Append the table to the container
container.appendChild(table);
}

// Call the function to create the dynamic table when the form loads
window.onload = function() {
createDynamicTable();
};
</script>

Regards,

Sujit

Please mark my answer Correct/Helpful, If applicable