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
Building a URL with
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
type– whether or not the URL is an “external” URL. The only possible value for this is
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
A complete example that opens in any browser app the end user has installed would be is
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
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.