BloX Custom Actions Guide

Comments

9 comments

  • Avatar
    Delsaran Bigglesworth

    Can I write functions in there and have them be called from button?

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein (Edited )

    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

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    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;

    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);
    }
    ^^^ This starts the animation, can I have two functions in one "Action" Tag
     
    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.

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein

    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

     

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Awesome, that clears a lot of my questions up. Where would I assign them to the window? Would I drop the function into the Edit Script tab?

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein

    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.

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    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?

    0
    Comment actions Permalink
  • Avatar
    Adi Lewenstein

    The value of the script attribute is actually the content of the script tag, so it should actually contain the contents of fileblah.js

    1
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    Thank you again. Five star help

    0
    Comment actions Permalink

Please sign in to leave a comment.