CHUVASH.eu

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>
<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 &amp; 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, 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:

http://your-site/mobile

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

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

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 (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.

Advertisements

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. Azurati.com 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 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…
      });
      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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Discovering SharePoint

And going crazy doing it

Bram de Jager talking Office 365, SharePoint and Azure

My view and thoughts on Productivity and more.

My programming life

and everything in between

SharePoint Development Lab by @avishnyakov

It is a good place to share some SharePoint stories and development practices.

SharePoint Dragons

Nikander & Margriet on SharePoint

RealActivity - Real-time and trustworthy

Blog site of founder, RealActivty - Paul J. Swider

Mai Omar Desouki - Avid SharePointer

Egyptian & Vodafoner - Senior SharePoint Consultant

Cameron Dwyer | Office 365, SharePoint, Outlook, OnePlace Solutions

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

paul.tavares

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

SPJoel

SharePoint for everyone

SharePointRyan

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, ya mama

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

%d bloggers like this: