BloX Custom Actions Guide
BloX 2.0 has introduced custom actions. These answer any need for interactivity that is not met by the 5 native action types.
Once an action is created, its snippet is added to the “My Actions” section of the actions tab, and it can be called, updated or deleted by any designer working in Sisense.
When creating a custom action, you may use pure JavaScript syntax as well as libraries used in Sisense, such as jQuery, underscore.js, and moment.js. The action can access prism and other global variables.
Upon saving, the action's, code goes through Babel, transforming it into ES5 for cross-browser compliance purposes. This transformation is transparent to the designers, that will still see their original syntax any time they choose to edit the action.
Payload
Custom actions can use an argument named payload to access most of their relevant information.
We’ll review a few important payload properties that any action will be able to access:
Container: The DOM element holding the widget body. Can be very useful for jQuery selectors.
Data: The action’s data property. When you define a new custom action, the best practice is to populate the data property with all attributes and variables that you would like your action to get from the card. This is also where all input fields’ values are contained. <link to populating data>
Result: Contains the data panels of the specific card that triggered the action. For the full widget result set, it is better to access payload.widget.queryResult.
Widget: The BloX widget object. You can use this object to access the widget’s structure and result set as well as the parent dashboard and its attributes (filters, other widgets in the dashboard, etc.)
In addition to the above native properties, the payload will also contain any property that will be added to the action (see example below).
Creating an Action
To create a custom action, open the editor’s main menu and choose “Create Action”.
The design panel Should now turn into a Javascript editor.
Give your action a javascript-friendly name, preferably camel cased.
Now you can define your action’s functionality.
Click Next to go to the next step and define your action’s snippet.
As snippets were meant to help designers add elements and actions to their cards, it’s crucial to make sure that yours includes all of the inputs that your action needs run properly.
Once saved, the action and snippets will be saved on the Sisense application DB and will be visible to all other designers in the BloX actions tab.
Copy the snippet to the clipboard and paste it to an action container in the BloX editor to test it.
You can find the snippets for action containers in the Actions tab’s Action Buttons section.
If any inputs were included, such as the text attribute, adjust their values to this action button’s specific requirements.
Now, click on one of the action buttons to trigger it.
In our case, we will see out action’s output in the browser’s JavaScript console:
Editing and Deleting Actions
Any designer can currently edit or delete existing custom actions.
To do so, find your action in My Actions section, click on the menu button on the right most of the screen and choose the desired option from the dropdown menu.
-
Hi Delsaran,
That's exactly what the custom actions are made for.
When you define a custom action, its code is wrapped by a function that BloX executes upon action click.
The function's only attribute is the payload, whose arguments are described on top, and you can pass any custom arguments to it by adding them to the action's JSON object.
Thanks,
Adi
-
Alright I'm lost then. I have some simple code there that basically amintates a circle, it works as expected in JS Fiddle, but when I try and test it in BloX not so much. I must be missing something about how this works. Here is my widget JSON. The functions that I'm trying to turn into action are at the bottom.
{ "style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "<svg width='500' height='100'><circle id='circle1' cx='20' cy='20' r='10' style='stroke: none; fill: #ff0000;'/></svg>"
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "<input type='button' value='Start Animation' onclick='startAnimation();'><input type='button' value='Stop Animation' onclick='stopAnimation();'>"
},
{
"type": "ActionSet",
"actions": [
{
"type": "start",
"title": "Start"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "stop",
"title": "stop"
}
]
}
]
}var timerFunction = null;
^^^ This starts the animation, can I have two functions in one "Action" Tag
function startAnimation() {if(timerFunction == null) {timerFunction = setInterval(animate, 20);
}
}
function animate() {var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) {
newX = 20;}
circle.setAttribute("cx", newX);
}function stopAnimation() {if(timerFunction != null){clearInterval(timerFunction);timerFunction = null;}}
^^^ This one stops it
Am I just going about this in the wrong way? Thank you so much for taking the time to help.
-
Hi Delsaran,
2 comments regarding the above:
1. In your actions, you defined the startAnimation and stopAnimation functions, but never called them.
Then I added:
startAnimation()
to the end of the start function, the circle did start moving on my screen.
2. Each action's function works within its own scope and variables defined in actions exist within that same action call, and not on the window.
Since timerFunction was not declared in stopAnimation, it was not recognized as a function.
If you'd like to address the interval function from both actions, I'd recommend assigning them to the window, where both can access them.
Let me know if it makes sense.
Thanks,
Adi
-
I'd probably use the main BloX object's script tag.
That's actually a good opportunity to explain where each script runs:
1. Widget script: executed before the widget is initialized (when you open a dashboard or refresh the page). That's a good place to create widget event handlers, or create parameters that you only need to define once regardless of result sets.
2. BloX script tag: runs every time the BloX widget is rendered and loaded to the screen (includes filters update, screen resizing and anything that triggers redrawing of the BloX widget). This is a good place to execute scripts that should run every time the view is loaded (for example: selecting elements from the DOM and applying different manipulations on them).
Since you are selecting the circle using an id, you will probably want to re-select it every time it's rendered, and for that, the blox script tag is more suitable.
-
Thank you so much for taking the time to explain this Adi.
The script tag is like a normal "<script>"? So I can put .js file references in it like
<script type="text/javascript" src="//blah/subblah/fileblah.js"></script>
Do I have to put the brackets in the json? Or just the file reference?
-
Hi
Created custom action action its snippet is added to the “My Actions” section of the actions tab, and able to call from the Blox widget.
I have a similar functionality as like in the attached URL.
https://support.sisense.com/hc/en-us/articles/360049501033
is there a way we can pass the widget ids in the editor script of the BloX as opposed to passing them to the action rather hard-coded in the Java script [STEP2 in the URL]
appreciated for your help!
-
Hi Amar,
Any additional property added to the action will be available to your action through the payload variable.
For example, if you define the action looks like this:
{
"type": "DataGran",
"title":"Apply",
"data": {
"widgetIds": ['abc','def','ghi']
}
}Then in your code, you can extract the widgetIds array from payload.data.widgetIds
We do highly recommend adding those input field under the data property, to avoid any conflicts with native properties of the payload.
Please sign in to leave a comment.
Comments
11 comments