This function will shorten your URLs, making them easier to read. It does not require the use of a URL shortener such as Bitly.
In Knack apps, sometimes your URL can get quite long. For example, you might see a URL such as:
example.knack.com/app#home/orders/order-details/payments/invoice/1234567
Using this function you can shorten that URL to this:
example.knack.com/app#invoice/1234567
// This function shortens the URL to make it more readable.
function shortenURL() {
var hash = window.location.hash;
var hashScenes = Knack.hash_scenes;
var lastSlug = hashScenes[hashScenes.length-1].slug;
var hasKey = hashScenes[hashScenes.length-1].key; // when viewing a record, the format is "slug/key" instead of simply a slug.
var lastKey = hashScenes[hashScenes.length-1].key; // if key exists
var hasQueryString = hash.indexOf("?") > -1;
// we don't shorten hashes that are already short or have a query string
if (hashScenes.length == 1 || hasQueryString) {
return;
}
// if hash has more than 1 scene, replace it with the last slug OR slug/key (if key exists).
if (hashScenes.length > 1 && hasKey) {
let newHash = Knack.hash_token + lastSlug + '/' + lastKey;
window.history.replaceState(null, null, newHash);
} else if (hashScenes.length > 1 && !hasKey) {
let newHash = Knack.hash_token + lastSlug;
window.history.replaceState(null, null, newHash);
}
}
// Example usage:
$(document).on('knack-scene-render.any', function(event, scene) {
shortenURL();
});
Hope it helps someone!
Ian
Knack Pros
3 Likes
Hey @KnackPros - a very interesting solution for URL shortening. Thank you for sharing. 
1 Like
Very interesting solution, thanks for sharing.
So if I understand correctly, when the user navigates to example.knack.com/app#home/orders/order-details/payments/invoice/1234567, the URL in the browser bar will change to example.knack.com/app#invoice/1234567 so it looks nicer, correct?
But it’s not a real Knack URL - if the user, say, bookmarks or copies this URL, they won’t be able to use it, right?
I guess if it’s not a usable/copyable URL, I’m not sure I understand the value of shortening it in the browser bar.
Eric
Hi @EricAlderman!
It’s a real URL and can be bookmarked, copied, etc. Try it in one of your apps.
@KnackPros - I did. I can see that it can be useful in some cases, but the issue I see is that the original URL sometimes has important data that can’t be eliminated.
Your example of example.knack.com/app#home/orders/order-details/payments/invoice/1234567 doesn’t actually look complete. Usually in a long URL like this, each object would have its ID. So for example, Knack needs to know the context that this invoice is for a specific order, so after /order-details/ you would have the ID of that order. That way the sub-page has the context. With your replacement URL, that information is lost.
Eric
@EricAlderman
Can you share a link to the app? This function wasn’t intended to remove keys from the URL and if it does, we can add a condition to preserve the keys.
Here’s a video demonstrating your use-case (multiple keys) and it still works.
The original URL is order/123/invoice/abc. The updated URL is invoice/abc and it still works.
If you can reproduce the issue you’re describing in a live app, it’d be helpful.
That’s because in your application, both views are based on the same object (you can tell because the IDs are the same). In many cases, that won’t be true. For example, you go to a View Order Page, and it has a table of Payments on it. You view one of those connected Payments, and now you are in a view like /orders/{orderId}/payments/{paymentid}/.
@EricAlderman
Here’s another video demonstrating your use-case:
For example, you go to a View Order Page, and it has a table of Payments on it. You view one of those connected Payments, and now you are in a view like /orders/{orderId}/payments/{paymentid}/.
It’s working in the video. If you’re having any issues please let me know so they can be addressed, but so far the issue you described hasn’t been reproducible on my end. Thanks.
Cheers
Apologies, but I don’t understand. Which part goes of the code goes where in Knack? All in the API&Code Javascript section?
In the JavaScript section 
Thank you Carl.
I must be doing something wrong. The script is not working for me.
Hi Han,
Feel free to take a screenshot of your Javascript section containing the code, and send it to me in a private message if you’d like. Copy-pasting code from the forum can be tricky.
Thank you. Please see the enclosed screenshot.
