This repository provides 2 data proxies to access SharePoint lists and libraries from a Sencha Touch application.
Ext.ux.SP.ODataProxy is an OData proxy for Sencha Touch. It is designed to let Sencha Touch access SharePoint data using the SharePoint ListData.svc REST service which is based on OData. You may use it for other OData sources.
Ext.ux.ODataProxy features:
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 an asset library.
Tip: 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 setting in SP online which can't be changed. As a workaround, just 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.
Here is a basic file which contains all the html to get started. The example.js file contains example code for all CRUD operations.
example.apsx:
<!DOCTYPE html>
<html>
<head>
<title>SharePoint OData proxy example</title>
<!-- Sencha Touch include -->
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/sencha-touch.js"></script>
<!-- app includes -->
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/odataproxy.js"></script>
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/odata_example.js"></script>
</head>
<body>
</body>
</html>Now 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. In this example we will connect to a SharePoint list based on Contacts list template
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
site: '/teamsite',
list: 'Contacts'
}
});We can now use the 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()Ext.ux.SP.SoapProxy is an SOAP proxy for Sencha Touch. It allows Sencha Touch apps access to SharePoint data using the SharePoint WebServices service. Read operations are based on the GetListItems method of Lists.asmx. Create, Update and Delere operations use the UpdateListItems method.
Ext.ux.SP.SoapProxy features:
Differences between SOAP and OData access to SharePoint:
Similar to the description above you need to have an .html (or .aspx) file containing the scripts for your application. Here we include the soapproxy.js file.
example.apsx:
<!DOCTYPE html>
<html>
<head>
<title>SharePoint Soap proxy example</title>
<!-- Sencha Touch include -->
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/sencha-touch.js"></script>
<!-- app includes -->
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/soapproxy.js"></script>
<script src="https://github.com/lstak/SharePoint-proxy-for-Sencha-Touch/raw/master/soap_example.js"></script>
</head>
<body>
...
</body>
</html>
Now let's look at some examples how you can use the SharePoint SOAP proxy. Again 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' },
'Title',
'FirstName'
],
idProperty: 'ID',
proxy: {
// use the special SOAP proxy defined in soappproxy.js
type: 'soap',
// the proxy will connect to the List named 'Contacts' in the /teamsite subsite
site: '/teamsite',
list: 'Contacts'
// optionally, you can specify a view by its GUID
// otherwise the default view is used
//view: '{VIEW-GUID}'
}
});Please note the differences with the OData example:
We can now use the CRUD operations on the Contact data model:
// create new model instance
var contact = new Contact({
Title: 'Davis',
FirstName: 'John'
})
// save it to the server, creating a new SP item
contact.save({
// after server response is received, the callback function is executed
callback: function (record1, operation) {
console.log('Record created', record1, operation);
// change an attribute
record1.set('FirstName', 'John-Paul');
// persist change to the server
record1.save({
callback: function (record2, operation) {
console.log('Record changed', record2, operation);
// now let's delete the item from the server
record2.destroy({
callback: function (record3, operation) {
console.log('Record destroyed', record3, operation);
}
})
}
})
}
})
// here's how to load a SP Item by ID:
Contact.load(230, {
success: function (record, operation) {
console.log('Single record load', record, operation);
}
})
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()Remote sorting and filtering is possible, by defining sorters and filters as described in Sencha Touch documentation. You must set remoteSort and remoteFilter to true, otherwise the store will use local sorting and filtering.
var sorters = [{
property: 'Title',
direction: 'DESC'
}, {
property: 'FirstName',
direction: 'DESC'
}];
var filters = [{
property: 'Title',
value: 'Heisenberg'
}]
var store = new Ext.data.Store({
model: 'Contact',
sorters: sorters,
filters: filters,
remoteSort: true,
remoteFilter: true
});
store.load();Hopefully this is enough to get you started!