In my last article – I talked about adding auto-complete capability to your SharePoint forms using SPServices community add-in.
We looked at how this can be done manually by users navigating to the page and adding a web part. If you’re planning to roll this feature out as a solution – you’re probably interested how to deploy your content editor web part with JavaScript calls automatically with Visual Studio deployment.
The method we’re take a look at here will work for on-premises and cloud based scenario. I’m going to assume you have an internal site with the URL http://inranet.contoso.com:
1. Create new Visual Studio 2010 Blank SharePoint project, set the project to be deployed as a sandbox solution with http://inranet.contoso.com as a debug URL.
2. Add -> New Item … From the SharePoint 2010 category of installed templates pick Module and give it a name JSResources.
3. Add our existing jquery-1.4.2.min.js and jquery.SPServices-0.5.8P1.min.js which we downloaded in the last article I referenced at the beginning.
4. Add the following XML to the Elements.xml located in the JSResource module
<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="JSResources" Url="SiteAssets"> <File Path="JSResources\jquery-1.4.2.min.js" Type="GhostableInLibrary" Url="jquery-1.4.2.min.js" /> <File Path="JSResources\jquery.SPServices-0.5.8P1.min.js" Type="GhostableInLibrary" Url="jquery.SPServices-0.5.8P1.min.js" /> <File Path="JSResources\AutoComplete.js" Type="GhostableInLibrary" Url="AutoComplete.js" /> </Module></Elements>
Now, I will demonstrate how you can inject the JavaScript onto a page using content editor web part, the only thing, is this time we’re going to provision the web part and the content automatically.
5. Locate the Features folder and Feature1 folder in it – which was created for us by Visual Studio while provisioning the module. Right click on the Feature1 to Add Event Receiver
6. Replace the commented out FeatureActivated section with the code below:
public override void FeatureActivated(SPFeatureReceiverProperties properties){
SPWeb web = properties.Feature.Parent as SPWeb;
SPFile file = web.GetFile(web.Lists["Team Discussion"].DefaultNewFormUrl);
web.AllowUnsafeUpdates = true;
Microsoft.SharePoint.WebPartPages.SPLimitedWebPartManager partManager =
file.GetLimitedWebPartManager(System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared);
Microsoft.SharePoint.WebPartPages.ContentEditorWebPart contentEditor = new
Microsoft.SharePoint.WebPartPages.ContentEditorWebPart();
XmlDocument xmlDoc = new XmlDocument();
XmlElement xmlElement = xmlDoc.CreateElement("Root");
xmlElement.InnerText = "<script language='javascript' src='/SiteAssets/jquery-1.4.2.min.js'></script>"
+ "<script language='javascript' src='/SiteAssets/jquery.SPServices-0.5.8P1.min.js'></script>";
contentEditor.Content = xmlElement;
partManager.AddWebPart(contentEditor, "Main", 0);
partManager.SaveChanges(contentEditor);
}
In the code above, we’re getting a hold of the current site and the list called Team Discussion on the site. We then get a hold of the NewForm.aspx page and add a new instance of Content Editor web part to it. We assign the same JavaScript code we used last in our auto complete example.
7. That’s it. Deploy the solution using Visual Studio and navigate to http://intranet.contoso.com . Open the Team Discussion and verify whether you have the auto complete functionality on the title field pulling items from the Announcements list.
Enjoy!
