SharePoint URL Shortener and Redirector web part

Overview

Demo

The web part behaves differently, depending on the URL of the SharePoint page that contains the web part. The URL of the page has the following scheme:
https://[TENANT].sharepoint.com/sites/[SITE]/SitePages/[PAGE].aspx
Example:
https://whizzyapps.sharepoint.com/sites/test/SitePages/test.aspx
In this case the web part apprears in the URL shortener mode.
If the URL has additionally an Id at the end, it appears in redirector mode. The URL with Id has the following scheme:
https://[TENANT].sharepoint.com/sites/[SITE]/SitePages/[PAGE].aspx?$id=[ID]
Example:
https://whizzyapps.sharepoint.com/sites/test/SitePages/test.aspx?$id=123abc

URL shortener mode

In URL shortener mode, you have two features: Shorten a new URL and find an existing URL in the database.

Feature 1: Shorten a URL

Feature 2: Find an existing URL

Redirector mode

In redirector mode, you have the third feature: The URL with an Id is the shortened URL, which will redirect to the original URL stored in the database.

Feature 3: Redirecting a shortened URL

Feature 1: Shorten a URL

The web part will shorten a URL of your choice. You enter the long URL and recieve the shortened URL, which is the URL of the web part page with an Id at the end.

To shorten a URL, you have to options:
1) You only need to enter the input URL and the web part will generate the Id for the output URL.
2) Besides the input URL, you can enter a specific Id to be used in the output URL.

Option 1: Shorten a URL with a generated Id

1. Enter a URL in the "Input URL" text box.

2. Click "Shorten and add to list".

3. Find the shortened URL in the "Output URL" text box.

Option 2: Shorten a URL with specific Id

1. Enter a URL in the "Input URL" text box.

2. Enter an Id in the text box "I have an Id".

3. Click "Shorten and add to list".

4. Find the shortened URL in the "Output URL" text box.

Feature 2: Find an existing URL

The second feature in URL shortener mode is to find an existing Id in the database.

1. Enter an Id in the "Input Id" text box.

2. Click "Find URL".

3. Find the shortened URL in the "Output URL" text box.

Feature 3: Redirecting a shortened URL

If you open the URL of the web part with an Id at the end, the web part will recognize the Id in the URL and start in redirector mode. It will search for the Id in the database and open the associated target URL automatically. This procedure is called redirecting a URL.

Open the URL of the web part with Id (=shortened URL)

The web part redirects to the target URL. Depending on the loading time of the sites, the web part will appear shortly as: