LinkedIn
Twitter
At the end of last year, you mightโve seen that a lot of integrations in the Marketplace were simultaneously updated, where the release notes were mentioning Predefined Widgets and looked similar to this:
We've made a lot of effort to ensure that most of our integrations will support an OOTB (out-of-the-box) visualisation that you can just drag & drop into any playbook view and today 95% of all actions have a predefined widget!
What is a Predefined Widget?
Predefined Widget - is an HTML widget that is bound to an action and rendered using information from JSON Result. It's provided as part of the integration content.
Here is an example of a Predefined Widget from MITRE ATT&CK integration:
Where can I find information about what actions have a Predefined Widget?
This information is available via Marketplace page, where you can look into details of integration:
It's also available in the playbook builder view, when you look into integration content:
How to add Predefined widgets to a Playbook View?
Before we answer the main question, it's important to understand that every playbook can have a dedicated view associated with it. We will not go into details, but here is how you can add a view to your playbook:
If there is an action inside the playbook that has a Predefined Widget associated with it, then the created View will have the widget added to it automatically.
If you have an existing playbook with already created view and you want to add Predefined Widgets, then under the "Predefined" tab, you will see a list of all available Predefined Widgets (even from the blocks that are a part of the playbook).
How to tweak Predefined Widgets?
Overall, Predefined Widgets are created in a way that they will be rendered, when they need to be and know how to work with the information available from JSON result. You can use them directly without ANY tweaks.
But most of the Predefined Widgets are created with 400px height and 50% width, which may not be optimal for your workflows. Currently, you can't change this metadata on Predefined Widgets themselves. In this case, you can just copy the whole HTML code of the Predefined Widget and create a custom HTML widget. You will need to update placeholders both in the HTML and Conditions!
By default, in Predefined Widgets we use special placeholders like [{stepInstanceName}.JsonResult]. This placeholder is reserved for Predefined Widgets and it's used to distinguish between multiple instances of the same action within the playbook. For example, if you have 2 actions that Execute UDM Queries, then the platform needs to know, what JSON Result should be used to render the widget. With this placeholder, the platform knows, how to resolve this automatically.
In your custom tweaked HTML widget, you will need to replace the placeholder with a relevant placeholder of the action. Remember that "Placeholder Picker" is available:
Hope this post was useful and you've learned something new! Feel free to ask questions in comments!
