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

SharePoint Master Page for iPhone HTML 5 Web App

iPhone Web AppIn my last post, I showed how to create an iPhone web app using HTML5. Recently I have been working on constructing a HTML5 SharePoint Master Page that also works as an iPhone web app.
I managed to do this by downloading Randy Drisgill’s Starter Master Pages Download Here
I then removed as many tags as possible without breaking the publishing Master Page. Changed the doc type, added the meta and link tags (see previous post). This allowed me to create a HTML5 compliant SharePoint Master page which also worked as an iPhone web app. Further customisation is needed to convert the TMG/ISA login form to a mobile friendly smart phone page if you are using an authenticated SharePoint 2010 site.

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile

BETT 2012 – Olympia, London

BETT show 2012 Olympia
I will again be attending the BETT 2012 show at Olympia, London on 11th-14th January 2012.

I will be demonstrating SharePoint customisation and integration into schools systems (SIMS, Exchange, Moodle, VLEs, etc..) on Stand H9 in the National Hall.

For more information please visit the following websites:

Corners in IE and Firefox for SharePoint MasterPages

You may find that the OOTB V4 master page has the Meta tag: <meta http-equiv=”X-UA-Compatible” content=”IE=8″/>. This renders the page in IE8 mode even when using IE9.

Web Designers may realise that this means CSS3 rounded corners are not available (http://www.css3.info/preview/rounded-border/). Unfortunately removing this tag breaks SharePoint’s ability to drag and drop web parts between web part zones and a few other quirky things.

Rounded corners in CSS3 use anti-aliasing to give a clean smooth effect. It also renders very fast. Using jQuery.corner.js sometimes slows the page down and causes a slight flicker, the rendering is not as sharp as the CSS3.

Rounded web part zone

To optimise the loading so that IE uses jQuery rounded corners and all other modern browsers use CSS3, I used the following code:

<!–[if IE]>

<script type=”text/javascript”>

jQuery(document).ready(function() {

jQuery(‘.right-wp-zone-core-1’).corner(“12px”);

});

</script>

<![endif]–>

<style type=”text/css”>

.right-wp-zone-core-1{

-moz-border-radius: 12px;

border-radius: 12px;

}

</style>

A bit disappointed with the rendering in IE9 but ensures that all browsers get the best experience possible.

The problem is not that CSS3 doesn’t work with IE 9 (it does very well!) but SharePoint 2010 does not work with IE9 (e.g. dragging web parts, people picker, etc…) so Microsoft force with default Master Page into IE8 mode using the meta tag.

Hopefully there is an update to IE9 soon (maybe automatic??) to fix SharePoint compatibility and then we can all happily use CSS rounded corners!!

SharePoint Designer 2010 opening MasterPages and ASPX files as text

I recently installed SharePoint Designer 2007 on my new Windows 7 64-bit laptop after installing SharePoint Designer 2010 on the same machine. When I tried to open a MasterPage or newitem.aspx list form, it would only open in SharePoint designer as text with all the options in the ribbon greyed out.

The reason for this is the ASPX, ASP, Master, etc were set to open as text in SharePoint Designer 2010. To change this, open SharePoint Designer 2010 and do the following:

  1. File –> Options
  2. Select the General tab
  3. Click “Application Options” next to “SharePoint Designer Application:”
  4. Select the “Configure Editors” tab
  5. Select ASPX ASCX ASHX….
  6. Make Sure that “SharePoint Designer (Open as HTML)”
  7. Click OK

Using XSLT, AJAX and jQuery to improve OOTB SharePoint Lists

Using XSL can completely change the way that any standard list view is displayed. There is a great video from Laura Rogers demonstrating what can be done with the XSLT List View in SharePoint Designer here.

XSLT
You can also build your own XSL sheets and use them in the style library by linking them in the web part properties.

Here is a standard web part view of a custom list:

Here is a standard web part view with custom XSL applied:

COM, jQuery and AJAX
Calling the SharePoint Client Object model with JavaScript, we can add items to the list without refreshing the page.
Inside the web part’s AJAX settings we can set the auto refresh so the list displays the new item (again without refreshing the page).
In this example, jQuery sets a fade-in animated gif to show the item being added to the list once send has been pressed. The fade-out effect is applied to the gif once success has been returned to the JavaScript function.
Building solutions like this can create complete customisable solutions using only custom lists in a modern integrated (no refresh) style.

Apply Custom Master Page to all Site Collections

I’ve just upgraded my MOSS 2007 site to SharePoint 2010. Oh No! The Master Page for 2007 doesn’t work in 2010 and I have 1500 Site Collections each with three websites!!

I need to activate my Master Page feature on each site collection and apply it to every site. Back in the old days, I would enumerate sites and create a huge script in excel to activate features and apply the Master Page. This is quite time consuming especially if you are upgrading different web applications every day. I thought it was time I tried to make this job easier and faster using PowerShell.

First start by looping though all the site collections in the web application then loop through the all the websites in the site collection (nested loop to get to every web in the web application). Then retrieve the URL of the web application and the URL of the site collection.
If the site is using a managed path for the site collections, it needs to be the relative path to the Master Page from the root of the web application.

e.g.

Web Application: http://www.tonyishere.co.uk
Site Collection: http://www.tonyishere.co.uk/sites/accounts
So the Master Page URL would be:  /sites/accounts/_catalogs/masterpages/custom.master

So how do we find the MasterPage URL path (as seen above) for each site collection? Using the length of the URL strings, the web application URL can be broken into a substring and appended to create the right path (see below).

e.g.
$len2 = $webname.length - 1
$len = $webappname.length
$len3 = $len2 - $len
$masterpath = $webUrl.substring($len,$len3)
$masterpath = $masterpath += "/_catalogs/masterpage/custom.master"

The new Master Page path then needs to be applied to the website.

$web.CustomMasterUrl = $masterpath

I found looping through 4500 websites in 1500 site collections took about 9 seconds, compared with the four hours that stsadm would of taken….big difference!!

Here is my full script to activate the feature on the site collection and loop into each website and apply the Master Page.


$webapp = Get-SPWebApplication https://www.tonyishere.co.uk
foreach ($s in $webapp.sites)
{
Enable-SPFeature MyCustomMasterPageFeature -Url $s.url
foreach ($web in $s.AllWebs)
{
$webUrl = $web.url
$web = Get-SPWeb $webUrl
$webappname = $webapp.url
$len2 = $webname.length - 1
$len = $webappname.length
$len3 = $len2 - $len
$masterpath = $webUrl.substring($len,$len3)
$masterpath = $masterpath += "/_catalogs/masterpage/custom.master"
$web.CustomMasterUrl = $masterpath
$web.MasterUrl = $masterpath
$web.Update()
}
}