Karsten Held, Samuel Gross, 20.01.2022

Web part modes

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

Web part features

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:

Web part configuration

To configure the webpart, edit page, then edit web part. The web part “property pane” will blend in on the right.

About the web part

  • Version number
  • Build time stamp
  • Link for documentation

Note: You need to be site owner or site admin to be able to configure the web part, otherwise the options will be disabled.

Create new URL lookup list

The database used by the web part is a SharePoint list, that stores the Ids of the shortened URLs and the target URLs.

You can create such a list:

  • Enter the desired name.
  • Click “Create”.
  • A message will be displayed if it was successful.

When you deploy the web part the first time, you need to create a lookup list.

You can have multiple lists, for example if you want to deploy the web part on multiple pages on the site collection.

Select URL lookup list

In the dropdown menu will be displayed all user created lists from the site collection.

By clicking “Check list” it will be verified if the list contains the necesary columns with the names “Title”, “Key”, “TargetUrl” and if they are of the right type.

Set length of generated Id

If you use the feature of the web part of shortening a URL with the option to generate an Id, the generated Id will initially have the length of 5 digits. You can choose a length between 4 and 16 digits.