So, in previous article “Content Types and Custom Fields in SharePoint 2010” we have created a Order content type to display information about the orders in AdventureWorks database, which contains following fields: Order Details, Customer Information and Address Bill To. In this article we will create Rendering Control for Order Details field. This field will provide information about the components of the order in a table view. We will use a popular JavaScript framework Ext JS for rendering purposes.
Download source code
Creating project for user controls
Start Microsoft Visual Studio and open A02.sln solution.
Add a new project with template Empty SharePoint Project and give it name A02.FieldsControls.
Add new item with type User Control to the project. Give it name OrderDetailsControl.ascx.
Please note that special folder (SharePoint Mapped Folder) ControlTemplates has been added to the project. This folder, in turn, contains a subfolder with the name of the project, which new user control OrderDetailsControl.ascx has been added in.
ControlTemplates element refers to the folder “%Program Files%\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES”, which user controls are deployed to.
Open the file OrderDetailsControl.ascx and enter at the end the following markup code:
<p>Welcome from OrderDetailsControl.ascx</p>
Create a folder OrderDetailsField and add the new class in it. Specify the class name OrderDetailsFieldControl. Open the file and enter the following code:
using A02.FieldsControls.ControlTemplates.A02.FieldsControls;
using Microsoft.SharePoint.WebControls;
namespace A02.FieldsControls.OrderDetailsField
{
class OrderDetailsFieldControl : BaseFieldControl
{
private const string ControlPath = "/_controltemplates/A02.FieldsControls/";
private OrderDetailsControl ctlOrderDetails;
protected override void CreateChildControls()
{
base.CreateChildControls();
ctlOrderDetails = (OrderDetailsControl)Page.LoadControl(ControlPath + "OrderDetailsControl.ascx");
Controls.Add(ctlOrderDetails);
}
}
}
Thus, we have created Rendering Control class for our field OrderDetails (OrderDetailsFieldControl) and we added User Control, which will contain markup code (OrderDetailsControl.ascx).
Assign OrderDetailsFieldControl class as Field Rendering Control for OrderDetailsField field.
In A02.FieldTypes project add reference to the project A02.FieldsControls.
In A02.FieldTypes project open OrderDetailsField.cs file and override FieldRenderingControl property in OrderDetailsField class:
public override BaseFieldControl FieldRenderingControl
{
[SharePointPermission(SecurityAction.LinkDemand, ObjectModel = true)]
get
{
BaseFieldControl fieldControl = new OrderDetailsFieldControl();
fieldControl.FieldName = InternalName;
return fieldControl;
}
}
View results
Deploy A02.sln solution within SharePoint environment. Open Orders List created in the last article. Click Add new item link.
Dialog “Orders List – New Item” will open.
Please note that now, Order Details field value contains label “Welcome from OrderDetailsControl.ascx” instead of empty text field. Thus, we have successfully set Rendering Control for Order Details field.
Creating a project for Ext JS deployment
First of all, we need to add support for Ext JS. To do this we must deploy library files with our solution within SharePoint environment. To do this we will create a separate project. This is necessary to do not deploy Ext JS in your SharePoint environment every time you make changes to the code.
In solution context menu, select Add -> New Project…. Select a project template “Empty SharePoint Project” and give it a name A02.External. Click OK.
In project context menu select Add -> SharePoint “Layouts” Mapped Folder..
Download the latest version of Ext JS on the link http://www.sencha.com/products/extjs/download/. At the time of this writing it was version of Ext JS is 4.0.1. Copy the folder with source code of library in the folder “Layouts\A02.External\” in A02.External project.
Now in Solution Explorer select Show All Files option.
Inside A02.External folder the folder with name “extjs” will appear, marked with a dotted line because it is not added to the project. From the context menu of a folder, select Include in Project.
“extjs” folder will be added to the project
Initialization of Ext JS library
Go to A02.FieldControls project. In the folder “ControlTemplates\A02.FieldsControls” create new file with name OrderDetails.app.js and enter the following code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
var A02 = A02 || {};
A02.OrderDetails = function () {
var width;
var height;
var initializeExt = function () {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
var ordersData = [
['Mountain-200 Black, 38', 2294.99, 15.0, 1, 2279.99],
['Sport-100 Helmet, Red', 34.99, 0.0, 3, 104.97],
['HL Mountain Tire', 35.00, 0.0, 1, 35.00],
['Mountain Tire Tube', 4.99, 0.0, 2, 9.98],
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: 'productname' },
{ name: 'unitprice', type: 'float' },
{ name: 'unitpricediscount', type: 'float' },
{ name: 'orderquantity' },
{ name: 'linetotal', type: 'float' }
],
data: ordersData
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text: 'Product Name',
flex: 1,
sortable: true,
dataIndex: 'productname'
},
{
text: 'Unit Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'unitprice'
},
{
text: 'Unit Price Discount',
width: 100,
sortable: true,
renderer: 'usMoney',
dataIndex: 'unitpricediscount'
},
{
text: 'Order Quantity',
width: 85,
sortable: true,
dataIndex: 'orderquantity'
},
{
text: 'Line Total',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'linetotal'
},
],
width: width,
height: height,
renderTo: Ext.Element.get('OrderDetailsCtrlContainer'),
viewConfig: {
stripeRows: true
}
});
};
var initialize = function (params) {
width = params.width;
height = params.height;
Ext.application({
name: 'Order Details',
launch: initializeExt
});
};
return {
Initialize: initialize
};
};
This code creates a Ext JS table which displays information about the details of the order. In this article, for simplicity, order data are defined directly in OrderDetails.app.js script fil, but in future we will get the data from AdventureWorks database.
Let’s add the initialization of Ext JS in OrderDetailsControl.ascx user control.
Open markup of OrderDetailsControl.ascx and enter the following code:
<SharePoint:CssRegistration ID="ExtJsCssRegistration" name="/_layouts/A02.External/extjs/resources/css/ext-all.css" After="corev4.css" runat="server"/> <SharePoint:ScriptLink ID="ExtJsScriptLink" name="/_layouts/A02.External/extjs/ext-debug.js" runat="server" Localizable="false"/> <script type="text/javascript" src="/_controltemplates/A02.FieldsControls/OrderDetails.app.js"</script>
<SharePoint:CssRegistration> tag adds link to CSS file of Ext JS library. <SharePoint:ScriptLink> tag adds link to main JavaScript file of Ext JS. <script> tag adds link to JavaScript script “OrderDetails.app.js”, which contains out Ext JS appplication initialization code.
View results
Разверните решение в среде SharePoint. Откройте тестовый сайт в браузере. В секции Lists найдите созданный в прошлой главе список Orders List (или создайте новый список из описания списка [A02] Orders List) и кликните по нему. Затем кликните по ссылке Add new item. Откроется диалог Orders List – New Item.
Deploy the solution within SharePoint environment. Open the test site in the browser. In Lists section locate Orders List created in previous article (or create a new list from the list definition with name “[A02] Orders List”) and click on it. Then click on Add new item link. Orders List – New Item dialog opens.
Conclusion
As you can see, the integration of Ext JS and SharePoint 2010 is not so difficult. Of course, we greatly simplified the task – at the time of the data component Ext.grid.Panel displays the test data, and there is no opportunity to amend the details of the order. You’ll also notice that the value of the field Order Details not visible in the view display mode, as well as a column list. In the next article, we use XSLT-transformation, to add support for visualization of the field in these modes display.
Dmitrii Komin Blog 