An alternative way of getting Client Object properties using SharePoint REST and CSOM APIs

When working with client APIs such as JSOM or REST you have probably noticed that certain properties of objects are not available compared to SSOM counterparts. For example, SPList class exposes SPList.Author property for getting an SPUser object that represents information about the user who created the list which in turn is not available for SP.List object. Hence the question arises, how those properties could be retrieved using client APIs?

The solution that I would like to demonstrate is based on retrieving client object properties from XML schema.

Getting SP.List object properties using JSOM

The function getListProperties is indented for loading list schema of the SP.List using SP.List.schemaXml property and extracting properties from it’s value:

The following example demonstrates how to retrieve Author property  using the specified method:

Example:

Getting SP.List object properties using REST

The following REST endpoint is used for retrieving SP.List.schemaXml property:

http://<sitecollection>/<site>/_api/web/lists/getbytitle(listtitle)/schemaXml

Example:

The same example that demonstrates how to retrieve Author property of List resource using REST:

Manage User Custom Actions in Office 365

Overview

Custom Actions offer a flexible way to extend capabilities of the SharePoint. The possibilities span the range of including custom JavaScript on every page to extending the Ribbon. In SharePoint 2013/SharePoint Online you can leverage the CSOM/REST  to manage custom actions. Below are demonstrated two simple examples of using custom actions in real world scenarios and I hope you you’ll find them useful.

Example 1. Enable jQuery

Let’s get started with an example that demonstrate how to add jQuery library to Office 365/SharePoint Online site. Unfortunately  it is not supported to reference external resources, for example from Microsoft Ajax Content Delivery Network (CDN) that hosts popular third party JavaScript libraries including jQuery. The prerequisite for referencing JavaScript files is that they could only be accesible when located within the site collection. So, the first step would be to save a jQuery library into Style Library: /Style Library/Scripts/jQuery/jquery-2.1.1.js.

The following Activate-JQuery.ps1 script  demonstrates how to enable jQuery library  in Office 365/SharePoint Online site

Dependencies: UserCustomActions.ps1

Example 2. Enable Google Analytics

The following Activate-GoogleAnalytics.ps1 script demonstrates how to activate tracking code in Office 365/SharePoint Online site

Dependencies: UserCustomActions.ps1

Follow these instructions to use Google Analytics to collect data from Office 365/SharePoint Online sites.

To set up the web tracking code:

  1. Find the tracking code snippet for your property.
    Sign in to your Google Analytics account, and click Admin in the top menu bar. From the Account and Propertycolumns, select the property you’re working with. Click Tracking Info / Tracking Code.
    SNP_8C6378625835DB93E9293E76F24E9AC45177_3517951_en_v4
  2. Find your tracking code snippet. It’s in a box with several lines of JavaScript in it. Everything in this box is your tracking code snippet. It starts with <script> and ends with </script>.
    The tracking code contains a unique ID that corresponds to each Google Analytics property. Don’t mix up tracking code snippets from different properties, and don’t reuse the same tracking code snippet on multiple domains. Click to expand this image and see where the tracking code snippet is in the interface.
  3. Open , paste the tracking code into $TrackingCode variable and run the script to register tracking code in Office 365/SharePoint Online site
  4. Check your set up.
    Make sure that the tracking snippet installed on your website matches the code shown in the view, and see more ways you can verify your set up.

List Items manipulation via REST API in SharePoint 2010

Introduction

Apart from CSOM API,  REST API introduces another approach to access SharePoint list data from platforms on which the CSOM may be unavailable. The SharePoint REST interface is based on the REST-based Open Data protocol (OData) which  is a platform-independent open standard.

Examples

This section contains sample code for all of the CRUD operations.

Create

In order to  perform a Create operation via REST, you must perform the following actions:

  • Create an HTTP request using the POST verb.
  • Use the service URL of the list to which you want to add an entity as the target for the POST.
  • Set the content type to application/json.
  • Serialize the JSON objects that represent your new list items as a string, and add this value to the request body.

The following code snippet demonstrates how to perform a Create operation against a SharePoint list.

Read

In order to  perform a Read operation via REST, you must perform the following actions:

  • Create an HTTP request using the GET verb.
  • Use the service URL of the list item to which you want to add an entity as the target for the GET.
  • Set the content type to application/json.

The code sample demonstrates of how to retrieve an item based on its ID:

Update

To  update an existing entity, you must perform the following actions:

  • Create an HTTP request using the POST verb.
  • Add an X-HTTP-Method header with a value of MERGE.
  • Use the service URL of the list item you want to update as the target for the POST
  • Add an If-Match header with a value of the entity’s original ETag.

In contrast to reading list item  to update an item you will need to pass the eTag value, which could be obtained during item read.

About eTags

When updating or deleting items within SharePoint lists via REST you must specify the Entity Tag (eTag) value that was returned with the item during the initial query. This enables SharePoint to determine if the item has changed since it was requested. Alternatively you can tell SharePoint to perform the operation regardless by specifying * as the eTag value. For example:

  1. “If-Match”: item.__metadata.etag can be used to specify the actual eTag value (‘item’ is the object returned from SharePoint containing the list item in JSON format).
  2. “If-Match”: “*” can be used to match any eTag value resulting in the operation being performed regardless of the actual value.

They form part of the Ajax call for updating an item. eTags are part of the HTTP Protocol V1.1, more information on the topic can be found here.

Delete

To  delete an  entity, you must perform the following actions:

  • Create an HTTP request using the POST verb.
  • Add an X-HTTP-Method header with a value of DELETE.
  • Use the service URL of the list item you want to update as the target for the POST
  • Add an If-Match header with a value of the entity’s original ETag.

The Delete operation is similar to Update operation,  the code below demonstrates how to perform a Delete operation:

References

Working with Discussions List via SharePoint Client Object Model

Overview

In this post  will be demonstrated how to perform a common CRUD operations when working with Discussions List via  Client Object Model (JavaScript CSOM) in SharePoint 2010/2013.

Create a Discussion

So, let’s get started with creating a Discussion item. SP.Utilities.Utility.createNewDiscussion method is used for creating a discussion item:

Load all Discussions

Since Discussion Content Type derives from Folder Content Type  we could utilize SP.CamlQuery.createAllFoldersQuery method to construct a query to retrieve all the discussions:

Create a Message

The SP.Utilities.Utility.createNewDiscussionReply method is used to create a Message item (add reply to a discussion item):

Load all Messages

Since message items  are contained within discussion container (Folder) , to identify messages by discussion we will use SPBuiltInFieldId.ParentFolderId field in CAML query:

Import Discussion List

And finally in order to see how to work with Discussions List in action,  let’s discuss one more example.  Suppose we need to import Discussions List content from an external source, let’s say from Stack Exchange. To access Stack Exchange content (Questions and Answers in our case) we will utilize Stack Exchange API:

How to populate a SharePoint List via CSOM

Overview

Populating a SharePoint List with data is  required for different purposes quite often. In this article I am going to demonstrate how to populate Contacts list with a fake data using CSOM.

Provision column to a List via SharePoint CSOM

We will utilize Contacts List for demonstration purposes. But before we  proceed, let’s add a Geolocation field to a list.

Since the Geolocation column is not available by default in SharePoint lists, it’s common practice to provision this field to a list programmatically. The code below demonstrates  how to add the Geolocation field  by using the SharePoint client object model:

Generate list data

For populating Contacts list we will utilize Faker.js JavaScript library that is intended for generating massive amounts of fake data, below is provided the complete code:

Results

After running the script the Contacts list will be populated with a fake data as demonstrated below.

Contacts default view

Contacts

Contacts map view

ContactsMap

References

Embedding Video to a SharePoint Library

Overview

We have already discussed how to embed video from YouTube and another Video Providers into SharePoint, in particular it was demonstrated  how to:

In both cases some kind of customization should be applied for List/Library in order to render YouTube player in List Forms and Views. In first case custom fields are used for storing embed code properties and a computed field for rendering player. In the second case, custom fields are used for storing embed code itself and YouTube player is rendered via customized List View and Field.

This time we will discuss another approach that is intended for sharing video in out-of-the box List and Libraries, like Blogs and Discussion Boards.

How to embed Video in SharePoint Blog and Discussion Board

Before we will dive into technical details about implementation let me show some usage scenarios.

In order to embed a video into SharePoint:

  • On YouTube site click the Share button located under the video.
  • Click the Embed button.
  • Copy VideoId value from  src attribute value provided in the expanded box .
    EmbedYT
  • Add reply  for a Discussion and select Insert Tab – Share VideoYouTube Video Button to insert YouTube video on page
    ShareVideo_Ribbon
  • Specify YouTube Video parameters and click OK button to insert YouTube player on page
    ShareVideo_RteDialog
  • Saved Message item (for Discussion List)
    ShareVideo_Message
  • Blogs View
    ShareVideo_Blogs

Solution

The solution consist of:

  • SharePoint Ribbon and Page Component for Sharing Video
  • RTE with the capability to insert video player
  • Render video player on List Forms and Views

SharePoint Ribbon and Page Component for Sharing Video

1. The existing group Ribbon.EditingTools.CPInsert.Media is extended with the buttons for video sharing.

2. Video Sharing Page component is developed for interaction with the Server Ribbon:

RTE with the capability to insert video player

By default  YouTube video player is rendered as IFrame element. Since in SharePoint 2010 it is not allowed to store iframe content into Publishing HTML field the alternative solution is proposed here:

1. User provides all  the properties for video in RTE dialog
ShareVideo_RteDialogOnly

2. Video player tag is inserted into SharePoint Rich Text Editor from RTE dialog:

3. When the List Form or View page is rendered, YouTube player is created and video is loaded.

Render video player on List Forms and Views

The IFrame player API is intended for embedding a YouTube video player on a website and control the player using JavaScript. The IFrame API posts content to an <iframe> tag on a page.

The code demonstrates how to create an embedded player that will load a video

References

Integrating location and map functionality in SharePoint 2010

Overview

In SharePoint 2013 was  introduced a new field type named Geolocation that enables you to annotate SharePoint lists with location information. For example, you can now make lists “location-aware” and display latitude and longitude coordinates through Bing Maps. An entry is typically seen as a pushpin on a map view.

Due to the lack of these capabilities in SharePoint 2010 it was decided to fill the gap and bring location and map functionality into SharePoint 2010 and this is one the main reason why this project was initiated.

So, the aim of this project is to bring  location and map functionality into SharePoint 2010  (and more) the same way as they are currently available in SharePoint 2013.

Geolocation field

Geolocation field overview

SharePoint 2013 introduces a new field type named Geolocation that enables you to annotate SharePoint lists with location information.  The custom Geolocation field have been created as part of this project  that is intended for the same purposes in SharePoint 2010.

In columns of type Geolocation, you can enter location information as a pair of latitude and longitude coordinates in decimal degrees.

Add Geolocation column to a list

Geolocation column could be added to a list using standard capabilities of SharePoint 2010 UI as shown in Figure 1.

Figure 1. Add Geolocation column

CreategeoLocation

After the Geolocation column has been added, it could be used as shown below

Figure 2 New or Edit Form with Geolocation column
GeolocationNewForm

Figure 3. Display form with Geolocation column for Contacts list

GeolocationDispForm2

Figure 4. Representing Geolocation column in a list view

MapView_Popup2

Map view

Map View Overview

A map view is a SharePoint view that displays a map (with data obtained from the  Maps service ), using longitude and latitude entries from the Geolocation field type. When the Geolocation field type is available on the SharePoint list, a map view can be created  from the SharePoint UI. In the list, SharePoint 2010 displays the location on a map powered by Maps service, currently Bing Maps is supported only.

Create a map view

The following steps demonstrate how to create a map view from the SharePoint 2010 UI.

  1. Open the SharePoint 2010 list with Geolocation column.
  2. Choose Create view in Ribbon menu
  3. On the Choose a view type page, choose Map View, as shown in Figure 5.
    Figure 5. Choosing a view type
    MapViewFormat
  4. Save a view. A map view is created, as shown in Figure 6.
    Figure 6. Completed map view
    MapView

Resources

SharePoint 2010 Maps project is hosted on GitHub.

Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion

Overview

We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
SharePoint 2013 introduces client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. So, let’s discuss how to create Accordion List View in SharePoint 2013 based on client-side rendering.

For demonstration purposes we will create FAQ List based on Custom List. Default view for our list  will look like this

FAQDefaultView

And our goal here to customize it in such a way list items will be displayed  in accordion as shown below

AccordionListView

Implementation

In order to simplify our solution we restrict ourselves to the creation of client side rendering template only and applying it to the existing List View. If you are interested how to build custom solution for Accordion List  please follow my post about creating Accordion List View for SharePoint 2010.

Create Custom List for FAQ

FAQ List is based on Custom List. For storing questions we will utilize Title field, for Answers we will create new field with Note type

Create  client-side rendered view for Accordion

Client-side rendered view of an FAQ list is presented below

Customize a List View

The last step is to apply client-side rendering template to existing view. Let’s first add FAQ List instance on on page, after that  we only need to specify JSLink property value for List View

Please note that actually  three JavaScript files have been specified(the first two are jQuery libraries) for  JSLink property. All of them are stored in my case in hive, but of course they could be stored not only in file system.

Different ways of extending People Editor in the client side (SharePoint 2010)

Overview

Previously we have already discussed the possible ways for customization of  People Editor,in particular it was demonstrated  how to add  initialization and validation capabilities on the client side. This time we are going to concentrate on some aspects  of extensibility for  People Editor control that are available on the client side.

The entry point for extending of the People Editor control on the client side  is AfterCallbackClientScript property. It allows to specify the callback JavaScript function to be executed after People Entity value is resolved and  control is initialized.

The different approach is to override Entity Editor callback function itself, for example the code below demonstrates how to execute method before control is initialized

The following example demonstrates the usage of the second approach.

Customize People Editor in Alerts subscription page to enable sending of  alerts assigned to SharePoint Group

Sending alerts assigned to SharePoint Group is not supported by default in SharePoint 2010. The main idea of this solution is to enable the selection of SharePoint Groups in people editor on subscription pages and the sending alerts to individual users from these groups

How it works

In Alert subscription page (New or Edit forms) type or select in People picker dialog box the SharePoint Group name

AlertsStep1

After clicking “Check names” button or OK button in People picker the SharePoint group will be  expanded  to individual users in the text box as shown below

AlertsStep2

Implementation

So, the solution consist of the following tasks:

  • activate SharePoint Groups  for selection in people editor control
  • expand a group entity to individual user entities in the text box

Enable SharePoint Group for People Editor via Delegate Control

As was noted earlier SharePoint Groups are not allowed for selection set  on people editor control in Alerts subscription pages

In order to activate  the selection of SharePoint Group in Alerts subscription pages the following control is intended (code behind):

Control with  reference to  JavaScript  library –  expand a group entity to individual user entities for picker editor control

Manifest file for registration of SendAlertsManager control via Delegate Control

Expand SharePoint Group entity to individual Users entities (entityeditorutils.js)

Expand SharePoint Groups to individual User entities for People Editor