3D Tag cloud links from SharePoint List

3D Tag cloud Add-In can be used on the SharePoint home page to show important links with cool animation, links are retrieved from the Sharepoint list. so users can easily update or add links. In the below, you can see the step by step instructions to develop this SharePoint Add-In. Also, the complete project source code is available for download,

Souce Code Download link


3D cloud Tag

Create new Project in the Visual Studio using “App for SharePoint” template, here I’m using visual studio 2015 version. In the new project wizard select SharePoint-Hosted and rest you can select based on your requirements. The provider-hosted application can also be selected.

I have used jquery.svg3dtagcloud.min.js to implement this add-in and link data retrieved from SharePoint Links list, So in the SharePoint select “Add a new app” option and filter link, you can find the app called “Links” select that app and you can name whatever you want, I have named as 3DTags, so we don’t have to change anything on this list just directly start to add links on that list.

Links App

Links List

Also, we have to configure the permission on the AppManifest to access the SharePoint list with edit permission.

Add new “Client Web Part (Host Web)” and select “Create a new app web page for the client web part content” (If you want this add-in in the Home page then we have to use new ASPX file instead of default one because it uses SharePoint master page), Edit newly created an ASPX page which is located in the Pages folder and replace with HTML which you find in my project. Add below JS code in the app.js file.

'use strict';

ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");

function initializePage()
var context = SP.ClientContext.get_current();

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
var linkItems;
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getlinks() {
var website = context.get_site().get_rootWeb();
var linklist = website.get_lists().getByTitle("3DTags");
var camlQuery = new SP.CamlQuery();
linkItems = linklist.getItems(camlQuery);
context.executeQueryAsync(onGetLinkSuccess, onGetLinkFail);

// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetLinkSuccess() {
var entries = [];
var linkEnumerator = linkItems.getEnumerator();
while (linkEnumerator.moveNext()) {
var oListItem = linkEnumerator.get_current();
entries.push({ label: oListItem.get_item('URL').get_description(), url: oListItem.get_item('URL').get_url(), target: '_top' })
var settings = {
entries: entries,
width: 480,
height: 480,
//width: '100%',
//height: '100%',
radius: '65%',
radiusMin: 75,
bgDraw: true,
bgColor: '#fff',
opacityOver: 1.00,
opacityOut: 0.05,
opacitySpeed: 6,
fov: 800,
speed: 2,
fontFamily: 'Oswald, Arial, sans-serif',
fontSize: '15px',
fontColor: '#111',
fontWeight: 'normal',
fontStyle: 'normal',
fontStretch: 'normal',
fontToUpperCase: true

// This function is executed if the above call fails
function onGetLinkFail(sender, args) {
console.log('Failed to get links. Error:' + args.get_message());

Please feel free to let me know if you have any queries in the comment section, I’m happy to help you!!

Souce Code Download link



Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s