Search This Blog

Monday, September 22, 2014

How do you embed .js files in WebPart ?

                                
You can embed any resource (.jpg, .js, .css, etc) into a web part and provide it to the client without having to write an httphandler.   Here’s what you do:
1. Add the .js file to the project and mark as an embedded resource (See Build Action on properties tab).
2. Go into the AssemblyInfo.cs and add an entry.  It will look like this:
[assemblyWebResource ("Namespace.File.js","text/javascript")]
Where Namespace is the namespace for your web part project and file.js is the name of your file.
3.  Inside OnPreRender, add the resource to the page.  This is done with the following code:
Page.ClientScript.RegisterClientScriptResource(GetType(), Namespace.File.js);

Insert JavaScript into a Content Editor Web Part (CEWP)


In the 2007 version of SharePoint, we had the Source Editor included in the Content Editor Web Part (CEWP) as our way of inputting JavaScript directly onto a page. The process on how to do this has changed a little bit in the new 2010 version. Follow below on how to successfully perform the same task.
Instead of having a Source Editor to directly paste in our code, we need to first create a simple text file and save our code there. Once saved, upload that file to SharePoint. I am using the Site Assets library for this demo and a JavaScript that displays today’s date. After you have uploaded the file, right click on the file and select Copy Shortcut.
Now, go to your desired page and put the page in edit mode. Add in the Content Editor Web Part located under the Media and Content category. Once added select the web part and use the ribbon UI to navigate to the Web Part Properties screen.
On the web part properties screen, paste in the URL link to your uploaded JavaScript file. Click OK on the properties screen and, if your JavaScript is valid, it should display the desired results! Simple and easy!

Using External Javascript, CSS or Image File in a WebPart


Button Testbutton; 
Image img;
string imagePath;

// Referring External Javascript 
ClientScriptManager cs = Page.ClientScript;
// Include the required javascript file.
if (!cs.IsClientScriptIncludeRegistered("jsfile"))
cs.RegisterClientScriptInclude(this.GetType(), "jsfile", "/_wpresources/MyWP/1.0.0.0_9f4da00116c38ec5/jsfile.js");

Test : 
Testbutton= new Button();
Testbutton.Text = "Click me";
Testbutton.OnClientClick = "jsfile_Function()"; // specify function name here
this.Controls.Add(Testbutton); 

// Refering External CSS 
Microsoft.SharePoint.WebControls.CssLink cssLink = new Microsoft.SharePoint.WebControls.CssLink();
cssLink.DefaultUrl = "/_wpresources/MyWP/1.0.0.0_9f4da00116c38ec5/styles.css";
this.Page.Header.Controls.Add(cssLink);

// Using External Image 
imagePath = "/_wpresources/MyWP/1.0.0.0_9f4da00116c38ec5/Image.jpg";
img.ImageUrl = imagePath;
img.ID = "image1";

this.Controls.Add(mybutton); 
this.Controls.Add(img);




No comments:

Post a Comment