Creating Dynamic Infographics with BloX

Comments

7 comments

  • Avatar
    Ravid Paldi

    Superb trick. Thanks Artem! 

    0
    Comment actions Permalink
  • Avatar
    Nathan Giusti

    Great stuff. Now I just have to figure out how to make decent SVGs

    0
    Comment actions Permalink
  • Avatar
    Artem Yevtushenko

    Here are some free tools to get you started!  
    https://blog.hubspot.com/marketing/adobe-free-alternatives

    0
    Comment actions Permalink
  • Avatar
    Antti Wolk

    How can i tie the panel items to the id's by using a little JQuery?

    0
    Comment actions Permalink
  • Avatar
    Artem Yevtushenko

    Hi Antti,

    The "Writing the JQuery Script" section covers this question.
    Please let me know if something is unclear in the documentation.

    Cheers,
    Artem

    0
    Comment actions Permalink
  • Avatar
    Antti Wolk

    Hi Artem,

    does it work with "Items" and "Values" the same way?
    I could make it with Values, but for some reason, it does not work with Items.

    Antti

    1
    Comment actions Permalink
  • Avatar
    Artem Yevtushenko (Edited )

    Hi Antti,

    There may be a more elegant solution, but for the meantime the solution I have is as follows:

    An additional line of code needs to be added ahead of the script content.

    <script>additional content; $(#num1).text(...</script>

    This content will allow us to access the pane's text by putting it into an easy to access variable.

    The following line will grab the current panels and their content:

    var dims = Object.entries(prism.activeWidget.queryResult[0]).map((e) => ( e[1] ));

    Once the variable dim is available, we can query the BloX panels and extract the dimension text. We can do this inside the text() function as usual.

    $('#someSelector').text(dims.find(w=>w.Panel == 'Category').Text)

    To select your panel by name, replace Category with your own panel's name.

    That should do the trick!

     

    1
    Comment actions Permalink

Please sign in to leave a comment.