As an experiment, I decided to explore the use of jQuery mobile with SharePoint. My goal is to simply expose company news for as many mobile devices as possible in a single location. Like many organizations, our consulting firm delivers news internally via our intranet portal (based on SharePoint) and through public press releases available for anyone in the world.
Scenario
Our organization has grown and we have several new employees. There is a need to help these new employees find a central place to obtain news. We also have existing employees that have expressed a desire to know more about what other teams are doing, since we all like to celebrate the successes of our company. Much of this information has been centralized within our SharePoint portal, but this is not always a convenient place to view since many of our consultants are highly mobile and may only have a few minutes to review email and news between flights or meetings with clients. However, all of our consultants are making use of some type of smartphone, so if there were a way to present this information on those devices a quick update can happen almost anywhere. Even though our consultants use smartphones, we’ve found that our smartphone preference is as diverse as our skillsets, so developing a single native application for each platform (iOS, Android, Windows Phone, etc.) would just be too expensive.
Assumptions
It is assumed that your SharePoint environment is available outside any corporate firewalls and can be navigated directly from your mobile device. I am also assuming that you have an understanding of how to use the technologies described in this document and I have provided links at the end of this post to these tools where you can discover more information. I will provide brief description for jQuery mobile, but I refer you to their documentation for full details on how to use the framework.
Goals
The goals for this project are quite simple, to centralize news and provide it on as many devices as possible. We also want to reuse as much of our existing skill sets as possible – we have a lot of experience working with web technologies including HTML and SharePoint.
Technologies Available
The first step is to identify the available ways to retrieve our news feeds. SharePoint can provide our feeds via RSS or we can make use of the SPServices library by Marc Anderson to work with SharePoint’s web services.
The most difficult portion of the project will be retrieving external newsfeeds via RSS. This is because I will have to make cross-domain calls — something that is considered a security risk. For this, Google provides a way for us to use their Feed API and return our feed as JSON.
Finally to support mobile devices, we will make use of the jQuery Mobile plug-in. This plug-in is still in beta, but it looks very promising and supports a very large number of devices.
Solution
The final solution is made up of four HTML pages hosted in a SharePoint document library and a shared JavaScript file referenced on all of the pages.
default.htm
First, the entry point into the solution is default.htm and begins the end-user experience. Using HTML pages instead of ASPX pages allows full control of the markup produced by the solution. I did some initial experiments with data view web parts hosted on ASPX pages, but the data view web parts prefers to be wrapped in a form element. This would occasionally break the markup required for jQuery mobile. It also insured page-to-page navigation would require non-ajax navigation.
This page acts as a menu for each of the various news areas, allowing the employee the choice to review each section of content.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tribridge News</title>
<link rel="stylesheet" type="text/css" href="../../Scripts/jquerymobile/jquery.mobile-1.0b2.min.css">
<link rel="stylesheet" type="text/css" href="news.css">
<script type="text/javascript" src="https://www.google.com/jsapi?key=<PROVIDE YOUR GOOGLE API KEY>"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript" src="../../Scripts/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquerymobile/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" src="jquery.jgfeed-min.js"></script>
<script type="text/javascript" src="news.js"></script>
</head>
<body>
<div data-role="page" id="Main" class="tribridge-page">
<div data-role="header" class="tribridge-header">
<h1>News</h1>
</div>
<div data-role="content" class="tribridge-content">
<div class="page-logo">
</div>
<ul data-role="listview" data-inset="true" class="tribridge-listview" data-dividertheme="a">
<li data-role="list-divider">Internal News</li>
<li><a href="golive.htm">Go Live Announcements</a></li>
<li><a href="tribridgenews.htm">Tribridge News</a></li>
<li data-role="list-divider">Public News</li>
<li><a href="public.htm">Press Releases</a></li>
</ul>
</div>
<div data-role="footer" class="tribridge-footer"><h1>©2011 Tribridge</h1></div>
</div>
</body>
</html>
jQuery Mobile makes use of specific markup for a page. This is usually an external div tag with several internal div tags for headers, footer, content and navigational elements. According to the documentation, you can also use HTML 5 tags such as header, footer, etc.
jQuery Mobile also makes use of attributes to help the framework know what to do with each element. These attributes are outlined in the documentation for the framework, but they all begin with data-. The final markup of this page is very clean and remains very simple so the employee can very clearly see the available options.
news.js
Next, because jQuery mobile makes use of ajax for default navigation, any script located on a secondary page will not execute, however, jQuery mobile does handle this by providing a few new events. In a typical jQuery scenario, you will make use of $(document).ready(…) to initialize your functions. This will change in jQuery mobile to $(“#PageID”).live(“pagecreate”,function (event) {…}). Once you get used to this, you are pretty much dealing with jQuery syntax.
I have three pages where content will be dynamically retrieved and placed into the page, so I need to create three page creation events in the jQuery Mobile framework.
$("#GoLiveNews").live("pagecreate",function (event) {
loadGoLiveNews();
});
$("#PublicNews").live("pagecreate",function (event) {
loadPublicNews();
});
$("#TribridgeNews").live("pagecreate",function (event) {
loadTribridgeNews();
});
You can see here that I’m executing different functions depending upon which page is loaded. Each individual HTML page has a jQuery page with the cooresponding ID indicated in the jQuery selector.
Both loadGoLiveNews and loadPublicNews are making use of SPServices to retrieve the data from SharePoint. Because these pages are hosted in SharePoint, the employee is already authenticated so there are no issues with SPServices (as long as you are working within the same domain).
function loadGoLiveNews() {
$().SPServices({
operation: "GetListItems",
CAMLQuery: "<Query>...</Query>",
CAMLViewFields: "<ViewFields>...</ViewFields>",
listName: "Pages",
CAMLRowLimit: 10,
webURL: "https://...",
completefunc: function (xData, Status) {
if(Status == "success") {
$(xData.responseXML).find("[nodeName='z:row']").each(function () {
html = "<li><a href=\"#\"><h2>" + $(this).attr("ows_Title") + "</h2><p>" + $(this).attr("ows_...") + "</p></a></li>";
$("#NewsItems").append(html);
});
$("#NewsItems").listview("refresh")
}
}
});
}
There are a few things to notice concerning the SPServices call, mainly as it relates to jQuery mobile. Since I am attaching new items to an existing list view, I will have to refresh the list view after all of the new items are added, ($(“#NewsItems”).listview(“refresh”). This notifies the jQuery mobile framework to work its magic on the new html markup added to the DOM.
Remember, the public news poses a different issue because it is hosted on a site outside of SharePoint. Because of this, in order to retrieve the RSS feed, I would have to make a cross-domain call. This is frowned on heavily in JavaScript since it is considered a security risk. This is where I make use of Google’s Feed API.
In the default.htm page, there is a call to Google’s API:
<script type="text/javascript" src="https://www.google.com/jsapi?key=<PROVIDE YOUR GOOGLE API KEY>"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
This will insure the Feed API is ready to use when it is called by the page being loaded. The Feed API returns the RSS feed as JSON, so I can make use of this easily to generate my list of news.
function loadPublicNews() {
$.jGFeed("http://www.tribridge.com/News.rss.ashx",
function (feeds) {
if(!feeds){
alert("Unable to load news...");
}
for(var i=0; i<feeds.entries.length; i++){
var entry = feeds.entries[i];
html = "<li><a href=\"" + entry.link + "\" rel=\"external\"><h2>" + entry.title + "</h2><p>" + entry.author + "</p></a></li>";
$("#NewsItems").append(html);
}
$("#NewsItems").listview("refresh");
},50);
}
Notice that the HTML being generated in the function has the rel attribute set to external. This tells the jQuery Mobile Framework to break out of the AJAX navigation. Since I am sending the employees to the official site, there is no need to keep them in my mobile application.
golives.htm, tribridgenews.htm and publicnews.htm
Apart from unique ID’s for each jQuery Mobile Page, these pages are identical.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tribridge News</title>
<link rel="stylesheet" type="text/css" href="../../Scripts/jquerymobile/jquery.mobile-1.0b2.min.css">
<link rel="stylesheet" type="text/css" href="news.css">
<script type="text/javascript" src="https://www.google.com/jsapi?key=<YOUR GOOGLE API KEY>"></script>
<script type="text/javascript">
google.load("feeds", "1");
</script>
<script type="text/javascript" src="../../Scripts/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.SPServices-0.6.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquerymobile/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript" src="jquery.jgfeed-min.js"></script>
<script type="text/javascript" src="news.js"></script>
</head>
<body>
<div data-role="page" class="tribridge-page" id="PublicNews">
<div data-role="header" class="tribridge-header">
<a href="default.htm" data-role="button" data-inline="true" data-icon="back" data-theme="c" data-direction="reverse">Main</a>
<h1>Public News</h1>
</div>
<div class="tribridge-content" data-role="content">
<div class="page-logo"></div>
<ul data-role="listview" class="tribridge-listview" id="NewsItems" data-inset="true">
</ul>
</div>
<div class="tribridge-footer" data-role="footer">
<h1>©2011 Tribridge</h1>
</div>
</div>
</body>
</html>
Notice that this page also has all of the same script references as default.htm. This will insure that if this page is navigated to directly, it will still execute as expected. The final result appears as follows:
I hope this article was informative and helps you find business areas where you can leverage SharePoint data on mobile platforms. I am eagerly awaiting the non-beta release of this framework.
I don’t see jQuery Mobile being the best way to present your entire SharePoint environment to an employee, but this example should demonstrate there may business scenarios where a solution similar to this would be beneficial — perhaps things as simple as sharing team contacts to as complex as a issue logging system used by service technicians deployed to the field.
If you develop something using jQuery mobile and SharePoint, I would love to hear about it!
Pingback: jQuery mobile and SharePoint « Share… What?
We actually did this for a SharePoint custom mobile app. But I used jQuery touch instead of jquery mobile.
When I first explored jQuery Mobile, it was in beta. Now it is in version 1, so it has become a much more viable option.
Looking at jQuery Touch it appears to be focused on iPhone and Android (webkit based browsers). I would be interested to know if it downgrades gracefully for other mobile browsers that are not based on webkit.
We latter caned the frameworks in abid to get the site more crossbrowser. The spec later introduced devices like “Symbian” . If you are looking to have the feeds and DOM manipulation working perfectly and fast the best approach would be to use Frameworks a bit sparingly. Didnt use the jQuery feed plugin and went with the default Google feed approach and a hell lot of yahoopipes for the search functionality we implimented.
jQTouch is lightweight “bullet” fast actually lightnigh fast
. I love the syntax of jQTouch as compared to jQMobile although I know the whole “data-id” etc approach makes Javascript selectors run faster etc.
For symbian to behave we had to do less DOM manipulation and instead of your approach of iterating and inserting the elements in a loop I took the more optimised approach of building the string and inserting everything once into the page with document.innerHTML(). I only used jQuery for complex/tricky feed traversals and did everything the default plain JS way of document.getElementByTagName() etc. Its onbviously the faster approach when dealing with such low thinking devices.
The fully working site is now on http://m.citadel.co.za as you will see in the source there are quite allot of jQuery syntacticall approaches that were later commented out.
I’m trying to build a proof of concept based on your code, but unfortunately I can’t find any publicly accessible sp2010 web services. I can’t mess with our production code, and my test environment is sandboxed pretty hard. Just for demo purposes does anyone know of a service I could access?
You most likely wont find much luck with that approach (Cross Domain issues at most). The best approach is using a feed from a public facing site.
Very nice my IT would let me use the share point services script so I used share point designer to render out the list into a table then I loaded it into Jquery mobile. Here is a screen cast of what I mean. Its not ideal but it worked. http://www.screenr.com/cWBs
Pingback: Is the Legal Industry Ready for SharePoint?; Mobile Safety in the Cloud; Mango: Ripe or Rotten? - SharePoint Daily - Bamboo Nation
Pingback: SharePoint Daily » Blog Archive » Is the Legal Industry Ready for SharePoint?; Mobile Safety in the Cloud; Mango: Ripe or Rotten?
Nice work – thx for sharing!
Max
Thanks Max!
Love this.