Sencha Inc. | HTML5 Apps

Blog

Building SharePoint Web Apps using Sencha Touch

April 10, 2012 | Luc Stakenborg

Guest Blog Post: Luc Stakenborg of Oxida


Building SharePoint Web Apps using Sencha Touch In this post we will explore how to build a SharePoint mobile web app using Sencha Touch, a great mobile JavaScript framework for building HTML5 apps. SharePoint 2010 is a very comprehensive platform, but mobile support is fairly limited. Although it is technically possible to customize the mobile user interface on the server side, this is not allowed in cloud-based SharePoint (e.g. in Office365).

An alternative approach is to build a web app where the UI is generated in the browser and connects to one of the SharePoint APIs to access data stored in SharePoint. SharePoint 2010 offers three data APIs which can be used in web apps:

  • SP Web Services (SOAP)
  • REST (ListData.svc)
  • CSOM (Client Side Object Model)

Although each of the APIs offer a distinct set of capabilities, the REST interface is simple and lightweight and I prefer this for mobile use. The SharePoint REST interface offers full CRUD access to items in SharePoint lists and libraries, which might be all that you need for your mobile web app.

Getting Started

Because of the Same Origin Policy, your html file must be served from the same domain as the SharePoint site you want to access. You can place your html file containing your app on the server file system or in a SharePoint document library (e.g. site assets).

If you are using SharePoint Online (Office365), you will notice that when you select a .html file in a doc library, it is presented as a download, not opened in the browser. This is due to SharePoint settings which you are not allowed to change in SharePoint Online. As a workaround, simply use an .aspx file extension, instead of .html. This way, you can start your single page SharePoint application from a file in an asset library.

So, to get going, you need to create an app.aspx file to include all the CSS and JavaScript for your Sencha Touch app.

<!DOCTYPE html>
<html>
    <head>
    <title>SharePoint web app example</title>
       <link rel="stylesheet" href="sencha-touch.css" type="text/css" />
       <link rel="stylesheet" href="app.css" type="text/css" />
       <script src="sencha-touch.js"></script>
       <script src="app.js"></script>
    </head>
    <body>
    </body>
</html>

The app.js file contains the basic Sencha Touch start-up and shows an alert:

new Ext.Application({
  launch: function () {
    Ext.Msg.alert('Hello world', 'Ready for action!')
  }
});

You can put these files in any SP doc library. Let’s assume you have put this file in the Site Assets library of a SP site called demo:

image

Now you can open up the following url on your iPhone or Android device:

http://[[SPserver]]/demo/siteassets/app.aspx

After logon, you will see the following result:

IMG_0724

Not quite what we expected… SharePoint has detected that we accessed the page with a mobile device and responds with the default mobile UI. You can suppress the default mobile UI by appending ?mobile=0 to the url.

So, let’s try: http://[[SPserver]]/demo/siteassets/app.aspx?mobile=0

IMG_0725

Yes! We now have a Sencha Touch web app running off a SharePoint server.

OData proxy

The next step is to connect Sencha Touch models and stores to SharePoint items and lists through the REST interface using the OData protocol. For this, you will need an OData proxy. I developed an OData proxy as an Ext user extension. It is designed to access SharePoint data using the SharePoint ListData.svc REST service which is based on OData. You may use it for other OData sources.

You can find the OData SharePoint proxy for Sencha Touch on GitHub.

Ext.ux.ODataProxy features:

  • create, read, update and delete SharePoint items as Sencha Touch models
  • fetch multiple items from a SharePoint list in a Sencha Touch store
  • JSON payloads
  • partial updates: only changed attributes are sent to the server during an update
  • fixes issues in Sencha Touch data Model implementation (e.g. missing destroy() method)

Let’s look at some examples of how you can use the SharePoint proxy. In these examples, we will assume you have a subsite ‘/teamsite’ in which you have created a Contacts list based on the standard Contacts list template.

First, we need to define the Model.

var Contact = Ext.regModel('Contact', {
  fields: [
      // please note CamelCase convention for SharePoint column names
      { name: 'Id', type: 'int' },
      'LastName',
      'FirstName'
    ],
 
  idProperty: 'Id',
 
  proxy: {
    // use the special odata proxy defined in odataproxy.js
    type: 'odata',
 
    // the proxy will connect to the List
    // named 'Contacts' in the /teamsite subsite
    url: '/teamsite/_vti_bin/ListData.svc/Contacts'
  }
});

We can now use the following CRUD operations on the Contact data model:

 // Create an instance
 var contact = new Contact({ LastName: 'Johnson', FirstName: 'Al' })
 contact.save();
 …
 
 // Read an instance from the server by id
 var id = 200;
 Contact.load(id);
 …
 
 // Update an instance, loaded from the server
 Contact.load(id, {
     success: function (contact) {
         contact.set("LastName", "Maxwell");
         contact.save();
     }
 });
 …
 
 // Delete an instance
 Contact.load(id, {
     success: function (contact) {
         contact.destroy()
     }
 });

Using the Contact model, you can now easily define a Store to fetch multiple items:

var store = new Ext.data.Store({
    model: 'Contact'
});
store.load()

Build Your Application

Using the odata proxy to configure your Models and Stores that connect to the SharePoint server, you can develop your app further just like any other Sencha Touch app. Check out the tutorials on Sencha.com for more info.

I will conclude with an example of a contact list through the normal SharePoint UI and through a Sencha Touch app:

image

image

Just as easily, you can expose the content of document libraries:

image

image

Live Demo

A live demo is available at http://oxida.sharepoint.com/demo. You can open the mobile web app and also explore the content of the SharePoint site with a desktop browser.

image

Sencha Touch and SharePoint are a great combination and open up exciting new opportunities for companies using SharePoint. Give it a try!

There are 32 responses. Add yours.

Robert Fauver

3 years ago

I love this and I am so excited to implement. I just have to wait for an upgrade to 2012. :(

Robert Fauver

3 years ago

*2010

Luc Stakenborg

3 years ago

@Robert,

Glad you like it!

I have also made available a SharePoint proxy based on the SharePoint Web Services. You can use this in combination with SP 2007. So the wait is over! You can find the code for the Soap proxy on the github repository mentioned in the article: https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch

Robert Fauver

3 years ago

Sweet! Thanks a bunch Luc!

Javier Barron

3 years ago

This is great. I cant wait to try this… I am currently running 2007. Is there an instructional on 2007 like the one above for 2010.. Or does it all implement the same?

Luc Stakenborg

3 years ago

Hi Javier,

Please visit https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch . It contains instruction on using SharePoint Web Services (SOAP) proxy which you can use on SharePoint 2007. It works very similar to the OData proxy. Let me know if you need further help.

Javier

3 years ago

Thanks Luc… You have been great help and I look forward to trying this out at the new company I am moving to

Diego García

3 years ago

Hi! I’m working right now with Sencha Touch + WCF and some other Microsoft stuff. Watch this running over a SP server is exciting! Very good info.

Ryan Mills

3 years ago

Any thoughts/examples on integrating SharePoint with ExtJS 4.1?

Luc Stakenborg

3 years ago

Hi Ryan, should certainly be possible. If there is enough interest, I will make available a (hopefully combined) ST2/Ext4 - SharePoint proxy. Do you need SP2007 support?

Nicholas Stein

3 years ago

What is the username and password for the demo app?

Luc Stakenborg

3 years ago

@Nicolas: no username/password are required. Where are you prompted for username/password?

Luc Stakenborg

3 years ago

@Ryan Mills: certainly possible. All you need is a ‘proxy’, that connects Ext Models and Stores to SharePoint Lists and Items. If there is enough interest, I will make an ExtJs4/ST2 version available.

Ryan Mills

3 years ago

@Luc Stakenborg: That sounds great. Just SP2010. Let me know if you need any development help or testing. Checkout http://spservices.codeplex.com/ for inspiration! Cheers.

Nicholas Stein

3 years ago

@Luc when I put the url at the oxida site linked in the article with IE9 it works.  When I do it on my Verizon Droid Charge, it redirects to the https for microsoft online login screen.  I cannot repeat it here because the blog comments are afraid of spam.  Send me your email and I can give you better details.

BC

3 years ago

I get redirected to login screen too.

Luke

3 years ago

Looks exciting, gotta watch the demos…

Luc Stakenborg

3 years ago

@Nicolas and @BC: the commenting system of this blog refused my responses, so apologies for being late.

The demo link above leads to a landing page in the SharePoint site where you can explore the data with a desktop browser using the normal SharePoint interface. It also includes the link and QR code to start up the mobile app build with Sencha Touch.

If you visit the landing page with a mobile device, unfortunately the default SharePoint mobile UI kicks in and asks for authentication.

To visit the landing page with a mobile device, try appending ?mobile=0 to the url. above.

I hope this helps. If you still have trouble accessing the demo, you can contact me at l dot stakenborg at oxida dot com for further help.

Thanks!

Gustavo

3 years ago

Hi Luc,

Thank you for your post. I’m getting a blank page when I go to my Office 365 URL app.aspx page.  I have uploaded the four files (app.aspx, app.js, sencha-touch.js, sencha-touch.css) and I’m using secha-touch-2.0.0commercial version.

Do I need to be using a different version? or change settings in Office 365?

I also tried it on two other non-cloud SharePoint installations, but I got a javascript error on the 1st line of app.js, so I’m going to assume that the example only works on cloud SharePoint sites. Is that a safe assumption?

Thanks again!

Luc Stakenborg

3 years ago

@Gustavo: the sample was written using Sench Touch 1.1. Sencha Touch 2 is a liitle bit different in how to initialize an application. ST2 uses Ext.application instead of new Ext.Application (ST1.1). Check out the getting started guide of the Sencha Touch 2 doc and use that as a reference.

Once you have it working with ST2, it doesn’t matter if you use SharePoint Online or a private SharePoint installation: once the browser is authenticated, you’ll be able to fetch aspx, js and other files and access the data lists.

Gustavo

3 years ago

Well that was easy! 

Luc, Thanks for your quick reply.

William Vaughan

3 years ago

Hey that was really needful. Thanks for sharing. I’ll surely be looking for more.

Mehul Kanani

3 years ago

Really Awesome coding and information !!

Aswin

3 years ago

You are a rockstar!! Thanks a lot!!

Nov

3 years ago

Awesome!

John Tallon

3 years ago

Great article Luc. I think ExtJS 4 and SharePoint would be superb, I would love to help out if that project went ahead.

Tucson SEO

3 years ago

Wow, hat a long tutorial here! Again it is very crucial input though I would sure print out the page for my learning and applying.

Tucson SEO

3 years ago

Wow, what a long tutorial here! Again it is very crucial input though I would sure print out the page for my learning and applying.

ecommerce software

3 years ago

Quite deep meaningful deal here! Actually I first learn that way how to build a SharePoint mobile web app using Sencha Touch. Really it is so helpful task for web designer as me though I would sure print out the page for my use. thanks!

Kevin Armstrong

2 years ago

Hello,

I am new to Sencha & SharePoint 2010.  Is there a place where I may get the Sencha Files?  I’m looking for sencha-touch.js/.css

Luc Stakenborg

2 years ago

@Kevin: check out the Sencha Touch download page: http://www.sencha.com/products/touch/download/

Please note: the article above was written using ST 1.1. Current version of Sencha Touch is 2.0

Kevin Armstrong

2 years ago

Hi Luc,  I just downloaded ST 2.0. am trying to adjust code to my sharepoint site per your suggestion.  wish me luck:)

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.