Trigger filter and/or action when carousel pager is advanced

Comments

6 comments

  • Avatar
    David Oyler

    I would also love to know if something like this is possible.

    1
    Comment actions Permalink
  • Avatar
    Ravid Paldi

    Hi Guys, 

     

    David Oyler, yes. It is possible but very tricky. 

     

    BloX doesn't have  "onAdvance" or 'onChange" or any equivilent events BUT with some JS you can:

    1) Hook an eventListner to the arrows clicks

    2) Upon click, search for the currently visible object and save its metada. 

    3) Pull from the metada the specfic filter member that you wish to replace the curent selection in the Dashboard Filters

    4) Push that new modified filter selection and triger a dashboard refresh. 

     

    I'd be honest, that's a fairly complicated customization and not the most reliable one when you'll switch versions (like any other customizaion that uses the raw html elements rather then a proper API ). 

    If you'r visual within the carosuel is not too complicated (for that matter none of the out-of-the-box templates are considered to be too complicated) then I would recomend developing this BloX widget as a "regualr" custom visualization widget. That way you could own the inner elements and data flow so it won't break between different versions

     

    We've done many similar projects. Feel free to reach out if you have any question while trying to implement it or if you would like to get a quote. 

     

    I hope it helped (: 

    Ravid

    ravid@paldi.solutions 

    Paldi Solutions

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth (Edited )

    This is the template that I used.

    {
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [],
    "actions": [
    {
    "type": "Filters",
    "title": "{panel: CHANGE THIS}}",
    "style": {
    "backgroundColor": "#0e9aa7",
    "color": "#F4F4F8"
    },
    "data": {
    "filters": [
    {
    "panelName": "CHANGE THIS",
    "filterJaql": {
    "explicit": true,
    "members": [
    "{panel: CHANGE THIS}"
    ]
    }
    }
    ]
    }
    }
    ]
    }

    This goes in the "Edit Script" section 

    widget.on('ready',function(send, widget, args){	
    const widgetElement = prism.$ngscope.appstate === 'dashboard' ? $('widget[widgetid=\"CHANGE THIS TO THE WIDGET ID\"]') : undefined;
    $(".carousel-button.arrow-next", widgetElement).click(function(){
    $(".blox-slides:not(.blox-carousel-hide)", widgetElement).find(".btn__text").click();
    return false;
    });
    });

    This was a fairly complicated puzzle to solve, for some reason I couldn't get getElementByClassName to work.

    I hope this helps.

    1
    Comment actions Permalink
  • Avatar
    David Oyler

    Delsaran that's awesome!

    One more thing to note, inside your widget, turn off the filter for the field you are using in the carousel, otherwise you will only get the one value and the arrows will disappear.

    1
    Comment actions Permalink
  • Avatar
    Ravid Paldi

    Delsaran Bigglesworth

    Nice hack with the filter button approach! 

     

     

     

     

    1
    Comment actions Permalink
  • Avatar
    Sven Willenberger

    That's perfect and works great, thank you! (I took the liberty of adding the same function call for arrow-prev, as it only seemed fair to the poor back arrow :P  )

    1
    Comment actions Permalink

Please sign in to leave a comment.