SharePoint Page Editing
- 3 minutes to read
This section describes how to use the SharePoint Designer to embed DevExpress ASP.NET controls in a SharePoint Page.
Requirements
The following assemblies are used in this tutorial.
* **DevExpress.Data** - the core DevExpress assembly;
* **DevExpress.Web** - contains the main ASP.NET product code;
* **DevExpress.Web.ASPxThemes** - contains the skins and theme resources for DevExpress ASP.NET products.
These assemblies should be registered in the GAC. If they have not yet been registered, use the following commands in the “gacutil” tool to deploy them.
``gacutil –i DevExpress.Data.v22.2.dll``
``gacutil –i DevExpress.Web.v22.2.dll``
``gacutil –i DevExpress.Web.ASPxThemes.v22.2.dll``
Register the ASPxHttpHandlerModule module entry in the target SharePoint site’s Web.config file - as demonstrated in the code sample below.
Registration for v14.2 and newer
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <configuration> ... <system.webServer> ... <modules runAllManagedModulesForAllRequests="true"> ... <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" /> </modules> </system.webServer> </configuration>Registration for v14.1 and older
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <configuration> ... <system.webServer> ... <modules runAllManagedModulesForAllRequests="true"> ... <add type="DevExpress.Web.ASPxClasses.ASPxHttpHandlerModule, DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule"/> </modules> </system.webServer> </configuration>
Register the ASPxHttpHandlerModule module entry in the target SharePoint site’s Web.config file - as demonstrated in the code sample below.
Registration for v14.2 and newer
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <configuration> ... <system.webServer> ... <handlers> ... <add type="DevExpress.Web.ASPxUploadProgressHttpHandler, DevExpress.Web.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="ASPxUploadProgressHandlerPage.ashx" name="ASPxUploadProgressHandler" preCondition="integratedMode" /> </handlers> </system.webServer> </configuration>Registration for v14.1 and older
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <configuration> ... <system.webServer> ... <handlers> ... <add type="DevExpress.Web.ASPxUploadControl.ASPxUploadProgressHttpHandler, DevExpress.Web.v14.1, Version=14.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET,POST" path="ASPxUploadProgressHandlerPage.ashx" name="ASPxUploadProgressHandler" preCondition="integratedMode" /> </handlers> </system.webServer> </configuration>
Mark each namespace/control from DevExpress assemblies to be used on the SharePoint Page as safe to use. (See the following article for more information: How to: Mark Controls as Safe Controls.) The code sample below demonstrates how to mark DevExpress controls as safe.
<SafeControl Assembly="DevExpress.Data.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Data" TypeName="*" Safe="True" SafeAgainstScript="False" /> <SafeControl Assembly="DevExpress.Web.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TypeName="*" Safe="True" SafeAgainstScript="False" />Register DevExpress assemblies you wish to use in the corresponding Web.config section (as you do for a standard ASP.NET Web Application) – as shown in the following code example. See the following article to learn more: assemblies Element for compilation (ASP.NET Settings Schema).
<assemblies> ... <add assembly="DevExpress.Data.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> <add assembly="DevExpress.Web.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> <add assembly="DevExpress.Web.ASPxThemes.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" /> </assemblies>
Editing the SharePoint Page
This tutorial demonstrates how to replace the default QuickLaunch menu with ASPxNavBar.
- Open the SharePoint site in the SharePoint Designer.
- Edit the “seattle.master” Master Page in Advanced Mode.
Add the following Register directive to the corresponding Master Page section.
<%@ Register Assembly="DevExpress.Web.v22.2, Version=22.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>Define the ASPxNavBar control.
<dx:ASPxNavBar ID="V4QuickLaunchMenu" runat="server" DataSourceID="QuickLaunchSiteMap" EnableViewState="false" Width="100%"></dx:ASPxNavBar>Since ASPxNavBar can be bound to a hierarchical datasource, you can use ASPxNavBar instead of the default QuickLaunchMenu.
Applying Themes
DevExpress ASP.NET controls ship with 18 built-in skins. Set the ASPxNavBar.Theme property to “MetropolisBlue”, for example, to create an appearance that is consistent with the SharePoint 2013/Office 365 color scheme.
The following code sample defines the control’s Theme property.
<dx:ASPxNavBar ID="V4QuickLaunchMenu" runat="server" ... Theme="MetropolisBlue"></dx:ASPxNavBar>
You can specify a theme for an individual control or the entire application. See the following help topic for more information: DevExpress Themes Overview.
If you work with Sharepoint WebPart / VisualWebPart modules, override the CreateChildControls method to apply a theme.
public class WEB_PART_OR_VISUAL_WEB_PART_CLASS_HERE : WebPart {
protected override void CreateChildControls() {
DevExpress.Web.ASPxWebControl.GlobalTheme = "Aqua";
...
//Create Child Controls Here
}
}