CHunky Universe of Vigourous Astonishing SHarepoint :)

jQuery mobile and SharePoint

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:

  1. Building SharePoint web apps using Sencha Touch by Luc Stakenborg
  2. 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>
<meta name="WebPartPageExpansion" content="full" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="" />
        <script src=""></script>
        <script src=""></script>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                    sp + $.mobile
            <div data-role="content">
                    Hello world
                    Sharepoint &amp; jQuery mobile
            <div data-theme="a" data-role="footer">
            //App custom javascript

Then your site in SharePoint designer, create a folder, call it “mobile”:

Put the app.html-file that you got from 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”:
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.

5 responses to “jQuery mobile and SharePoint

  1. azurati 2012-05-12 at 13:53

    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.

    • Anatoly Mironov 2012-05-13 at 16:21

      Thank you for the tip. The solution of your company looks nice, indeed.

    • torrancemiller 2013-01-22 at 22:01

      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?

  2. Sean Moran 2012-09-14 at 15:13

    Well, look at that. is gone, but everything you discussed is still very real. Good job, and thanks for your efforts!

    • torrancemiller 2013-01-22 at 22:40

      What do you mean is gone? It is here: 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:
      //yada yada yada…
      2. 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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders


Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant


SharePoint for everyone


Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint


Mostly what I know and share about...

%d bloggers like this: