jQuery mobile and SharePoint
Anatoly Mironov
In this post I want to explore how to build a mobile app using jQuery mobile. Recently I discovered two great blog posts about this:
- Building SharePoint web apps using Sencha Touch by Luc Stakenborg
- jQuery mobile and SharePoint by Chris Quick
In my post I’ll use their findings and share some of mine thougts. I’ll focus mostly on how to get started with jQuery mobile and SharePoint. So go ahead and create your jQuery mobile app, just drag’n’drop some controls: 
Download it and yout get an “app.html” file and “my.css”. For now ignore my.css. app.html is something like that:
<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
sp + $.mobile
</h3>
</div>
<div data-role="content">
<h1>
Hello world
</h1>
<h4>
Sharepoint & jQuery mobile
</h4>
</div>
<div data-theme="a" data-role="footer">
<h3>
Footer
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
</html>
```Then your site in [SharePoint designer](http://sharepoint.microsoft.com/en-us/product/related-technologies/pages/sharepoint-designer.aspx), create a folder, call it "mobile": [](https://sharepointkunskap.files.wordpress.com/2012/05/mobile-001.png) Put the app.html-file that you got from jquery.mobile.com into the "mobile"-folder and rename it to "default.aspx": [](https://sharepointkunskap.files.wordpress.com/2012/05/mobile-002.png) So now it is ready! Open your web browser and go to your site:http://your-site/mobile
[](https://sharepointkunskap.files.wordpress.com/2012/05/mobile-0031.png) Or go to that page in your phone. But here you have to add **?mobile=0** to your url:http://your-site/mobile/?mobile=0
[](https://sharepointkunskap.files.wordpress.com/2012/05/mobile-004.png)
##### aspx vs html
Using html gives you more control about the markup than aspx. [Chris Quick](http://devspoint.wordpress.com/2011/08/26/jquery-mobile-and-sharepoint):
> 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.
But to be able to see the html pages directly in a browser rather than getting them as files, we must change the ["Browser File Handling"](http://sharepoint.stackexchange.com/questions/10900/how-can-i-force-sharepoint-2010-to-open-pdfs-in-the-browser):  knockout: http://stackoverflow.com/questions/6089727/how-to-architecture-a-webapp-using-jquery-mobile-and-knockoutjs
##### SPDocumentNavigator
Want to see some real example. Check out [SPDocumentNavigator](http://spdocumentnavigator.codeplex.com/) (by [Ben Tedder](http://www.bentedder.com/sp-document-navigator-installation/?utm_source=rss&utm_medium=rss&utm_campaign=sp-document-navigator-installation) on Codeplex).
##### Knockout and jQuery Mobile
Let's try the combination of knockout and jQuery Mobile. For this lab I used a very nice intro example by Thorsten Hans: [SharePoint Development using HeadJS KnockoutJS and SPServices](https://www.nothingbutsharepoint.com/sites/devwiki/articles/Pages/SharePoint-Development-Using-HeadJS-KnockoutJS-And-SPServices.aspx). I took it as is and put it into jQuery Mobile context: [](https://sharepointkunskap.files.wordpress.com/2012/05/mobile-010.png) For this example I just created a custom list, called MyContacts and added two additional columns: FirstName and WorkCity. [The source code can be found on github](https://github.com/mirontoli/sp-lend-id/tree/master/purneske "Pürneske, Thimble in Chuvash, a part of my sp-lend-id repository").comments from wordpress
Anatoly Mironov — 2012-05-00
Thank you for the tip. The solution of your company looks nice, indeed.
azurati — 2012-05-06
Hi Anatoly - nice post, but I fear that not all companies have the time or development skills that you possess. For those that are looking for an out-of-the box multi-platform mobile SharePoint solution, solutions like Azurati’s SharePoint2Go are a must. See аzurаti.соm for more information.
Sean Moran — 2012-09-05
Well, look at that. Azurati.com is gone, but everything you discussed is still very real. Good job, and thanks for your efforts!
torrancemiller — 2013-01-02
sure, that is useful for enterprise (employee-centric) needs, but what if you have a site based in SharePoint and you just want to have a mobile version of it? Is there a customizable product like SharePoint2Go from azurati that would deal with this requisite at a reasonable price?
torrancemiller — 2013-01-02
What do you mean Azurati.com is gone? It is here: http://www.azurati.com/ no? This post mostly confused me, are you trying to make a mobile site using jQuery mobile against the SPJSOM?? the title ‘jQuery Mobile and SharePoint’ is a bit misleading to me. Do you know where I can find some type of JSOM for SP 2010 documentation outside of the obvious MSDN and CodePlex stuff? I feel like this stuff is REALLY simple and most of the forums/blog posts are making it more difficult than it has to be… I have been staring at the knockout.js stuff for at least 20 minutes and can’t figure out how it is useful to us. I went with something like this:
$('#mobilePageDivID').live('pageinit', function () { //SharePointy stuff goes here });
so, something to handle querySuccess and queryFail: usually the query success does two things: 1. goes through whatever fields you need using listItemObjectName.get_item(‘fieldname’) and setting that to whatever you need to in the DOM. like:
$.mobile.loadPage('whatever.aspx'); // loads the mobile page into your DOM $('#mobilePageDivID').live('pageinit' , function () { //When the mobile page is initializing, fill it up with your SP content using jQuery: $('#ItemTitleID').html(listItemObjectName.get_item('Title')); $('#ItemDescriptionID').html(listItemObjectName.get_item('Description')); //yada yada yada... });
- then, after all of the content is modified in the querySuccess method/function you take the jQuery mobile page you loaded into the DOM and show it with:
$.mobile.changePage('whatever.aspx' , { transition : 'slide' , etCetera : 'whatever' });and queryFail just writes an alert() with the error message. Anyway, I’m scouring the internet for a better way to handle the page transitioning, for some reason, when I load up the page it changes before all of the content is loaded from SharePoint. And, I can’t find anyone who can help with that. As you can see above, I am first loading the mobile “sub-page” into my DOM, populating it with my SP query results (I guess you can use the SPServices if you feel like it, but it seems like a LOT of work to me) and THEN calling $.mobile.changePage(). Constantly, I’m seeing the page change and then the content loads, has this been happening to anyone? Or am I just crazy? Why don’t I understand the usefulness of the KNOCKOUT thing? Soo lost :( Thanks in Advance & sorry if I’m incoherently conveying my points/questions, the coffee shop slipped me some baileys that I was not expecting, -Torrance Miller