[Google Maps] InfoWindow Button click handler

[Google Maps] InfoWindow Button click handler

  
Forge Component
(13)
Published on 20 Sep (9 days ago) by OutSystems Labs
13 votes
Published on 20 Sep (9 days ago) by OutSystems Labs
How can I get an InfoWindow's button click event to run an Outsystems screen action? This button exists inside of a Google Map InfoWindow as seen in the screenshot below:



I also have a hidden button on my screen with a name so I can access it in the javascript function and call it's click event. This hidden button is linked up to call my screen action. When I click on the InfoWindow button my whole action gets cleared and looks weird, and then when I try refreshing the page it is in some wierd form subittion state, so I just have to close the window and start over.
Hey there, Cody,

I was gonna suggest something just like that: place a JavaScript click event handler on the InfoWindow's button, which would click a hidden button.

But I don't understand the problem, I'm afraid. Does the screen go blank after you click? Would you please share the action's flow and/or an anonymous URL of the screen?

Best regards,

Carlos Simões
I figured out my main problem (I had a couple issues) but the main issue was this:


Broken method
<button onclick="document.getElementById(\'"+HiddenButton.Id+"\').click();">Click Me</button>

Fixed method
<button type="buttton" onclick="document.getElementById(\'"+HiddenButton.Id+"\').click();">Click Me</button>

I was reading how by default an HTML button's type attribute is SUBMIT, which was causing the page to do a POST request. So I just had to add the type attribute and set its value to BUTTON and that fixed it.

Cody Ahlquist wrote:
I figured out my main problem (I had a couple issues) but the main issue was this:


Broken method
<button onclick="document.getElementById(\'"+HiddenButton.Id+"\').click();">Click Me</button>

Fixed method
<button type="buttton" onclick="document.getElementById(\'"+HiddenButton.Id+"\').click();">Click Me</button>

I was reading how by default an HTML button's type attribute is SUBMIT, which was causing the page to do a POST request. So I just had to add the type attribute and set its value to BUTTON and that fixed it.
 

Cool! Glad to know you solved it!

If you have any other issues, feel free to contact us. :)

Cheers,

Carlos Simões
Hi Cody,

Glad you found the problem :)

I'd just like to suggest an alternative to having a hidden button to invoke the server action.
Instead, you can use RichWidget's FakeNotifyWidget, which is a bit cleaner in my opinion.

Maybe you've seen it, but if you haven't, the way it works is you associate it to a server action (like you do with a hidden button).
Then you can invoke that server action from JS directly, by doing OsNotifyWidget(<your fake notify widget id>, <a string with the parameters you'd like to pass>)
On your server action you call the NotifyGetMessage() to get the parameters and then do your processing.

In most cases I prefer this method to having hidden buttons, and in your particular case it wouldn't have caused the submit problem.
I like the cleanliness of not having the button, and the ability to pass parameters without much hassle.

Cheers,
Daniel
Very interesting Daniel, I did not know about the FakeNotifyWidget, I will most definitly look into it! The parameter passing alone would be a huge help and much cleaner. The button submit issue is actually on the button the user clicks to remove the waypoint from the Google Map as shown in the screen shot in my first post on this thread not the hidden button so that would have still been an issue for anyone doing the same thing. But again, thanks so much for this helpful alternative, I know some of my other co-workers will be excited to hear about this.