Tag Archives: Phillips

How to embed a Twitter widget on a SharePoint page

Many schools and businesses are using twitter as a social communication platform to send out news and information to users. How to embed twitter feeds on SharePoint intranets and public sites has been a popular question recently so thought I would share with you how it is done. I’ve also created a video guide on YouTube to talk through the process.

First login to your twitter account in a browser on a desktop computer (it doesn’t have to be the same account as the one that you want to display in your widget).

Click on your profile picture in the top right of the screen and select “Settings” from the drop down menu.

Twitter

Select “Widgets” from the left side menu.

Twitter

Create a new widget.

Twitter

Choose your design and configuration. More options are available via the customisation documentation link on the page. Click “Create Widget” to generate the code.

Twitter

Copy and paste the code into a Script Editor web part. The Script Editor web part can be found under the “Media and Content” category.

Twitter

I go through the process in more detail in the video below. Hope you find it useful. For SharePoint support and consultancy please contact me at Cloud Design Box.



How to render display template on a list view

This blog post is a bit more technical than my previous entries. Just recently, I was required to show two different views of a list on the same page (both styled with JS Display Templates). It’s relatively straight forward when you know how to quickly get the view GUID from the web part.

JS Display template only applying to one web part

You may have seen in other posts that you can get the GUID of a view by going to the edit view page and grabbing it from the URL encoded string. However this doesn’t always work for web parts added to the page as they tend to get thier own unique “current view”.

There is a really easy and quick way of finding this GUID using an alert in your JavaScript Display Template. When you are working with the current list object, in my example below “ctx”, you can get the view GUID from this object by calling “ctx.view”. Wrap that up in an alert and the alerts will render from top to bottom on the page and display each web part view GUID.

alert(ctx.view);

Once you have the GUID, use another if statement in your code to set the base view id. Now your JavaScript only applies to that one view for the list.

if (ctx.view === "{07BC665B-0274-42D2-97BF-8EBEA8B72436}") {
	//Override the BaseViewID if it's the one we want.
	ctx.BaseViewID = 722;                
}


Class site templates in SharePoint

As part of my work for Cloud Design Box, I have been working on class templates for student and teacher collaboration in SharePoint. My templates are using lots of display templates and are provisioned automatically from MIS data using the Salamander provisioning tools. Each template combines, out-of-the-box lists and libraries with custom content types, search web parts and JavaScript display templates. It’s available in both SharePoint on-premises and SharePoint Online. The video below goes through some of the features available for the class sites. Each class template is customised on a per school basis with a responsive design so that it will work on all devices.

For more information or an online demo, contact me by clicking here.



Creating a simple SharePoint Workflow to send an email

I have made the video below on how to create a basic SharePoint workflow to send emails. This could be used for sending out remittance advice (like in the example below) but it could also be used with additional workflow logic for sending out help desk emails, renewal reminders, etc.

Hope you find it useful, please feel free to contact me at Cloud Design Box if you have any further questions. I’ll try and make a full blog post on this subject with screenshots as soon as I get chance.



Adding a custom tile to the app launcher in Office 365



The Office 365 app launcher is a great way of getting easy access to single sign-on applications within Office 365 and externally. Recently Microsoft introduced some functionality to allow users to add thier own links to the app launcher. This is a great way of quickly getting to a particular link.

To add a new tile, you will need to create an image for the background of the tile. Ideally you want this to be a white image with a transparent background saved as a PNG. This keeps it in line with the app launcher style and the transparency shows the tile colour behind the background image. This should be a small and compressed image to keep the load time to a minimum.

The tile image is best hosted in a SharePoint picture library, make a note of the absolute link to the picture as you will require this when adding the custom tile.

In the Office 365 Admin interface, select the “Organisation Name (Edit)” link in the top right corner.

Organisation edit link

In the left menu, select “Custom tiles” and then click on the plus button to add a new link.

Add custom tile

Enter a name, url (where you want the tile to send users), description and Image Url (from the image stored in the SharePoint picture library).

Enter tile details

Press Save. The new tile will still not appear in the app launcher, however it is now available to add by clicking on “my apps” at the bottom of the app launcher.

my apps link

Select “Pin to app launcher” from the menu next to the new custom tile.

pin to app launcher

The new custom tile is now added to the app launcher.

Office 365 App Launcher

This is a great way to add a quick link to your SharePoint site collections without having to go throught the “Sites” page each time.

Please note that this method only adds the custom tile to the app launcher for the currently logged in user, not all users in the organisation. At the present time there isn’t an option to do this.

Using document templates in SharePoint (365 and on premise)

Document Library Templates

Each content type in a document library can be assigned an individual document templates. In the document library below, two different content types have been added, each with a different template.

Tony is here

To edit the word templates, open the site in SharePoint designer 2013.

SharePoint Designer

Open the document library.

SharePoint Designer

In the content types section, open the content type (in this case it is called Policy).

Content Types

In the ribbon select “Edit Document Template”.

Edit Template

This will allow you to create a dotx document which will be the template for this particular content type in this library. Once the template has been saved, it will be available as the main template for the content type.

Select Document

When users create a document using the Policy content type from the new menu, it will prompt them to enter a name for the new document.

Name Document

Please note that currently, the new templates will only open in Office Web Apps (online) if using Internet Explorer. Other browsers will prompt to open in the client application.

Office web Apps online

JavaScript Client Object Model in SharePoint 2013

SharePoint 2013 has a new and more complete JavaScript Client Object Model API. Some of the additional functionality is using social networking.

Using the JS COM, followers can be pulled from SharePoint for the current user or a specific user. This might be used for creating a new social networking interface

My Followers

First load JQuery and the SharePoint 2013 JavaScript functions. The JavaScript functions are loaded on the page so it is just a case of waiting for specific functions to be loaded before the script will work correctly (see below):

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
	SP.SOD.executeFunc('userprofile', 'SP.UserProfiles', function () {
		tonyishereGetUserProfileProperties();
	});
});

Once the functions are loaded, the People manager object can be created. The example below was taken from the Micrsoft site and modified, this is a great resource if you are starting out with the client object model.

http://msdn.microsoft.com/en-us/library/office/jj679673.aspx

function tonyishereGetUserProfileProperties() {
    // Get the current client context.
    var clientContext = SP.ClientContext.get_current();
    // Get the PeopleManager instance.
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
    // Get the people who are following the current user.
    Followers = peopleManager.getMyFollowers();
    clientContext.load(Followers);
    // Send the request to the server.
    clientContext.executeQueryAsync(displayFollowers, requestFailed)
}

Once the object has been loaded successfully, functions can be run to pull out the required data. In the example below, the data is stored in a string which is then displayed as HTML in a div using JQuery.

function displayFollowers() {
    var results = Followers.getEnumerator();
	var myFollowers = "Followers<br />";
    while (results.moveNext()) {
    var person = results.get_current();
		myFollowers = myFollowers + "<br />" + person.get_displayName();
    }
	jQuery("#MyFollowers").html(myFollowers);
}

The script was added to the page without the use of Visual Studio or SharePoint Designer 2013. The script was inserted using the Script Editor web part. This web part runs client side code such as HTML and JavaScript.

Script Editor

The same methods can be used to pull out a whole host of data from the social aspects of SharePoint 2013 including the profile picture, display name, hash tags and trending topics.

Profile web part

Troubleshooting Office Web App Farm Installations

New functionality in Microsoft Office Web Apps is the preview feature in search (see below). Setting up a separate farm for Office Web Apps is a great way to improve performance and make a scalable solution but it can bring up some new technical challenges. A couple of the most common issues are listed below.

Web Apps Search Preview

Do the internal and external URLs of the Web Apps Server resolve from the SharePoint server?

Test: https://webapps.contoso.com/hosting/discovery
Should return XML without certificate error

Test: https://WebAppServer01.contoso.com/hosting/discovery
Should return XML without certificate error

Certificate Error?

When setting up the web apps farm, a SAN certificate needs to be specified with both the internal URL and the external URL (see below). Wildcard or single host certificates will not work.

SAN Certificate
404 not found?

Both the SharePoint and Web App server need to see each other. Make sure that internal DNS is setup for the external web app address. Run ipconfig /flushdns on the SharePoint server. The SharePoint server needs to resolve both addresses internally.

The Web Apps server also needs to have an entry for the SharePoint site URL. Ensure that the SharePoint site has an internal DNS entry and flush the DNS on the web apps server. Browse to the SharePoint site on the web apps server to ensure that it can see the site without any certificate errors.

Client-side RSS feed viewer using JavaScript

There are plenty of server-side RSS feed viewers out there but very little in the case of client-side JavaScript based viewers. Below I will go through the steps of creating a simple JavaScript based RSS feed viewer. Please note that this will only work with RSS feeds on the same domain. JavaScript does not allow cross domain scripting. You may find ways round this by using some of the Google API.

RSS Viewer
Create HTML Container

First begin by creating a HTML div container with a unique ID.

<div id="myDiv"></div>

Make a XML HTTP Request

The following function returns the data from an RSS (XML) page. As far as I am aware there is no way to use this cross domain, so you will have to look for a server-side script to work cross domains.

function httpGet(theUrl) {
			var xmlHttp = null;
			xmlHttp = new XMLHttpRequest();
			xmlHttp.open("GET", theUrl, false);
			xmlHttp.send();
			return xmlHttp.responseXML;
		}
var rssFeedData = httpGet('http://www.tonyishere.co.uk/RSSExample/rss.xml');

Loop through the data and retrieve tags by name

Once this data has been stored in the variable as an object, we can use the “getElementsByTagName” function to pull out a particular tag (title in this case). Looping through all the tags called “title” will go through all of the XML from top to bottom. While looping through the tags, we can store the title and description in arrays to use later.

			var i=0;
			var allTitles = [];
		var allDescriptions = [];
			// loop through all of the items and put them in arrays
			while (rssFeedData.getElementsByTagName("title")[i])
			{
					allTitles[i] = rssFeedData.getElementsByTagName("title")[i];
					allDescriptions[i] = rssFeedData.getElementsByTagName("description")[i];
					flag=i;
					i=i+1;
			}

Loop through the arrays and render the data

Looking at the structure of the XML, you should be able to pick out the child nodes. In this case, each item is the first node (numbering starts from 0).

This can then be rendered as HTML and inserted into the div created earlier. In the example below I have decided to store the description and call an onclick function to show the description.

for (i=0;i<flag;i++){
				titles[i]=allTitles[i].childNodes[0].nodeValue;
				descriptions[i]=allDescriptions[i].childNodes[0].nodeValue;
				document.getElementById('myDiv').innerHTML = newHTML;
				newHTML = document.getElementById('myDiv').innerHTML;
				newHTML = newHTML + "<div class=\"titlearea\" id=\"title" + i + "\" onclick=\"showdesc('" + i + "');\">" + titles[i] +"</div><div id=\"desc" + i + "\"></div>";
				document.getElementById('myDiv').innerHTML = newHTML;
			}

Show the description

When the onclick function to display the description is run, the function below inserts the description stored in the array into the desc div. The array position was called as an argument to the function. This enables us to display the correct description in the div.

function showdesc(idc){
			var idcdesc = "desc" + idc;
			document.getElementById(idcdesc).innerHTML = descriptions[(idc-1)];
		}

Starting point for RSS feed viewer

Click on the link below to see the full code working. This is a very simple example of what can be done with RSS feeds using client-side scripting only. Hope this is of interest, please contact me on twitter for feedback and questions.

RSS Viewer Example