How to Pass Variable in Custom HTML

Help Apps
,
1

I have a custom html code in UiPath apps to display data, columns are static but the rows are dynamic, I have used set value activity in UiPath apps and the table data in an array to a variable, when I am passing that varibale in custom html it is going as empty, what is the solution

3

@Glen_Serrao,

Refer this solution.

1 Like
4

Hi @Glen_Serrao

If you using a datatable convert it to json String
jsonString = Newtonsoft.Json.JsonConvert.SerializeObject(yourDataTable)
and set the value to a variable in UiPath apps

<table id="emailTable" class="display">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
        <th>Link</th> <!-- Added "Link" column -->
      </tr>
    </thead>
    <tbody>
      <!-- Data rows will be inserted by JavaScript -->
    </tbody>
  </table>

App.onVariableChange('CreatedVariable', value => {
  updatedvalue = value;
  let emailData = JSON.parse(updatedvalue);
  const tableBody = document.querySelector('#emailTable tbody');
  tableBody.innerHTML = ''; // Clear any existing rows
 
  // Loop through the emailData and populate the table rows
  emailData.forEach((item, index) => {
    const row = document.createElement('tr'); // Create a new row
 
  
 
    // Populate the row with data
      row.innerHTML = `
      <td>${item.Date}</td>
      <td>${item.Sender}</td>
      <td>${item.Subject}</td>
      <td>${item.SummarisedBody}</td>
      <td><a href="${item.FullEmailLink}" target="_blank">Click Here</a></td> <!-- Added link with 'Click Here' -->
    `;
    tableBody.appendChild(row); // Append the row to the table body
  });
  
});

I had implemented this and it works!
Hope this helps!