Playbook Views - Table HTML

[ORBR]

Hello,

Could someone provide an example of the table HTML for the predefined views?

I would like to use this template to display JSON results from a QRadar AQL query.

The current template uses static results. What modifications are needed to configure it to use dynamic JSON results and include fields such as Source IP, User-Agent, and Location?

Thank you!

[yogesh_mahera · Accepted solution]

<table>
  <thead>
    <tr>
      <th>Source IP</th>
      <th>User-Agent</th>
      <th>Location</th>
      <!-- Add more columns as needed -->
    </tr>
  </thead>
  <tbody id="dynamic-data">
    <!-- This section will be populated dynamically with JSON results -->
  </tbody>
</table>

// Assume 'jsonData' is the JSON result from the QRadar AQL query
const tableBody = document.getElementById('dynamic-data');

jsonData.forEach((row) => {
  const tableRow = document.createElement('tr');
  tableRow.innerHTML = `
    <td>${row.SourceIP}</td>
    <td>${row.UserAgent}</td>
    <td>${row.Location}</td>
    <!-- Add more columns as needed -->
  `;
  tableBody.appendChild(tableRow);
});

[yogesh_mahera · Accepted solution]

<table>
  <thead>
    <tr>
      <th>Source IP</th>
      <th>User-Agent</th>
      <th>Location</th>
      <!-- Add more columns as needed -->
    </tr>
  </thead>
  <tbody id="dynamic-data">
    <!-- This section will be populated dynamically with JSON results -->
  </tbody>
</table>

// Assume 'jsonData' is the JSON result from the QRadar AQL query
const tableBody = document.getElementById('dynamic-data');

jsonData.forEach((row) => {
  const tableRow = document.createElement('tr');
  tableRow.innerHTML = `
    <td>${row.SourceIP}</td>
    <td>${row.UserAgent}</td>
    <td>${row.Location}</td>
    <!-- Add more columns as needed -->
  `;
  tableBody.appendChild(tableRow);
});

[SoarAndy · Accepted solution]

Adding some more details on getting JSON data into the widget:

A simple 1d string, note how the placeholder will resolve a STRING so you need to encapsulate with ""

<script>
    simpleString = "[ActionName.ScriptResult]"
</script>

To get a full JSON that you can iterate through in Js (like the thing above), as this is a data type, we don't need ""

<script>
   fullJsonPayload = [Action.JsonResult];
</script>

If you chose a key (theKey) from a JsonResult, it outputs a comma separated list of results e.g. {},{}, so you might need to encapsulate the result in [] so that after parsing, when JS runs, it appears right.

<script>
    arrayOfAnswers = [[Action.JsonResult | "theKey"]]
</script>

 

The best tool for checking is your browser buildin devtools inspector, you can open an Alert widget and inspect the HTML to see how the data rendered. 

[olivacris98]

Hi, @SoarAndy 

I hope you are well, I need to create a table in html for a Default Case View that contains the information of the alerts, following your example I could call
fullJsonPayload = [ActionName.JsonResult]; but this action receives as mandatory a parameter called “case id”, how could I send this parameter ? or otherwise what would be the best way to paint these alerts by case...

Thanks greetings from colombia

[SoarAndy]

HTML can only read data from the playbook/Actions, they cannot perform actions or provide input it is a 1 way process.  So there is no way for HTML table to provide info.

You have to architect the playbook in a way that the info is created regardless of HTML tables

[olivacris98]

Hi again, Is it possible to paint an html table using a Case Context Values ? or a comment of a especific case?

i have this playbook which has a variable set in the case of

But when I try to retrieve the information from the Case.AlertUrls variable it does not show me any information.

and this is the result

Hope your Help

¡Thanks!

[SoarAndy]

Here is a sample

The first image you have showing the data exists, this is in s simulated case.  The image of it not working is a real case.  Is there a chance they have different data in and therefore theHTML is not parsing to a value ?

[ORBR]

Hi @SoarAndy ,

Can I set multiple json results in one HTML?

I`m trying to build a widget with multiple tabs (like in VT), each tab will present different JSON result.

This works for me only for single JSON, not multiple

[SoarAndy]

Yes this is 'normal' HTML/JS
I suggest using browser devtools to load the page and inspect the html (you need to dig down several DOM Layers to find the BODY) and see how it parsed. 

JSON1 = [Action1.JsonResult]
JSON2 = [Action2.JsonResult]

 In this image, the top smp is the object in the HTML widget, I had to expand several layers to find the iframe and HTML to check how the JSON objects parsed into JS variables