Tag Archives: JavaScript

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

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

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!!