Work with content
Overview
The samples in this section use Sitefinity CMS News items. The samples focus on the data function of the sitefinity object that returns a data object. The data object is the mechanism that enables Sitefinity JS SDK to work with the OData services.
In the following samples, the dataOptions object specifies which content item to query.
It has the following properties:
urlName– which content item to queryproviderName– which data provider is the content item fromcultureName– which language version of the content item you want to query
As a result, you get the data object and you can call its various functions, such as:
getgetSinglecreateupdatedestroyupload
These functions accept an object, which has the following functions and properties:
-
successCbandfailureCbThesuccessCb,failureCbare callback functions that are executed for the current request, if the request is successful or if it has failed, respectively. -
queryThequeryis a string that is used to filter dataEXAMPLE:
(endswith(Record, 'Title') or (age ne '15') or (Content eq 'test') -
actionTheactionis an object that is used for various workflow operations. For example, in this object you can specify that you want to publish an item on a specific date and unpublish it on another date:EXAMPLE:
JSON{ "action": "Schedule", "actionParameters": { "PublicationDate":"2021-08-24T13:04:48.760Z", "ExpirationDate":"2021-08-30T21:00:00.000Z" } } -
fallbackPropertiesThefallbackPropertiesis a string array that specifies which properties to fallback to, if an item is not translated to the currently requested culture. For example, if you include theTitlein this property, the service returns the title of the non-translated item.
NOTE: There is a limitation in the OData web services that limits the maximum items in a query to 50. To change this limit in Sitefinity CMS backend, navigate to Administration » Settings » Advanced » WebServices » Routes » Frontend » Services » <your service> » <content type>. Change the value of Default page size field.
Query a collection of News items
The following sample demonstrates how to query multiple news items, by using the get function of the data object:
function getListOfNewsItems(sitefinity) {
var dataOptions = {
urlName: "newsitems",
providerName: "OpenAccessDataProvider",
cultureName: "en"
}
var data = sitefinity.data(dataOptions);
data.get({
action: null
query: null,
fallbackProperties: null,
successCb: function (data) {
console.log(data);
},
failureCb: function (data) {
console.log(data);
}
});
}Query a single News item
The following sample demonstrates how to query a single news item, by using the getSingle function of the data object:
function getSingleNewsItem(sitefinity, id) {
var dataOptions = {
urlName: "newsitems",
providerName: "OpenAccessDataProvider",
cultureName: "en"
}
var data = sitefinity.data(dataOptions);
data.getSingle({
key: id,
query: null,
successCb: function (data) {
console.log(data);
},
failureCb: function (data) {
console.log(data);
}
});
}Create a News item
The following sample demonstrates how to create a News item, by using the create function of the data object:
function createNewsItem(sitefinity) {
var dataOptions = {
urlName: "newsitems",
providerName: "OpenAccessDataProvider",
cultureName: "en"
}
var data = sitefinity.data(dataOptions);
var dateTime = new Date().getTime();
data.create({
data: {
"Title": 'test news ' + dateTime,
"UrlName": "test-url-" + dateTime,
"Content": "test content",
"Summary": "test summary"
},
successCb: function (data) {
console.log(data);
},
failureCb: function (data) {
console.log(data);
}
});
}Update a News item
The following sample demonstrates how to update a News item, by using the update function of the data object:
function updateNewsItem(sitefinity, id) {
var dataOptions = {
urlName: "newsitems",
providerName: "OpenAccessDataProvider",
cultureName: "en"
}
var data = sitefinity.data(dataOptions);
var dateTime = new Date().getTime();
data.update({
key: id,
data: {
"Title": 'test news ' + dateTime,
"UrlName": "test-url-" + dateTime,
"Content": "test content",
"Summary": "test summary"
},
successCb: function (data) {
// data is empty - 204 http status
console.log(data);
},
failureCb: function (data) {
console.log(data);
}
});
}Delete a News item
The following sample demonstrates how to delete a News item, by using the destroy function of the data object:
function deleteNewsItem(sitefinity, id) {
var dataOptions = {
urlName: "newsitems",
providerName: "OpenAccessDataProvider",
cultureName: "en"
}
var data = sitefinity.data(dataOptions);
data.destroy({
key: id,
successCb: function (data) {
// data is empty - 204 http status
console.log(data);
},
failureCb: function (data) {
console.log(data);
}
});
}Upload media
A media item upload request requires you to send headers with the request. This sample demonstrates how to upload an image in JPEG format. Therefore, you must send the following headers with the request:
Headers:
Content-Type: image/jpeg
Content-Encoding: base64The following sample sends three requests in a batch request to Sitefinity CMS:
- The first is a
POSTrequest to upload the binary data - The second is a
PATCHrequest to update the metadata of the image - The third is a
POSTrequest to specify the album where the image must be uploaded. All three requests are handled by thedataobject's upload function.
NOTE: This sample assumes that there is an
<input type="file" name="photo" id="photo">element present in your application.
handleInputChange(e) {
var file = document.getElementById("photo").files[0];
this.uploadFile(file);
}
uploadFile(file: any) {
let fileData = {
"Title": file.name,
"UrlName": file.name
};
var that = this;
var data = this.sitefinity.instance.data({
urlName: "images"
});
data.upload({
data: {
content: file,
contentType: file.type,
name: fileData.UrlName,
contentEncoding: 'base64',
payload: { Title: fileData.UrlName, UrlName: fileData.UrlName },
uploadProperties: {
ParentId: albumId
}
},
successCb: data => {
console.log(data);
},
failureCb: data => console.log(data)
});
}