Need a reference for HTML code to provide a custom widget

 

Hello everyone,

I’m looking for an integration that offers custom widgets to display data retrieved from the integration. By "custom widgets," I mean the ability to add HTML code to a widget in order to display specific information.

I understand that Insights can be created, but they are displayed within the Insights widget.

What I need is a reference or example of HTML code used by the community to display integration-related data for cases or alerts, helping users view summarized information more effectively.

Thanks!



Solved Solved
0 8 499
2 ACCEPTED SOLUTIONS

Hello,

When you create a view you can select the html widget from the tab on the left called General. Once you are in the html widget configuration screen you will see a few templates. However, if you click view more you will see the full array of templates we offer that covers a lot of common use cases. Sometimes that view more can hide them. Along with the html widget I also recommend using the Key-Value Widget when you are trying to list important fields you want the analysts to have up front so they can make quicker decisions. I often use these when building playbooks and call them 'Key Investigation Fields'. Typically I will create a separate key-value widget for each type of investigation, as the important fields might be different. I have included screenshots of where to find the sample html code in the platform.

Thanks for asking your question,

IvanScreenshot 2024-11-21 at 1.16.21 PM.pngScreenshot 2024-11-21 at 1.15.06 PM.png

View solution in original post

Use the standard (and already installed) HTML widget (top image above)
Then in the HTML/JS code you reference output from any ACtion in the playbook.  i.e. if you have an Action called "enrich sql" the HTML might say

<div>Results</div><div>[Enrich SQL.JSON Result]</div>

You don't need to install anything to make this work.

Many of the Actions in the marketplace that focus on questions, enrichments, searching, already have out of the box widgets build ("predefined widgets") but that doesn't stop you pointing your own widget at them. 

View solution in original post

8 REPLIES 8

Hello,

When you create a view you can select the html widget from the tab on the left called General. Once you are in the html widget configuration screen you will see a few templates. However, if you click view more you will see the full array of templates we offer that covers a lot of common use cases. Sometimes that view more can hide them. Along with the html widget I also recommend using the Key-Value Widget when you are trying to list important fields you want the analysts to have up front so they can make quicker decisions. I often use these when building playbooks and call them 'Key Investigation Fields'. Typically I will create a separate key-value widget for each type of investigation, as the important fields might be different. I have included screenshots of where to find the sample html code in the platform.

Thanks for asking your question,

IvanScreenshot 2024-11-21 at 1.16.21 PM.pngScreenshot 2024-11-21 at 1.15.06 PM.png

Hi,
Thank you for sharing this. Can you elaborate on the part where you use the playbooks and the widgets? Is there a way to populate the widgets using playbooks?

Use the standard (and already installed) HTML widget (top image above)
Then in the HTML/JS code you reference output from any ACtion in the playbook.  i.e. if you have an Action called "enrich sql" the HTML might say

<div>Results</div><div>[Enrich SQL.JSON Result]</div>

You don't need to install anything to make this work.

Many of the Actions in the marketplace that focus on questions, enrichments, searching, already have out of the box widgets build ("predefined widgets") but that doesn't stop you pointing your own widget at them. 

This makes sense, thank you.

Hi, @SoarAndy. I want to iterate through all the entities and create a table in HTML Code, wherein each row displays information for each entity. This would require some JavaScript.

For this, I have added this script: 

preet_mehta_0-1732514803969.png

However, I cannot get through this: 

preet_mehta_2-1732514962007.png

 

Is there any documentation on how to use the entity data in HTML Code.
Thanks.




The complication is that first you use
[Entity.identifier] which is a,b,c and you split

Next you use [Entity.other] and you get x,y,z

The challenge is that abc and xyz are not guaranteed to be in similar orders, so the table might mis represent the data

I suggest using the builtin Entity widgets and Pinning attributes of interest

HTH

Hi @SoarAndy 
Can you elaborate on how to pin the attributes of interest ?
My use case is to create custom HTML widgets that displays different fields of entities, but as per your answer, if using [Entity.field_name] does not necessarily provide me a fixed ordered values, then I would not be able to accomplish this.

In the OOTB "Entity Highlights Widget" 
Entity -> View Details -> ... -> Add to highlight

SoarAndy_0-1741343640328.png