Embed SDK and Vue.js

Comments

5 comments

  • Avatar
    Moti Granovsky

    Hi Marcin!

    I don't think your issue is related to Vue.js specifically but rather to the order of events.

    Until the `render` method is called, the iFrame either does not exist at all or does not have the Sisense application loaded within it, which means commands such as `getUser` are doomed to fail as they rely on there being a Sisense application to communicate with, and get the user information from.

    The way to fix this is to put all calls to the SDK within the `render` function's callback (the function executed by `then`) - that way, this code will only execute when the iFrame is ready and the Sisense application within is able to communicate with the SDK.

    You can see an example of this in our Github example: https://github.com/sisense/embed-sdk-demo

    I also recommend checking out our new (as of this week!) developer documentation website at https://sisense.dev and specifically https://sisense.dev/guides/embedding and https://sisense.dev/reference/embedding as we've improved the Embed SDK documentation and its much easier to read and use.

    Would love to hear about your experience using the new documentation, as well as the Embed SDK!

    1
    Comment actions Permalink
  • Avatar
    Mitchell Cooper

    Hey Moti,

    Thanks for the response. I work with Marcin, and was wondering if you could help guide me in the right direction for applying a filter to a sisense frame. Not sure how familiar you are with Vue.js, but Vue.js has methods (functions) declared separated from the mounted code (where I'm initiating/rendering the sisense frame). Essentially the psuedo code would look like:

    data: () => ({
        sisenseFrame: null,
    }),
     
    mounted () {
       this.sisenseFrame = new SisenseFrame({...})
       this.sisenseFrame.render(...).then(...)
    }

    At this point the frame is rendering correctly and looking good, but when I try to apply the filter via an event from the UI, it hits my method code:

    methods: {

       myApplyFIlters () {

          var filter = {...}

          this.sisenseFrame.dashboard.applyFilters(filter)

       }

    }

    Which then results in an error saying "Sisense iFrame is not ready yet"

    Should an approach like this work? Or can the sisense frame not be stored as an object on my Vue.js component? Any advice is appreciated! Would like to leverage Vue.js lifecycle hooks/methods with the sisense embed.

    Thank you

    0
    Comment actions Permalink
  • Avatar
    Moti Granovsky

    Hi Mitchell - I am somewhat familiar with Vue (our new documentation was built using Vue.js!)

    I'm still wondering if this is a timing issue - is it possible that at the time "myApplyFilters" is called, the iFrame is indeed not loaded yet? Does it work if you wait for the Sisense app to fully load before executing this function?

    If yes - then you need to prevent the method from executing until "render" is completed - using a flag.

    If no - then that would be a scoping issue that we need to investigate in the context of a Vue.js component - if that's the case, please contact devexp@sisense.com with as much details as you can provide so that our engineering team can reproduce the issue and find a solution.

    0
    Comment actions Permalink
  • Avatar
    Mitchell Cooper

    Hey Moti, hope you're enjoying Vue.js as much as I am!

    I'm afraid it's the latter. I've been triggering the event after Sisense iFrame has loaded. I'll revert my code back to that to double check and then contact your engineering team. Thanks for the quick support!

    0
    Comment actions Permalink
  • Avatar
    Mohini Meher (Edited )

    Unable to loging after using Embed SDK 

    0
    Comment actions Permalink

Please sign in to leave a comment.