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.
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 a app.aspx file to include all the css and js for your Sencha Touch app.
The app.js file contains the basic Sencha Touch start-up and shows an alert:
Now you can open up the following url on your iPhone or Android device:
After logon, you will see the following result:
Not quite what we expected… SharePoint has detected that we access 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]/siteassets/app.aspx?mobile=0
Yes! We now have a Sencha Touch web app running of a SharePoint server.
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 a 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.
The OData SharePoint proxy is on GitHub: https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch
- 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 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.
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 the Sencha site for more info.