dynamically-generate-urls.jpg

Dynamically Generate URLs with Classic Quick Links

Introduction

Quick Links are normally used to create Menu Tiles and Promoted Links. I created a post a couple of weeks back about this topic: here. In order to make these menu tiles clickable, as well as redirect you to the desired page, weblinks must be added in the Quick Links list under “Link Location.” See below.

But what if you want to make the URL to these menu tiles dynamic? I’m going to give you an example where we are going to dynamically generate URLs for the menu tile. The current URL parameter, Keyword (“k=”) will be added to the menu tile link via Javascript.

How to Generate a New Dynamic Link

First, edit your page and add a Script Editor for the Javascript code.

In the script editor, add the following code below.

The first section of the code is to get the url parameter: “GetUrlKeyValue” is a pre-defined method. “els” gets the menu tile element by its class name.

Pro Tip: This must run after everything else is loaded because if the Javascript code fires before the menu tiles load, this won’t work.

In summary, the bulk of the code is

  • Getting the value of “clickaction” which is responsible for where the link goes
  • Splitting the value into an array
  • Editing the array that contains the parameter with your desired value, and
  • Putting the array back together as a string value for click action

The entire code has been added to the end of the blog for you to be able to copy, paste & modify as needed.

If you plan on using this on IE11, you’d need a polyfill.

Complete Code Sample to Dynamically Generate URLs

<script>
var urlValue = GetUrlKeyValue('k');
var els = document.getElementsByClassName("ms-tileview-tile-content");

function runAfterEverythingElse(){
    Array.prototype.forEach.call(els, function(el) {
    var clickactiontext = el.childNodes[0].getAttribute('clickaction').toString()
    var fields = clickactiontext.split("'");
    if (urlValue){
        fields[1] = fields[1] + '&k=' + urlValue;
                if (fields[1].includes("Keyword")){
               fields[1] = fields[1].replace("Keyword","NewKeywordPage");
}
        clickactiontext = fields.join("'");
    el.childNodes[0].setAttribute('clickaction',clickactiontext);
    
    }
});
}

//Pollyfill that allows 'includes' to work in IE11
if (!String.prototype.includes) {
    String.prototype.includes = function() {
        'use strict';
        return String.prototype.indexOf.apply(this, arguments) !== -1;
    };
}
_spBodyOnLoadFunctionNames.push("runAfterEverythingElse");
</script>

 

Perry KankamDynamically Generate URLs with Classic Quick Links

Join the conversation

This site uses Akismet to reduce spam. Learn how your comment data is processed.