DevExpress / DevExtreme-Data-Parse

[OBSOLETE] See https://js.devexpress.com/Documentation/Guide/Data_Layer/Data_Layer/

DevExtreme.data.Parse

About

The DevExtreme data layer extension includes the ParseStore class that wraps the Parse JavaScript SDK functionality with the Store interface accepted within the DevExtreme data layer.

It allows the DevExtreme UI widgets to work with data obtained from the Parse back-end service with all data manipulations enabled, e.g. filtering, grouping, sorting, etc. Also, it makes possible to quickly switch the data provider, e.g. from Parse to Array, or vice versa.

Setup

Include dx.data.parse.js file from the src folder to the index.html file in the following order.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="globalize.js"></script>
<script type="text/javascript" src="parse-sdk.js"></script>
<script type="text/javascript" src="devextreme/dx.all.js"></script>
<script type="text/javascript" src="devextreme/dx.data.parse.js"></script>

Call the Parse.initialize method at the application startup and pass a applicationId and javascriptKey to it.

// Call this method before any data manipulation
Parse.initialize("ApplicationID", "JavascriptKey");

Then, call the ParseStore constructor and pass the required configuration object to it.

var store = new DevExtreme.data.ParseStore({
    /**
     * A name of the required class of Parse.Object.
     */
    className: "Product",
    /**
     * Specifies whether or not to convert every instance of Parse.Object in response to object literal representation.
     * Any other types, such as Parse.GeoPoint, Parse.Relation, will be represented as is.
     * The default value is `true`.
     */
    normalizeResponse: true
});

API

Besides the standard Store methods, ParseStore contains several specific methods.

• normalizationEnabled() - indicates whether or not normalization is enabled.
• className() - returns the name of the Parse entity associated with this ParseStore instance.

Here is a code sample:

className constructor option

var parseStore = new DevExpress.data.ParseStore({ className: "Product" });
// Now you're able to read or modify data
parseStore.load()
    .done(function(data) {
        // process data
    })
    .fail(function(error) {
        // process error
    });

// Or, bind the parseStore instance to any DevExtreme Collection widget instance:
$("#dx-list").dxList({
    pullRefreshEnabled: true,
    dataSource: new DevExpress.data.DataSource(parseStore)
});

normalizeResponse constructor option.

// Consider that the Product entity type has 2 fields: Name and Price.
// Thus, after normalization it will look as follows.
var parseStore = new DevExpress.data.ParseStore({
    className: "Product"
});

parseStore.load()
    .done(function(data) {
        assert.deepEqual(data[0], {
            id: "keyValue", // stub
            createdAt: new Date("2014-10-20T18:22:40.361Z"), // stub
            modifiedAt: new Date("2015-10-20T18:22:40.361Z"), // stub
            Name: "ProductName",
            Price: 15.22
        }); // success
    });

// To overcome this behavior, assign false to the normalizeResponse constructor option.
var parseStore = new DevExpress.data.ParseStore({
    className: "Product",
    normalizeResponse: false
});

parseStore.load()
    .done(function(data) {
        assert.ok(data[0] instanceof Parse.Object); // success
    });

Modify ACL property.

You can read and modify data associated with the current ParseStore instance in the same way as data associated with any other Store only with a single difference - the ACL property.

To set ACL of the inserted/modified object, pass the Parse.ACL instance to the ACL property of the values object.

var acl = new Parse.ACL();
acl.setPublicReadAccess(false);
acl.setPublicWriteAccess(false);
acl.setReadAccess(Parse.User.current(), true);
acl.setWriteAccess(Parse.User.current(), true);

var parseStore = new DevExpress.data.ParseStore({
    className: "Product"
});

parseStore.insert({
    Name: "New product",
    ACL: acl
});
// Or
parseStore.update("keyValue", {
    Name: "New name of product",
    ACL: acl
});

Samples

There are two samples in samples dir. One is a basic ToDo application demonstrating a Parse.com back-end and a DevExtreme application working together, and the other demonstrates how to bind data obtained from a Parse.com back-end to a dxDataGrid instance.

To make them work, clone the repo and run the npm install command on it. Then replace the stub values of applicationId and javaScriptKey (in db.js for a grid sample and in the app/data.js for the ToDo one) with actual ones.

Or, you can try those samples online by following this link to see the ToDo sample and this one for Grid sample.