Ajax Implementation In Share Point

Satyam Computer Services Ltd. Portfolio Management Information Ajax Implementation Version 1.0

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

Revision History Date 03-Dec-2007

Confidential

Version 1.0a

Description First Draft

Satyam Computer Services Ltd, 2008

Author Satyam

Page 2 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

Table of Contents AJAX Implementation in MOSS 2007 SP1

4

Modifications to be done in the MOSS 2007 Server SP1

4

1. Automated Installation (Solution Deployment)

8

2. Manual Installation

9

3. Optional: Add an assembly reference in the web.config

Confidential

Satyam Computer Services Ltd, 2008

10

Page 3 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

Purpose According to Plumtree to SharePoint migration for PMI we needs to cover all possible functionality plus interactivity at user interface side, and currently PT PMI has Ajax implementation to control some of UI and going forward in SharePoint we are trying to achieve same interactivity and use experience on UI side, we are going to use Ajax implementation in PMI SharePoint site

AJAX Implementation in MOSS 2007 SP1 Although lot of AJAX applications are available over internet, we preferred to use the Microsoft’s ASP.NET 2.0 AJAX extensions 1.0 which can be downloaded from Microsoft site http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa1908e2c027f5d6&displaylang=en Detailed information about AJAX Extensions 1.0 can be found http://asp.net/ajax/Default.aspx.

Modifications to be done in the MOSS 2007 Server SP1 1. We require modifications in the web.config of the SharePoint site say if your application falls under http://:1111/ modify the web.config of this site which will usually reside under C:\inetpub\wwwroot\wss\VirtualDirectories\PortalNumber in our case it is 1111.

Add the following part under: <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/> <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" /> <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, Confidential

Satyam Computer Services Ltd, 2008

Page 4 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" /> <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />

2. Add the following part under: <pages>

3. Add the following part under :

4. Add the following part under: Confidential

Satyam Computer Services Ltd, 2008

Page 5 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

5. Add the following part under:

6. At the end of web.config add the following part under: <system.web.extensions> <scripting> <webServices> --> --> --> <system.webServer> <modules>
Confidential

Satyam Computer Services Ltd, 2008

Page 6 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/ rel="nofollow">

7. Before closing web.config we should add the AJAX controls dll to SharePoint Safe Controls, so copy the following part under: <SafeControls> <SafeControl Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TypeName="*" Safe="True" />

8. It is time to include the AJAX script Manager to the master page. In my case, I've included the script manager control in the default.master located in the following path: C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL So, according to your portal template; locate the right master page file or you can open the master page from the SharePoint Designer under _catalogs folder. After you locate the master page file, open the file then put the following line inside the top of

tag. As shown below: <WebPartPages:SPWebPartManager id="m" runat="Server" /> Confidential

Satyam Computer Services Ltd, 2008

Page 7 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007



Usage of SmartPart The SmartPart has been created to improve the productivity of SharePoint web part developers by leveraging the ASP.NET techniques and skills they normally master. As mentioned in the introduction, it builds on Patrick Tisseghem’s article last year introducing a technique of leveraging the use of ASP.NET user controls making up the body of web parts. Jan Tielens, together with Fons Sonnemans, and with the help of many people within the SharePoint community (including Maxim Karpov and others) have created the SmartPart. The SmartPart allows developers to create ASP.NET Web user controls and use these controls in SharePoint development. ASP.NET web user controls can be created by using the familiar designers available within Visual Studio .NET. So you can actually drag-and-drop controls, double-click to add event handlers. In summary, all the things you would expect in your development cycle. Developers using the SmartPart can again focus on their business code and don’t need to be experts in SharePoint. They can leverage their ASP.NET skills and in many cases, using the SmartPart, reuse existing user controls within the SharePoint sites very quickly SmartPart for SharePoint - ASP.NET AJAX Support you can create a Web User Control (ASCX) with the Visual Studio Designer, that uses the ASP.NET AJAX extensions and run that user control as a SharePoint web part. At this point in time, it's still a beta version, you can get it from the GotDotNet workspace (releases section). How do you get started? First of all you need to download and install the ASP.NET AJAX Extensions. Next you need to extend your SharePoint site with these extensions(Please refer “Settings in Shatrepoint server for Ajax’ topic in the “Ajax.doc”). Now you can install the SmartPart .

Return of SmartPart Installation Guide Welcome to the Installation Guide for the Return of the SmartPart. To install the Return of the SmartPart you can choose between two installation options: the automated (solution deployment) or the manual way. For production servers it’s recommended to go for the automated way. After the installation there is one optional step which is necessary when you are using advanced user controls, such as connectable user controls. We can download the “Returnofthesmartpart” from the below URLs. http://www.codeplex.com/smartpart/Release/ProjectReleases.aspx?ReleaseId=2007 http://www.smartpart.info/default.aspx

1.Automated Installation (Solution Deployment) The automated installation will make use of the Solutions framework of SharePoint 2007 to deploy the Return of the SmartPart. Step number 3 and 4 can also be done from the SharePoint 3.0 Central Administration site. For more information about the Solutions Framework see http://msdn2.microsoft.com/en-us/library/aa543214.aspx. Confidential

Satyam Computer Services Ltd, 2008

Page 8 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

1. Extract the contents of the ReturnOfSmartPart.zip and copy the file ReturnOfSmartPart.wsp to a folder on your server, for example c:\smartpartinstall 2. Add the Solution (wsp) to your SharePoint Server Farm: execute the following statement in a command prompt. The location of the STSADM tool is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN, you should type everything on one single line. stsadm.exe -o addSolution -filename c:\smartpartinstall\ReturnOfSmartPartv1_2.wsp 3. Deploy the solution to your SharePoint server, execute following statement in a command prompt: stsadm.exe -o deploySolution -name ReturnOfSmartPartv1_2.wsp -allcontenturls -local -allowGacDeployment 4. Activate the feature on your SharePoint Site Collection: execute the following statement in a command prompt: stsadm.exe -o activatefeature -n ReturnOfSmartPart -url http://server

2.Manual Installation The manual installation will deploy the Return of the SmartPart to a single SharePoint server by copying the files manually to their destinations. 1. Extract the contents of the ReturnOfSmartPart.zip to a folder on your server, for example c:\smartpartinstall 2. Deploy the ReturnOfSmart.dll to the Global Assembly Cache (GAC): open a second Explorer window and browse to C:\WINDOWS\assembly, drag and drop the ReturnOfSmartPart.dll to this second window. Alternatively you can make use of the following statement which you can enter in a command prompt: gacutil /i c:\smartpartinstall\ReturnOfSmartPart.dll 3. Change the web.config of your SharePoint site, so the Return of the SmartPart is marked as a safe control. Add the following line to the SafeControls section: <SafeControl Assembly="ReturnOfSmartPart, Version=1.2.0.0, Culture=neutral, PublicKeyToken=9f4da00116c38ec5" Namespace="SmartPart" TypeName="SmartPart" Safe="True" /> 4. Upload the SmartPart web part to the Web Parts gallery of your SharePoint site: open your top level SharePoint site, click Site Actions  Site Settings. In the Galleries section, click Web Parts. Click on the Upload button in the toolbar, select the file c:\smartpartinstall\SmartPartv3.dwp to upload, click OK. Confirm the settings by clicking OK.

Confidential

Satyam Computer Services Ltd, 2008

Page 9 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

3.Optional: Add an assembly reference in the web.config If you want to run User Controls that contain a reference to the ReturnOfSmartPart.dll (for example connectable user controls), you will need to add an assembly reference in the web.config of your SharePoint site. Open the web.config and add following element in the assemblies node under the compilation node: The compilation node should look like this: ... You can see the vedio for deploying smartpart from below. Watch the screencast with Windows Media Player Starting with ReturnOfSmartPart 1. Create new ASP .Net Ajax Extesnions website. 2. Inthat solution create new usercontrols. 3. Use ASP.Net Ajax Extensions Tool kit. 4. Create new folder with name “Usercontrols” here C:\Inetpub\wwwroot\wss\VirtualDirectories\ourPort 5. Copy the usercontrols (.ascx & .ascx.cs) pages into the “UserControls” folder C:\Inetpub\wwwroot\wss\VirtualDirectories\ourPort\ UserControls 6. Go to the site and add “smartpart” or “smartpart with ajax” webpart from the Miscellaneous section. 7. Click on “Open tool pane” link and select the required usercontrol. 8. Give the required name for that webpart. 9. Click “Ok”, then we can see the webpart with the functionality You can see the video for demos from below. Just watch the demos . WebPart Communication through “ReturnOfSmartPart” with ASP.Net Ajax Extensions Connectable web parts are web parts that can exchange data. Think for example about a web part which displays a list of invoices, and another one that displays a list of invoice lines. If you select an invoice in Confidential

Satyam Computer Services Ltd, 2008

Page 10 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

the first one, the second one can display the lines of the selected invoice. So with connectable web parts you can create those typical parent/child and parent/details relationships. You can create connectable web parts in SharePoint 2003 and in ASP.NET 2.0/SharePoint 2007, so it's not a new functionality. So why are the connections in the new version of the SmartPart (Return of SmartPart v1.2 BETA) so special? Well if you combine web part connections with a little bit of AJAX-magic you have web parts that can exchange data without postbacks! Think about selecting the invoice and displaying the corresponding invoice lines in another web part, all without postbacks. Actually you could do that trick without this new version, but I've added some helper and wrapper classes to make your life as a web part developer a little bit easier!

Example: Let's start with a really basic example: the DemoProvider and the DemoConsumer user controls. The first one has an UpdatePanel (the ASP.NET AJAX control handling the partial-page rendering), a TextBox and a Button. The second one just has an UpdatePanel and a TextBox. The scenario should be like this: the user enters some text in the first text box, clicks the button and the text is transferred to the second text box, all without postbacks.

DemoProvider.ascx.cs public partial class DemoProvider : System.Web.UI.UserControl, SmartPart.IConnectionProviderControl { protected void Page_Load(object sender, EventArgs e) { } public string ProviderMenuLabel { get { return "Send test data to" } }

}

public object GetProviderData() { return new SmartPart.AJAXConnectionData( TextBox1.Text, Button1, "Click"); }

The code above is the code for the DemoProvider user control, notice that the class implements the IConnectionProviderControl interface of the SmartPart which is also used for normal connections. The special thing happens on the GetProviderData method; a new instance of the AJAXConnectioNData class is created. This object contains first of all the value that should be send to the consumer (TextBox1.Text). The second parameter is the control that will cause the UpdatePanel to refresh, the third parameter is the name of the control's event which will cause the refresh. (This constructor can only have one control as a trigger control, but the class can hold more than one.) The ProviderMenuLabel property returns the value

Confidential

Satyam Computer Services Ltd, 2008

Page 11 of 12

Portfolio Management Information Ajax Implementation DD05

Version: 1.0 Date: 03-Dec-2007

which will be displayed in the web UI of SharePoint when the connection is made. That's it! Now let's take a look at the code for the DemoConsumer user control: DemoConsumer.ascx.cs public partial class DemoConsumer : System.Web.UI.UserControl, SmartPart.IConnectionConsumerControl { protected void Page_Load(object sender, EventArgs e) { } public string ConsumerMenuLabel { get { return "Receives test data from" } } public void SetConsumerData(object data) { SmartPart.AJAXConnectionData ajaxData = data as SmartPart.AJAXConnectionData; if (ajaxData != null) { ajaxData.RegisterTriggerControls(UpdatePanel1); if (ajaxData.Data != null) TextBox1.Text = ajaxData.Data.ToString(); } } } The class implements the normal IConnectionConsumer control of the SmartPart and once again the special thing happens in the SetConsumerDate method. This method receives the instance of the AJAXConnectionData class which was constructed by the provider. First the code checks if the data received is an AJAXConnectionData instance, if so the RegisterTriggerControls method is called with the UpdatePanel to use as a parameter. This method will add every control of the AJAXConnectionData instance as a trigger control for the UpdatePanel, so the two UpdatePanels of the two user controls can trigger eachother. You could do this manually as well, but I provided this functionality since it will be the same for in like 99% of all the cases. Finally the Data property is used to fill the TextBox's Text property. Done

Confidential

Satyam Computer Services Ltd, 2008

Page 12 of 12

---

Related Documents

Ajax Implementation In Share Point

November 2019 13

Share Point

April 2020 35

Share Point Guide

November 2019 24

Share Point 2

June 2020 29

Jagadeesh Share Point New

April 2020 13

Share Point 2007 - K

November 2019 30

Copyright © 2024 PDFCOKE.