Client-side links (mailto, sms etc)

The menu items in Wisej have an icon on the left (or icon space), the  label, an optional keyboard shortcut, and the arrow to show the submenu. The label is only one component of the menu widget. It’s more than just a <div>.

However, like most things in Wisej, you can  override the default wisej.web.MenuItem javascript class and make the whole widget become an <a> link. See the  project attached here:

https://wisej.com/support/question/dynamic-meta-tags-based-on-url-parameters-facebook-sdk#sabai-entity-content-4263

It contains a new MenuItem class that has a new HRef property.

I looked at this some more, and came across something that maybe should have been more obvious. These links, defined as

MenuItem.Text = “<a href=””>Link Text</a>”

only apply the A HREF to the text part of the menu item, and not the entire rectangle area of the MenuItem. In order to activate the link, you have to click on the text part of the Menu item. Clicking the background area triggers nothing.

Is there a way to get the A HREF to apply to the entire area of the MenuItem?

Good morning, wanted to check in and see if there was progress on this, or if an issue had been logged in Gemini.

Sounds good thanks.

Kind of works but the problem is that the owner element captures some low level event and closes the menu. If you tap on the menu item and keep it down for a bit longer you’ll see that it works. I’ll have a better solution for this, will update this post.

That’s good, I noticed you added those touch events and hope to look at them soon.  I agree HREF would be the best way to launch these client-side links. Yes I checked the quotes, unfortunately I can’t get mailto: or sms: links working on Android, despite many attempts. I’ve tested it on Android 5.0.1 and also Android 6.0.1.

Attached is a test case for mailto, sms, and tel: links

I tried this on an iphone:

this.menuItem1.Text = “<a style=’color:inherit;text-decoration:inherit’ href=\’sms:test\’>menuItem1</a>”;

It works. Make sure you are using the straight single quotes. When copying from/to wordpress they are changed.

onclick doesn’t seem to work on mobile devices, ontouchstart does. We have it easy with the qooxdoo framework since it normalizes all the tap, touch, roll, mouse,  pointer events on all devices. But if you use javascript the browser (at least iOS does) will block you and ask for permissions.

The best and safest way is to use href.

Cool, I forgot about using HTML in the .Text property. Is there anything else that has to be done? I couldn’t get any of these examples to work.

Me.mnuShareGmail.Text = “<span onclick=’window.open(“”mailto:blah@blah.com”)’>Send Email</a></span>”
Me.mnuShareGmail.AllowHtml = True
Me.mnuShareTextMsg.Text = “<span onclick=’window.open(” + Chr(34) + “sms:?body=testbody” + Chr(34) + “)’>Text Message</a></span>”
‘Me.mnuShareTextMsg.Text = “<a href=’sms:?body=testbody’>Text Message</a>”
Me.mnuShareTextMsg.AllowHtml = True

The HTML I am comparing it to is below.  All these links work on Android 5.0.1

<a href=”sms:?body=testbody”>Android SMS</a>
<br>
<a href=’mailto:blah@blah.com’>Email with address filled</a>
<br>
<a href=’mailto:’>Email blank address</a>
<br>
<a href=’mailto:someone@example.com?subject=Suggestions&body=Your’>Email all fields pre-filled</a>
<br>
<a href=’mailto:?subject=Suggestions&body=Your’>Email no recipient body pre-filled</a>

You can attach all sorts of client action using the JavaScript extender, but in this case it won’t work since it doesn’t extend menu items. I’ll add an enhancement request for this.

In any case, with Wisej you can always resort to HTML (VWG could display html content). You can do it with href (in this case you’d need to a <style> tag or a css file that styles the href elements, or with a <span>.

menuItem.Text=”<a href=’mailto:test@test.com’>Send Email</a>”;  // you can add a style attribute or a add a<style> section to Default.html , or add a css file to Default.html.

or

menuItem.Text=”<span onclick=’window.open(\”mailto:test@test.com\”)’>Send Email</a>”;

In onclick  you can put pretty much anything. Set AllowHtml to true to show the html.