> For the complete documentation index, see [llms.txt](https://cortex-docs.paloaltonetworks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cortex-docs.paloaltonetworks.com/cortex-xsoar-8-on-prem/8.7/configure-cortex-xsoar/dashboards-and-reports/widgets/create-a-custom-widget-using-a-json-file.md).

# Create a custom widget using a JSON file

You can create a custom widget for your dashboard or report using a JSON file and then add the new widget to a new or edited dashboard or report. If you want to create more complicated widgets using scripts, see [Create a custom widget using a script](/cortex-xsoar-8-on-prem/8.7/configure-cortex-xsoar/dashboards-and-reports/widgets/create-a-custom-widget-using-a-script.md).

1. Create a JSON file, and add the relevant JSON file widget parameters.

<details>

<summary>List of JSON file widget parameters</summary>

| Parameter         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`id`**          | The unique identifier for the widget.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **`name`**        | The display name of the widget.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **`dataType`**    | <p>The data source of the widget. Must be one of the following:</p><ul><li><strong><code>incidents</code></strong></li><li><strong><code>indicators</code></strong></li><li><strong><code>messages</code></strong></li><li><strong><code>entries</code></strong></li><li><p><strong><code>scripts</code></strong></p><p>Relevant only when you are creating a script.</p></li><li><strong><code>tasks</code></strong></li><li><p><strong><code>generics</code></strong></p><p>Relevant when creating Threat Intel reports. When used, the <strong><code>definitionId</code></strong> value must be <strong><code>ThreatIntelReport</code></strong>.</p></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **`query`**       | <p>Queries query data in the Lucene query syntax form relating to the <strong><code>dataType</code></strong>. For example when <strong><code>dataType</code></strong> is incidents and the query is: <strong><code>-status:closed and owner:""</code></strong>, it queries all incidents that are not closed, which does not have an owner.</p><p>For script based widgets, the query is the name of the script.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **`sort`**        | <p>Sorts the data, when displaying the <strong><code>widgetType</code></strong> (applies to table and list widget types) as a list of objects, which consists of the following:</p><ul><li><strong><code>field</code></strong>: The field name for which to sort.</li><li><strong><code>asc</code></strong>: Whether to sort data in ascending values. If true, the order is in ascending value.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **`widgetType`**  | <p>The type of widget you want to create. Must be one of the following:</p><ul><li><strong><code>bar</code></strong></li><li><strong><code>column</code></strong></li><li><strong><code>pie</code></strong></li><li><strong><code>number</code></strong></li><li><strong><code>line</code></strong></li><li><strong><code>table</code></strong></li><li><strong><code>trend</code></strong></li><li><strong><code>list</code></strong></li><li><strong><code>duration</code></strong></li><li><strong><code>image</code></strong></li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **`size`**        | <p>The maximum number of returning elements. Use \*\*<code>0</code> \*\*for the <strong><code>widgetType</code></strong>'s default.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Note</strong></p><ul><li><strong>Table/List</strong>: Default is up to 13</li><li><strong>Chart</strong>: Default is up to 10.</li><li><strong>Number and Trend</strong>: Ignores the size value.</li></ul></div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **`category`**    | Adds a category name. The widget appears under a category instead of being classified by **`dataType`**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **`dataRange`**   | <p>The time period for which to return data. The time period is overridden by the dashboard or report time period. Default is all times.</p><ul><li><strong><code>fromDate</code></strong>: The start date from which to return data in the format: <strong><code>“YYYY-MM-DDTHH:MM:SSZ”</code></strong>. For example, <strong><code>"2019-01-01T16:30:00Z"</code></strong>.</li><li><strong><code>toDate</code></strong>: The end date for which to return data in the format: <strong><code>"YYYY-MM-DDTHH:MM:SSZ"</code></strong>. For example, <strong><code>"2019-01-01T16:30:00Z"</code></strong>.</li><li><p><strong><code>period</code></strong>: An object describing a period of relative time. If using the <strong><code>fromDate/toDate</code></strong> parameters, this parameter is ignored.</p><ul><li><strong><code>byTo</code></strong>: The to period unit of measurement. Values are <strong><code>‘minutes', 'hours', 'days', 'weeks', 'months'</code></strong>.</li><li><strong><code>byFrom</code></strong>: The from period unit of measurement. Values are: <strong><code>'hours', 'days', 'weeks', 'months'</code></strong>.</li><li><strong><code>toValue</code></strong>: The duration of the to period. Integer.</li><li><strong><code>fromValue</code></strong>: The duration of the from period. Integer. For example, last <strong><code>7 days - { byFrom: 'days', fromValue: 7 }</code></strong>.</li></ul></li></ul> |
| **`description`** | The description of the widget in the Widget Library.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **`params`**      | <p>Enriches the widget with specific parameters, mainly based on the <strong><code>widgetType</code></strong>. Includes the following:</p><ul><li><p><strong><code>groupBy</code></strong>: An array of field names for which to group the returned values. Used when widget type is bar, column, line or pie. For example, <strong><code>\["type", "owner"]</code></strong>: Groups results by type and owner, and returns a nested result for each type with statistics according to the owner.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>Note</strong></p><p>Bar/column charts defined with two groups can become stacked.</p></div></li><li><strong><code>hideLegend</code></strong>: Shows or hides the legend, if it exists. Default is false.</li><li><strong><code>keys</code></strong>: An array that enables processing the data value and modifies it by the given list of keys. For example, \*\*\`\["avg</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **`legend`**      | An array of objects that consists of a name and color. The name must match a group name. The color can be the name of the color, the hexadecimal representation of the color, or the rgb color value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

</details>

2\. Create or edit a dashboard or report.

3. In the **Widget Library** section, click **Upload**.
4. Select the JSON file you created in step 1 and click **Open**.
5. To add the widget to the dashboard or report, click **Add**.

#### **JSON file widget examples**

<details>

<summary>Display incident severity by type</summary>

The JSON file displays incident severity by type. It creates a bar chart with incidents from the last 30 days.

It groups incidents by severity and then type. The bar length shows the incident count.

Create the following JSON file:

```json
{
  "name": "Incident Severity by Type",
  "dataType": "incidents",
  "widgetType": "bar",
  "query": "-category:job and -status:archived and -status:closed",
  "dateRange": {
    "period": {
      "byFrom": "days",
      "fromValue": 30
    }
  },
  "params": {
    "groupBy": [
      "severity",
      "type"
    ]
  }
}
```

This configuration uses the following parameters:

* The widget is called **Incident Severity by Type**.
* The data type is **`incidents`**.
* The widget type is **`bar`**.
* The query excludes job, archived, and closed incidents.
* The date range displays the previous 30 days.
* The **`groupBy`** value groups by severity, then type, creating a stacked bar chart.

After importing the widget into the **Widget Library**, the widget appears as `widget_incident.png`.

Incidents are grouped by severity. Bar lengths show incident counts. Colors identify incident types.

</details>

<details>

<summary>Display incidents by type</summary>

Display incidents by type

The JSON file to display incidents by type contains the following:

Vertical bar chart

Incidents from the last 7 days

Grouped by date and type and sorted by date occurred

```json
{
  "dataType": "incidents",
  "widgetType": "column",
  "params": {
    "groupBy": [
      "occurred(d)",
      "type"
    ],
    "valuesFormat": "abbreviated",
    "timeFrame": "days"
  },
  "dateRange": {
    "period": {
      "byFrom": "days",
      "fromValue": 7
    }
  },
  "propagationLabels": [
    "all"
  ],
  "customCalculation": {
    "operation": "count",
    "fieldName": "",
    "expression": ""
  },
  "name": "Change Sort Order In Column Chart - Sort by Date",
  "sort": [{ "field": "occurred", "asc": true }]
}
```

You can see the following parameters:

The Widget is called Change Sort Order In Column Chart - Sort by Date.

The data type is incidents.

The widget type is column.

For the date range, the fromValue sets the widget to display the last 7 units of time. The byFrom sets the units of time to days, which results in the last 7 days.

The params parameter is set with a groupBy value marking the first group by occurrence date and then by type (making the column chart stacked).

After you import the widget into the Widget Library the following widget appears:

widget-example2.png<br>

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://cortex-docs.paloaltonetworks.com/cortex-xsoar-8-on-prem/8.7/configure-cortex-xsoar/dashboards-and-reports/widgets/create-a-custom-widget-using-a-json-file.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
