Use Custom Protocols via utils.OpenUrl()

App Building
1

I have a windows app with a custom protocol of 'opendental:' which can also accept parameters as 'opendental://1/2/3/4'. This works if entered directly in the browser; however, i can't seem to bypass retools limitations.

If I attempt to use utils.OpenUrl() I receive the following error: Error:Invalid URL: the URL may only start with one of the following protocols: http, https, mailto, tel, sms, facetime, callto, cid, xmpp, slack, ftp, ftps

It seems at least one other has managed to get around the issue with a custom component but I could not get it to work within my app. The link simply does not work - no error messages or console logs.

What I've tried:

  1. utils.OpenUrl()
  2. Custom HTML link
  3. Customer HTML link w/ JS
  4. JS Query
  5. Custom Component (as defined in the post above)
  6. iFrame
2

Hello,

Have you tried to use a custom component?

If not, try a custom component that wraps the Windows API function ShellExecute(). This function then allows you to open any file or URL, including custom protocols.

To create a custom component, you will need to create a new file with the .vue extension. The file should contain the following code:

HTML<template>
  <div>
    <button @click="openLink()">Open Link</button>
  </div>
</template>
<script>

export default {
  methods: {
    openLink() {
      // Get the URL to open.
      const url = 'opendental://1/2/3/4';

      // Open the URL using ShellExecute().
      const shellExecute = require('electron').shell.openExternal;
      shellExecute(url, { activate: true });
    }
  }
};
</script>

Once you have created the custom component, you can add it to your Retool app like any other component. Then, you can click the button to open the link in your Windows app.

:grinning:

Patrick

1 Like
3

Awesome, @PatrickMast! Thanks so much for this detailed response.

Let us know how it goes @cjharlin

1 Like
4