Links, External Links, the AEK and Live Tiles

One of the most common use cases in building responsive content is linking to a different part of the app, or linking out to a different site entirely. I covered this back in 2019, with a focus on external links, and nearly three years on it’s still one of the most popular topics to receive questions on.

How It Works

The main thing about links from the AEK (or from the TileSDK) is that they need to be supported not just from the web app, but also the native apps. The native iOS and Android apps are more strict, so we developed a unified URL scheme that works across all three platforms. We use a custom protocol – campusm:// – that enables a range of behaviour throughout the campusM app. The one we’ll be referencing here is openURL.

Building a URL with openURL

The base scheme is campusm://openURL . It accepts up to two query parameters:

• url – the URL to navigate to. This needs to be URL encoded, and ideally should also be HTTPS. We can’t guarantee that HTTP-only links work well in the native webview, though they may work better in an external browser. You can either encode a URL manually with a site like this one, or programatically with encodeURIComponent .
• type – whether or not the URL is an “external” URL. The only possible value for this is external, e.g. type=external. External URLs are opened in any browser app the end user has installed – if you have multiple, you will be prompted to choose by your phone’s operating system. This option has no impact on the web app, where all URLs are opened in a new tab / window regardless.

So a complete example that opens in the campusM app’s own webview would be campusm://openURL?url=https%3A%2F%2Fwww.google.com .

A complete example that opens in any browser app the end user has installed would be is campusm://openURL?url=https%3A%2F%2Fwww.google.com&type=external .

A common mistake is to URL encode everything after openURL. You only need to encode the url value – nothing else. The entire example is then treated as a URL in its own right, and can be passed to any AEK or TileSDK component that receives one as a prop.

Using a URL in aek-lib

There are a number of AEK components that can set an href, or use an onClick event to open a URL. For example, the ListviewItem has both an href prop and an onClick prop. I recommend using the href prop wherever possible, as you simply just pass the URL into it and the AEK will handle the rest.

If you need some specialised behaviour, or the component only supports the onClick prop, you’ll need to implement the opening of the URL yourself, usually with window.open() .

Using a URL in the TileSDK

Any component that supports the onClick prop can make use of a URL, for example the Block component. You simply pass the URL as you would set any other attribute.

Other schemes we support can be found on this Knowledgebase page.