Embed on mobile message event listener

[justinonstine]

Hi Looker friends. I have implemented Embedded Looker dashboards on a web application and was able to use an event listener to capture and store filter state changes so that they stick upon navigating away/back. I would like to do the same on our React Native mobile app. Currently we use a WebView component, which has some capability to add event listeners to fire messages back to itself. However, it appears that this does not work for “message” event types. 

I was wondering if anyone had had any luck getting this to work?

Thank you!

Justin

[justinonstine]

Ok I managed to do this, but it was a bit unconventional -- instead of applying a listener for “message” type events, I used one for “click” events. In the event payload, there is a “nativeEvent.url” property which contains the unsigned embed url with filters applied. I cached this in Redis on the back-end and then when a user goes to fetch another signed URL for this dashboard, instead of constructing one from scratch I pull the cached url and sign it. It seems to work pretty well, one minor downside is that the click event returns an absolute URL which doesn’t feel quite as nice as a relative one. Here’s the relevant code for my React Native component in case anyone else finds themself in the same spot:

    injectedJavascript = `window.addEventListener('click', function(event) { 
        window.ReactNativeWebView.postMessage(JSON.stringify(event));}); true;`


    render(): JSX.Element {
        if (!this.props.signed_url) {
            return <LoadingIndicator />
        }
        return (
            <View style={{ flex: 1 }}>
                <WebView
                    source={{ uri: this.props.signed_url }}
                    originWhitelist={["*"]}
                    injectedJavaScript={this.injectedJavascript}
                    onMessage={(event): void => {
                        if (event.nativeEvent.url !== this.props.filter_state_uri) {
                            this.props.setLookerFilterState({
                                element: dashboard_name,
                                filter_state_uri: event.nativeEvent.url
                            })
                        }
                    }}
                />
            </View>
        )
    }

If anyone has a better way of doing this, I’d love to hear it!

Justin