SharePoint My Site - My Links

My Links (Quick Links of an user) is available in My Site of the user from SharePoint Server 2007 and I believe “My Links” link was part of user profile menu at the top of the page in SP2007.

In SharePoint Online, I did not see an easy way to get to users' “My Links”. The easiest way to get to “My Links” of a user is through this URL,

https://tenantname-my.sharepoint.com/_layouts/15/MyQuickLinks.aspx

MyLinks1

We had a requirement for users to save their favorite links on our intranet home page. So we decided to use “My Links” to allow users to save their links. So, now how do we show these links on the intranet home page as the intranet site collection is different from “My Site” site collection.

One way was to use the “QuickLinks” web part which is available out-of-the-box in SharePoint, but it is available out-of-the-box only in the “My Site” site collection.

We found out that the web parts available in “My Site” can be downloaded and uploaded into other site collections and it will be available for us to use in that site collection.

To do this, we had to go to web part gallery of “My Site” site collection. The URL for that is – https://{tenantname}-my.sharepoint.com/_catalogs/wp/Forms/AllItems.aspx

MyLinks2

In My site web parts gallery, you can see many web parts available, but not all of them will work in other site collections. We are interested in quicklinks.dwp and it definitely works in site collections other than “My Site” site collection.

So, we downloaded this from web part gallery of my site and uploaded it into the web part gallery of the intranet site collection.

  MyLinks3

Once this is done, if you edit any page and add web part, you will see these web parts under “Default Web Parts” and as you can see we now have the “QuickLinks” web part available to add to the page. Once added, it will show the favourite links of the logged in user as shown below –

MyLinks4

This was good, but did not give the exact look and feel we wanted for our intranet. Also, we wanted to add a link for user to get to https://{tenantname}-my.sharepoint.com/_layouts/15/MyQuickLinks.aspx, so they can manage their favourite links by adding, deleting, editing etc.

So, we developed a custom component to get “My Links” of the user. Below is the code –

  1. function quickLinksViewModel() {  
  2.     var self = this;  
  3.     self.myQuickLinks = ko.observableArray();  
  4.     self.getMyQuickLinks = function(loginName) {  
  5.         $.ajax({  
  6.             url: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/UserProfileService.asmx/GetUserLinks",  
  7.             method: "POST",  
  8.             headers: {  
  9.                 "Accept""application/json; odata=verbose"  
  10.             },  
  11.             data: "{accountName:'" + loginName + "'}",  
  12.             contentType: "application/json; charset=utf-8",  
  13.             dataType: "json",  
  14.             success: function(data) {  
  15.                 self.myQuickLinks(data.d);  
  16.             },  
  17.             error: function(jqxr, errorCode, errorThrown) {  
  18.                 console.log(jqxr.responseText);  
  19.             }  
  20.         });  
  21.     };  
  22.     $.ajax({  
  23.         url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentUser",  
  24.         method: "GET",  
  25.         headers: {  
  26.             "Accept""application/json; odata=verbose"  
  27.         },  
  28.         success: function(data) {  
  29.             self.getMyQuickLinks(data.d.LoginName);  
  30.         },  
  31.         error: function(data) {  
  32.             alert(data.error);  
  33.         }  
  34.     });  
  35. }  
  36. $(document).ready(function() {  
  37.     ko.applyBindings(new quickLinksViewModel(), document.getElementById("divMyLinks"));  
  38. });  
  1. <div id="divMyLinks" class="panel panel-default">  
  2.     <!-- Todo: Generate table body -->  
  3.     <div class="panel-heading" style="color: #ac1a2f;"><span class="ms-Icon ms-Icon--link"></span> My Links</div>  
  4.     <div class="panel-body">  
  5.         <div data-bind="foreach: myQuickLinks"> <span class="ms-Icon ms-Icon--link" style="color: #ac1a2f;"></span> <a data-bind="attr:{href: Url}" target="_blank"><span data-bind="text: Name"></span></a></div> <span>This space shows your personal quick links. Use "Manage Links" to create your quick links. </span> <a target="_blank" class="btn btn-default" style="border-color:#ac1a2f;color:#ac1a2f" href="https://{tenantname}-my.sharepoint.com/_layouts/15/MyQuickLinks.aspx">Manage Links</a></div>  
  6. </div>  

If you see the code, we get the current user by using the REST API {sitecollectionurl]/_api/web/currentUser.

There are multiple ways to get user information in SharePoint Online, but not all of them give the user quick links (my links). We tried using REST API for User Information List which does not have quick links information. Then we tried using SP.UserProfiles.js to get all user properties from User Profile service and this gives the property “QuickLinks” and it is always empty.

So, the only working option was to use the old web service UserProfileService.asmx. If you check the URL {sitecollectionurl}/_vti_bin/UserProfileService.asmx in Chrome, this will show you all the available methods under this web service and what we need is “GetUserLinks”

MyLinks5

As you can see in the JavaScript code, the only parameter it needs is User Account name as input and the output is all links (Name, URL, Group) that user has saved as their favourites. The UI would look like –

MyLinks6

Now, users can save their favorite links in SharePoint My Site and see them and manage them from the Intranet home page. Hope this is useful for someone.