Opening a mobile "share menu"?

Anvil Q&A
1

Hello,

I tried to google a solution to this, but maybe I’m not able to phrase it properly.

I’m trying to add a “Share” or “Refer” button to my app that will pull up a list of buttons (Email, WhatsApp, Facebook, SMS, etc…) for the user to click on and send a text with a referral link to others. Basically what you get when you open the YouTube app on your phone and click “Share” underneath a particular video.

I guess it could be custom-coded by getting custom links from various platforms for this purpose (like here), but it seems like this is already a feature of the OS in Android and iOS at least (the “Share” panel that pops up in many apps).

Is there way to trigger that and customize the share links for your purpose in Anvil?

Or, failing that, any custom apps we could add as a dependency to integrate that in our apps already?

EDIT: Ahh, I see, we can do it with some JavaScript. But it seems that the compatibility, at least as of 2021, is not great. Any updates on that from the mobile devs out there?
It might be better not to try using the built-in share functionality anyway.

1 Like
2

I use a mixture of navigator.share and custom links.

Basically, in my app, I already have direct share options available for popular social media and a three dots button that opens up the navigator.share if available.

In that way, you get the best of both.

If you need help with links for social media, a quick search on Google for ‘Share Links Generator’ will give you multiple relevant results.

2 Likes
3

Would you have a clone app or link that you could share to see your implementation by chance?

4

When calling navigator.share("somelink") from client-side code, I am getting:

AttributeError: 'Navigator' object has no attribute 'share'

It should be a standardly accessible function, no?
Although running the “Share MDN” test from here: Navigator: share() method - Web APIs | MDN shows an error on both desktop and mobile, from my tests. Does anyone get a permission error trying to run that test from mobile?

5

You may not be passing the correct parameters. You will have to pass the share data as a dictionary.

Try this


from anvil.js.window import navigator

share_data={'url':'somelink'}
navigator.share(share_data)

You can also add text, title or a file to share_data

1 Like
6

Hmm, thanks, it does work now on my mobile (Android using Chromium browser… although exiting out of the menu instead of sharing something throws an “AbortError”… probably some additional abort handling needs to be added?)
However on dekstop the same error remains. I’m not sure that Desktop browsers have a native implementation for navigator.share

7

at the bottom of the link you shared there is a reference to browser support with only partial support listed for chrome

Only supported on Chrome OS and Windows, see bug 770595 and bug 1144920.

2 Likes
8

Ahh, good catch.

Would there be a way to check if the user is using a PC and then use an appropriate alternative? Like:

if platform == "pc":
  anvil.js.window.location.href = "mailto:user@example.com?subject=Subject&body=message%20goes%20here";
9

There are ways to detect PC but that is not enough since navigator.share is supported on most pc browsers as well. By any chance, are you using firefox because navigator.share does not appear to be supported on it.

In any case, here is what you can do.

if hasattr(navigator,'share'):
     #Call navigator.share here

else:
    anvil.js.window.location.href = "mailto:user@example.com?subject=Subject&body=message%20goes%20here"
2 Likes
10

No, I was using Chrome on MacOS.

Maybe some extension was blocking it?

11

According to

navigator.share is only supported on Windows and Chrome OS for Chrome. Although it should work on all newer versions of Safari. (As already pointed out by @stucork)

12

Yep I just tried in Safari on MacOS. Odd that Chrome wouldn’t support it on MacOS

13

That’s the way it is with web development. At least Anvil allows you to avoid it as much as possible.

14

Is there a way to format an email sent through navigator.share with HTML, so that a “here” links show up as a hyperlink?

anvil.js.window.location.href = f'''mailto:user@example.com?subject={self.user['name']} has invited you to use The App!%20&body=Good news! You've been invited to use our app. Click {(share_data)} here to complete your signup.'''

This link suggests it cannot be done, so would there be a better way to share a nicely-formatted URL through email or via navigator.share?