Getting Value from JavaScript Object

So I’m currently trying to integrate a Web Component into Vaadin. This Web Component has a JavaScript Object called “swiper” and I need to access “swiper.activeIndex”. As I want to make it relatively seamless to integrate with the rest of the Project I want to provide a simple getter for this property. Now I have tried to retrieve it via a JavaScript call, however since that runs asynchronously, I can return it until this is done. And when used say on a button this leads to a deadlock.
What would be the recommended way to retrieve this value?

Normally the Synchronized annotation is used https://vaadin.com/docs/latest/create-ui/creating-components/basic

So I’ve tried around a bit, couldn’t get it to work though.

  @Synchronize(property = "swiper.activeIndex", value = "flow-swiper-activeindexchange")
  public int getActiveIndex() {
    var result = getElement().getProperty("swiper.activeIndex");
    if (result == null) {
      throw new IllegalStateException("swiper.currentIndex is null");
    }

    return Integer.parseInt(result);
  }

This is the current version I have, I’ve validated that the “flow-swiper-activeindexchange” event is fired, but I think I’m not using the property part correctly as it is always null

Oh also, some of the property values I tried were “swiper.activeIndex”, “activeIndex” and “$0.swiper.activeIndex”

Hard to tell… but I can get you an pointer to check for difference / to verify your component with e.g. others… https://github.com/vaadin/flow/blob/765ee6c8016821ffc02d6aeb1942c9e425ee88cc/flow-html-components/src/main/java/com/vaadin/flow/component/html/NativeDetails.java#L196 is a really simple example were you can probably compare how the details element works and compare that with your component

So I’ve figured some new information out. Apparently the Element API considers “swiper.something” to be one property name as a whole rather than an expression. Meaning setting this for example wouldn’t change the existing swiper { activeIndex: 0} value, but instead creates a new property with the name “swiper.something”. The same applies to getting a property.
I’ve also tried doing it with the bracket notation (swiper[“something”]), which had the same result.

So to fix this I would have to get the JavaScript Object as such and then use it to query it’s sub-properties. This is not possible however as Vaadin will throw an Error in the console stating “Message JsonObject contained a dom node reference which should not be sent to the server and can cause a cyclic dependecy.”
So I’m a bit lost now, is there any way to ask for sub-properties through Vaadin without invoking JavaScript which is hard to handle because of the asynchronisity of it?

So if synchronize doesn’t fit your needs or has limitations with the used component… instead of accessing the property… the component is highly likely also having an event that’s thrown when the active index changes or? This could be intercepted and used to get the value on the server and store it https://github.com/vaadin/flow-components/blob/0b2ee17fd8dcc3646314abe588ad84d68d29bb8b/vaadin-dialog-flow-parent/vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java#L149

yeah, I wanted to avoid this as I have a feeling this limitation will come back to bite me later, but in the worst case I just have write it in the documentation as a limitation or something if I find another one of these, oh well. Thanks for the help though, appreciate it :slightly_smiling_face: