Short URL (alternative)

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:

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 :+1:

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.

Thank you @KnackPros for jumping on a call and solving the issue with the conflicting code that I had in there. Thank you also for the additional tips. Very useful indeed!

:star: :star: :star: :star: :star:

1 Like