SharePoint + WCF + jqGrid + jQueryUI. Creating a directory on the SharePoint site
This post describes how to create a directory on a SharePoint site using a WCF service, jQuery library and plugins for it.
')
As part of the launch of the new INGG SB RAS website , which is built on SharePoint Server 2007, it was decided to develop a new version of the employee telephone directory . For the client side, jqGrid was chosen as an element for the employee table and jQueryUI for displaying detailed information about the employee. The client part receives data from a RESTful web service implemented on WCF, which is deployed right there on the SharePoint site.
A couple of pictures of what happened:
The staff directory is displayed on the web parts page on the SharePoint site as a web part, the content of which is downloaded from the ascx control.
The JqGridPhoneBookControl.ascx control contains almost no server code, except for the value of the hidden <input> tag, which is used to pass the unit number for initial filtering through the web part properties.
The service that provides the data has the following interface.
JqGridResult is a class returned by the GetAllRecordsForJqGrid method and accepted by the jqGrid reader .
The service code is deployed in the GAC along with the rest of the wsp-solution builds for SharePoint, the svc-file of the web service is placed in a subfolder of the c: \ Program Files \ Common Files \ Microsoft Shared \ Web Server Extensions \ 12 \ TEMPLATE \ LAYOUTS \ folder web.config, in which you must specify webHttpBinding
For WCF services to work correctly in a SharePoint application, you need to install SPWCFSupport , or implement similar code in your solution. Details why it is needed - here .
The contents of the phoneBookGrid table (see JqGridPhoneBookControl.ascx ) are generated using jqGrid , a jQuery plugin that takes data from the WCF service described above, via an ajax request, in json format.
A jqGrid accepts a json object with certain property names, but you can configure a jsonReader and pass on any json object. In our case, this is a JqGridResult.
When you click on a table row, the GetEmployeeDetails function is called, which sends another ajax request to the web service and displays the data in the jQueryUI modal dialog
An employee's photo is taken from a web service using a GET request.
This article does not provide code that implements data access. I can only say that this is a simple implementation of the Repository pattern on Linq To SQL . The IQueryable <T> interface is used for filtering, searching, and paging.
As it turned out, there is nothing difficult in implementing and deploying solutions on jQuery and WCF under SharePoint.
However, if SharePoint is running on IIS7 , then there may be a problem that I had to spend some time solving.
After deploying the solution on a production server, a 404 error occurred when querying for URLs like “ ~ / _layouts / IPGG.IntegrationSystem / PhoneBookService.svc / GetRecord ”.
The solution is to register the request handler for .svc. By default, this is not done in the IIS7 for the SharePoint site.
PS Thanks to habrayuzer Atreides07 and Atv for the help in mastering Habr.
UPD: Transferred to the blog "Web Development".
UPD2: Post on my blog
')
Introduction
As part of the launch of the new INGG SB RAS website , which is built on SharePoint Server 2007, it was decided to develop a new version of the employee telephone directory . For the client side, jqGrid was chosen as an element for the employee table and jQueryUI for displaying detailed information about the employee. The client part receives data from a RESTful web service implemented on WCF, which is deployed right there on the SharePoint site.
A couple of pictures of what happened:
WCF service and PhoneBookWebpart
The staff directory is displayed on the web parts page on the SharePoint site as a web part, the content of which is downloaded from the ascx control.
protected override void CreateChildControls()
{
if (!_error)
{
try
{
base .CreateChildControls();
if (! this .WebPartManager.DisplayMode.AllowPageDesign)
{
var gridControl =
(JqGridPhoneBookControl) Page .LoadControl(
"~/_controltemplates/IPGG.IntegrationSystem/PhoneBook/JqGridPhoneBookControl.ascx" );
gridControl.DivisionNumber = DivisionNumber;
Controls.Add(gridControl);
}
}
catch (Exception ex)
{
HandleException(ex);
}
}
}
* This source code was highlighted with Source Code Highlighter .The JqGridPhoneBookControl.ascx control contains almost no server code, except for the value of the hidden <input> tag, which is used to pass the unit number for initial filtering through the web part properties.
< input type ="hidden" id ="divisionNumberFromWebpart" value ='<%=DivisionNumber %>' />
< table id ="phoneBookGrid" ></ table >
< div id ="phoneBookPager" ></ div >
< div id ="employeeInfoContainer" >
...
</ div >
* This source code was highlighted with Source Code Highlighter .The service that provides the data has the following interface.
[ServiceContract]
public interface IPhoneBookService
{
[OperationContract]
[WebInvoke(Method = "GET" , ResponseFormat = WebMessageFormat.Json)]
JqGridResult<Employee> GetAllRecordsForJqGrid();
[OperationContract]
[WebInvoke(Method = "GET" )]
Stream GetPhoto( int employeeId);
[OperationContract]
[WebInvoke(Method = "GET" , ResponseFormat = WebMessageFormat.Json)]
Employee GetRecord( int employeeId);
}
* This source code was highlighted with Source Code Highlighter .JqGridResult is a class returned by the GetAllRecordsForJqGrid method and accepted by the jqGrid reader .
[DataContract]
public class JqGridResult<T>
{
[DataMember]
public int CurrentPage { get ; set ; }
[DataMember]
public int TotalPages { get ; set ; }
[DataMember]
public int TotalRecords { get ; set ; }
[DataMember]
public List <T> Records { get ; set ; }
}
* This source code was highlighted with Source Code Highlighter .The service code is deployed in the GAC along with the rest of the wsp-solution builds for SharePoint, the svc-file of the web service is placed in a subfolder of the c: \ Program Files \ Common Files \ Microsoft Shared \ Web Server Extensions \ 12 \ TEMPLATE \ LAYOUTS \ folder web.config, in which you must specify webHttpBinding
<? xml version ="1.0" ? >
< configuration >
< system.serviceModel >
< behaviors >
< serviceBehaviors >
< behavior name ="serviceBehavior" >
< serviceMetadata httpGetEnabled ="true" />
< serviceDebug includeExceptionDetailInFaults ="true" />
</ behavior >
</ serviceBehaviors >
< endpointBehaviors >
< behavior name ="endpointBehavior" >
< webHttp />
</ behavior >
</ endpointBehaviors >
</ behaviors >
< services >
< service name ="IPGG.IntegrationSystem.Web.Services.PhoneBookService" behaviorConfiguration ="serviceBehavior" >
< endpoint address ="" binding ="webHttpBinding" contract ="IPGG.IntegrationSystem.Web.Services.IPhoneBookService" behaviorConfiguration ="endpointBehavior" />
</ service >
</ services >
</ system.serviceModel >
</ configuration >
* This source code was highlighted with Source Code Highlighter .For WCF services to work correctly in a SharePoint application, you need to install SPWCFSupport , or implement similar code in your solution. Details why it is needed - here .
jqGrid and jQueryUI
The contents of the phoneBookGrid table (see JqGridPhoneBookControl.ascx ) are generated using jqGrid , a jQuery plugin that takes data from the WCF service described above, via an ajax request, in json format.
$( "#phoneBookGrid" ).jqGrid({
url: "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetAllRecordsForJqGrid" ,
datatype: "json" ,
jsonReader: gridJsonReader,
colNames: columnNames,
colModel: columns,
width: 850,
height: 460,
shrinkToFit: false ,
pager: "#phoneBookPager" ,
rowList: [20, 50, 100, 1000],
onSelectRow: GetEmployeeDetails,
loadComplete: gridLoaded
}).navGrid( "#phoneBookPager" , { add: false , edit: false , del: false , search: false , refresh: true }).filterToolbar();
$( "#phoneBookGrid" ).jqGrid( "navButtonAdd" , "#phoneBookPager" , {
caption: "/ " ,
title: " " ,
onClickButton: function () {
$( "#phoneBookGrid" ).jqGrid( "columnChooser" );
}
});
$( "#employeeInfoContainer" ).dialog({
bgiframe: true ,
modal: true ,
autoOpen: false ,
width: 550,
resizable: false ,
close: ClearDialog,
buttons: {
Ok: function () {
$( this ).dialog( 'close' );
}
}
});
* This source code was highlighted with Source Code Highlighter .A jqGrid accepts a json object with certain property names, but you can configure a jsonReader and pass on any json object. In our case, this is a JqGridResult.
var gridJsonReader = {
root: "Records" ,
page: "CurrentPage" ,
total: "TotalPages" ,
records: "TotalRecords" ,
repeatitems: false ,
id: "Id"
};
* This source code was highlighted with Source Code Highlighter .When you click on a table row, the GetEmployeeDetails function is called, which sends another ajax request to the web service and displays the data in the jQueryUI modal dialog
function GetEmployeeDetails(id) {
$( "#employeeInfoContainer" ).dialog( "open" );
$.ajax({
url: "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetRecord" ,
data: "employeeId=" + id,
success: ProcessInfo,
error: ProcessError
});
GetImage(id);
...
}
* This source code was highlighted with Source Code Highlighter .An employee's photo is taken from a web service using a GET request.
function GetImage(employeeId) {
$( "#employeeImage" ).attr( "src" , "/_layouts/IPGG.IntegrationSystem/PhoneBookService.svc/GetPhoto?employeeId=" + employeeId);
}
* This source code was highlighted with Source Code Highlighter .Instead of conclusion
This article does not provide code that implements data access. I can only say that this is a simple implementation of the Repository pattern on Linq To SQL . The IQueryable <T> interface is used for filtering, searching, and paging.
As it turned out, there is nothing difficult in implementing and deploying solutions on jQuery and WCF under SharePoint.
However, if SharePoint is running on IIS7 , then there may be a problem that I had to spend some time solving.
After deploying the solution on a production server, a 404 error occurred when querying for URLs like “ ~ / _layouts / IPGG.IntegrationSystem / PhoneBookService.svc / GetRecord ”.
The solution is to register the request handler for .svc. By default, this is not done in the IIS7 for the SharePoint site.
PS Thanks to habrayuzer Atreides07 and Atv for the help in mastering Habr.
UPD: Transferred to the blog "Web Development".
UPD2: Post on my blog
Source: https://habr.com/ru/post/84848/
All Articles