Category Archives: HTML and JavaScript

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;                
}


List subsites using the JavaScript client object model in SharePoint 2013

SharePoint Office 365 Site Creation JavaScript

To do this, use the script editor web part or the page viewer web part (and put the HTML file in a document library).

To start off, setup the HTML to include jQuery and sp.js (see below).

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
 //alert('loaded');
});

JQuery functions are used to populate HTML containers on the page.

<div id="tonycontent">
	<!-- Dashboard -->
	<div id="tonydashboard" class="tonycontenttable">
	</div>
</div>

The first function loads the current site. The get_current function returns the current context of the user from which the subsites can be retrieved (see below).

function getSubWebs(){
	clientContext = new SP.ClientContext.get_current();
	web = clientContext.get_web();
    	webCollection = web.getSubwebsForCurrentUser(null);
    	clientContext.load(webCollection);
    	clientContext.executeQueryAsync(onGetSubwebsSuccess, onGetSubwebsFail);
}

If the query is successful it will load the onGetSubwebsSuccess function, otherwise it will run onGetSubwebsFail function.

In the success function, the webCollection variable is looped through to retrieve the URL and the title of each subsite. JQuery functions are then used to append the HTML containers.

function onGetSubwebsSuccess(sender, args){
	jQuery("#tonydashboard").empty();
	var html4 ="<div class='tonycontenttablerow'><div class='tonycontenttabletitle'>Site Name</div><div class='tonycontenttabletitle'>Site URL</div></div>";
	jQuery("#tonydashboard").append(html4);
    var webEnumerator = webCollection.getEnumerator();	
    while (webEnumerator.moveNext()){
        var web = webEnumerator.get_current();
		var webtitle = web.get_title();
		var weburl = web.get_serverRelativeUrl();
        var html3="<div class='tonycontenttablerow'><div class='tonycontenttablecolumn'>" + webtitle + "</div><div class='tonycontenttablecolumn'>" + weburl + "</div></div>";
		jQuery("#tonydashboard").append(html3);
    }
}

Download the full code here

The client object model can also be used to create subsites from templates, permission sites, create lists and much more! This method works on both 365 SharePoint Online and SharePoint 2010 and SharePoint 2013 on-premises.

SharePoint 2013 JavaScript Client Object Model

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

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

Fixing SharePoint 2010 dynamic menus on the iPad

When using an iPad with the default v4 Master Page in SharePoint 2010, the dynamic drop down menus do not function as expected. When using a mouse, a simple hover over the menu item will drop down the dynamic menu child items (as shown below).

SharePoint 2010 menu on ipad

When using an iPad, iPhone and most other smart phone/tablets device, there is no mouse and no hover over action. When clicking on the parent menu item, the user is taken to that link instead of showing the child items.

To solve this issue (partially), I created some jQuery code to allow the first tap to drop down the menu items and the second tap to take the user to the chosen page.

First I use the jQuery ready function to load my script when the page has fully loaded.

jQuery(document).ready(function() {
});

When the page has finished loading, the type of device needs to be detected. In the example below I have used the iPhone, iPad and iPod devices. There are alternative devices!

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
}

This solution involves using a counter to detect the first tap of a dynamic menu item as a hover over and the second tap as the actual click. First, set the counter to 0.

var countipad=0;

Another handy jQuery function is used to detect when a dynamic menu item is clicked. Using this class “dynamic-children” ensures that only the first click of a drop down menu is cancelled.

jQuery("a.dynamic-children").click(function() {
}

If the click is the first click, the default action (redirect) is prevented. The counter is then incremented ready for the next click.

if(countipad==0){
	event.preventDefault();
	countipad=countipad+1;
}

The full solution is as follows:

jQuery(document).ready(function() {
	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
		var countipad=0;
 		jQuery("a.dynamic-children").click(function() {
			if(countipad==0){
				event.preventDefault();
				countipad=countipad+1;
			}
		});
	}
});

This isn’t a great solution as the second click will always take you to the link. A better solution would detect which link is selected and only redirect on the second click of that particular menu item.

ipad menu SharePoint 2010

SharePoint 2013 Preview

SharePoint 2013 Preview

SharePoint 2013 Preview version was released this week. I took the chance to install it and get a first look at the new version of Microsoft’s powerful integration content management software.

Resources:
Install files can be found here
http://www.microsoft.com/en-us/download/details.aspx?id=30345
SharePoint 15 Training files
http://technet.microsoft.com/en-US/sharepoint/fp123606

SharePoint 2013 Preview Home
Install notes:

The install is very similar to SharePoint 2010. Hardware requirements seem to be exactly the same as the previous version. The only additional work I had to do was upgrade SQL Server 2008 R2 to service pack 1.

Office Web Apps:

Office web apps are no longer a service application within SharePoint. In fact they are now set up as a completely separate farm from SharePoint. This is because other products/services can integrate with this farm such as exchange. This also allows web app system usage and load to be completely independent from the SharePoint farm.

Mobile View:

The new version of SharePoint will have device detection to redirect to a mobile site. Also capable of mobile push notifications.

Sharing:

When a site is created, the site owner is encouraged to share the site using the share button at the top of the page. This seems to be more of a rewording/rearrangement of the site permissions page.

Apps:

Lists and Libraries have been renamed Apps. You can download additional Apps from the SharePoint Store (very original).

Apps
Ribbon:

The ribbon has been restyled slightly but the biggest improvement is in the performance of the ribbon appearing when editing the page. Waiting for the ribbon to load a tab in SharePoint 2010 no longer happens in SharePoint 2013, the ribbon slides out instantly and smoothly.

Ribbon

Of course there is far more to SharePoint 2013 than just this. I will post back when I have dug a little deeper.

Theming

Setting the XSL Link in web part properties using PowerShell

webpartpropertiesTo change the XSL link value in the web part properties of a web part, it usually requires editing the page and entering the path to the XSL file in the web part properties (see image on right).

This can be automated using PowerShell. In the example below, the PowerShell loops through each web part on the page and sets the XSL Link value to “_layouts/xsl/tony.xsl”.

$spweb = Get-SPWeb “http://www.site.com”;
$url = $spweb.Url;
$WebPageUrl = “/Pages/test.aspx”
$spWpManager = $spweb.GetLimitedWebPartManager($WebPageUrl, [System.Web.UI.WebControls.WebParts
.PersonalizationScope]::Shared);
foreach($spwebpart in $spWpManager.Webparts)
{
$spwebpart.xsllink=”_layouts/xsl/tony.xsl”; #set the web part property
$spWpManager.SaveChanges($spwebpart);
}

The custom XSL style sheet in my previous post can be added to a large amount of lists that already exist by modifying this code and looping through all the sites/site collections. The code can also be modified to select web parts based on their title rather than changing the setting on every web part on the page.

Styling SharePoint 2010 Lists using XSL

XSL (EXtensible Stylesheet Language) styles the XML output of SharePoint 2010 lists. It allows easy customisation without any server side code.

For example, this is a standard Tasks Web Part.

SharePoint 2010 Task List

After having an XSL stylesheet applied, it transforms the way the list is rendered (see below).

XSL Task List

In the example below, the template is called for each item depending what the “Status” field contains.

<xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>

If the status is “In Progress”, “Not Started” or “Waiting on someone else”, the template named “row” is called. Each item is sorted by the Creation date.

In the row template, the image src attribute (location of traffic light colour image) is selected using an if statement on the status field. For each status a different image is displayed.

<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>

The complete code below with some CSS applied generates the customised Tasks list view.


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" >
  <xsl:output method="xml" indent="yes"/>
  <xsl:template match="/">
    <div style="padding: 5px 8px 5px 5px; display:block;">
      <span class="tasksGroups">My Current Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>
    <div style="padding: 0px 8px 0px 0px; display:block;">
     <span class="tasksGroups"> My Completed Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'Deferred') or contains(@Status, 'Completed')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>


  </xsl:template>
  <xsl:template name="row" match="dsQueryResponse/Rows/Row">
	<div class="TaskBox">
		<div id="infoleft">
			<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>
			<xsl:value-of select="@Status" />
		</div>
		<div id="infomiddle">
			<span id="core-tasks-title"><xsl:value-of select="@Title" /></span><br />
			<span id="core-tasks-body"><xsl:value-of select="@Body" disable-output-escaping="yes"/></span><br />
		</div>
		<div id="inforight"><xsl:value-of select="@PercentComplete" />
		</div>
		<br style="clear:both" />
	</div>
  </xsl:template>
</xsl:stylesheet>

Using XSL and CSS provides a large opportunity to customise SharePoint frontend design of lists without any custom solutions or server side code. This technology will become more important as users move to hosted SharePoint solutions like Office 365 with limited access to server side customisation. It also allows for easier upgrades to future versions of SharePoint.

Supporting iPad in a HTML5 Web App

In a previous post I wrote about creating a HTML5 site which also worked as an iPhone Web App. If the web app needs to also support iPad integration, there are a few more lines needed in the HTML as well as a couple more loading images.
The following code needs to go in the head section of the HTML:

<!--iPad and iPhone startup app screens -->
<!-- iPhone startup image -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup.png"/>
<!-- iPad startup image portrait view -->
<link rel="apple-touch-startup-image" href="https://siteURL/Images/startup_ipad.png" media="no mobile, screen and (device-width: 768px) and (orientation:portrait)"/>
<!-- iPad startup image landscape view -->
<link rel="apple-touch-startup-image" href="https:/siteURL/Images/startup_ipad_hor.png" media="no mobile, screen and (device-width: 768px) and (orientation:landscape)"/>

The code above specifies different startup images for different devices. The iPad can load web apps either when placed horizontally or vertically. This means it requires two loading images.
Startup png images for iPad should have the following dimensions:
Default Portrait png should be 768w x 1004h
Default Landscape png should be 1024w x 748h