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:
<meta name="WebPartPageExpansion" content="full" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
sp + $.mobile
Sharepoint & jQuery mobile
<div data-theme="a" data-role="footer">
Then your site in SharePoint designer, create a folder, call it “mobile”:
Put the app.html-file that you got from jquery.mobile.com into the “mobile”-folder and rename it to “default.aspx”:
So now it is ready!
Open your web browser and go to your site:
Or go to that page in your phone. But here you have to add ?mobile=0 to your url:
aspx vs html
Using html gives you more control about the markup than aspx. Chris Quick:
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”:
Want to see some real example. Check out SPDocumentNavigator (by Ben Tedder 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. I took it as is and put it into jQuery Mobile context:
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.