How to use JavaScript and CSS in a web part?

George2
  • How to use JavaScript and CSS in a web part? George2

    I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am using publishing portal template. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. And I want to develop a WebPart, which refers css and javascript (.js) files. My question is (1) how to deploy css/javascript files and (2) how to write reference path (e.g. ../../themes from my code below) from webpart to refer to related css/javascript files?

    BTW: the existing code of css/javascript/Webpart is from existing aspx code and I am migrating aspx code to a Webpart. The code works in aspx.

    Currently my code looks like this,

    <link type="text/css" href="../../themes/test.css" rel="stylesheet" />
    <script type="text/javascript" src="../../test.js"></script>
    

  • Will this css and js file only apply to the one web part, or is it something that will be used across many customizations?

    The easiest way to deploy it (not correct way) would be to add it to the layouts directory so that it can be referenced on any site in the farm.

    If it is going to be reused by many customizations, I would wrap it into a solution package separate from the custom web part. That way the "core" solution can be installed and maintained separately from the various implementations of it.

    If it is not reused, then those files can be included in the same solution. Any scripts, styles, images, etc can be added this way.

  • The best way to add javascript (inline or external) is using the ScriptManager to add it. That way you know you only add it once (you might add the web part multiple times on a page).

    For inline code use the static method ScriptManager.RegisterClientScriptBlock() For js file use the static method ScriptManager.RegisterClientScriptInclude() You can even reference a script embedded in an assembly ScriptManager.RegisterClientScriptResource().

    The javascript should be provisioned like any other artifact: through solutions. It could be added to a document library or _LAYOUTS folder.

    Example of web parts using script manager: Sample: Say Hello Web Part Code Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Part

    hth Anders Rask

Tags
development javascript css
Related questions and answers
  • I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. And I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net + JavaScript (jQuery). I met with the following.../css files in head section. I am developing a webpart which such script files will impact (i.e. my webpart will generate a div called "tabs" which such below scripts will impact). Any security issues? &lt;link type="text/css" href="_layouts/test/themes/base/ui.all.css" rel="stylesheet" /&gt; &lt;script type="text/javascript" src="_layouts/test/jquery-1.3.2.js"&gt;&lt;/script> &lt;script type

  • Possible Duplicate: How to use JavaScript and CSS in a web part? I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net.... Any ideas how to implement? My major confusion is how to deal with the code in the head part of the following code? Any reference code or document? Here is the aspx code I am using, &lt;!doctype html> &lt;html lang="en"&gt; &lt;head> &lt;title>Test</title> &lt;link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" /&gt; &lt;script type="text

  • I am using SharePoint Server 2007 Enterprise with Windows Server 2003 R2 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + IIS 6.0. I have put a simple aspx page into layout folder (the code is very simple, just redirect to another page, and I write inline script code in asp.net), here is my code, and I met with unauthorized error (403) when I select to browse the page from IIS 6.0...#" AutoEventWireup="true" %&gt; &lt;script runat="server" type="text/C#"&gt; protected void Page_Load(object sender,EventArgs e) { Response.Redirect("http://www.google.com"); } &lt;/script> &lt

  • Hello I really need help with this... , I am using Sharepoint 2007. I have the 'collect data from user' action in a workflow - which generates a custom form within the workflow folder. The form...:EcmaScriptEncode($ListName),'};'))}"&gt;&lt;/input>&lt;/td> I need to add javascript within the DataFormWebPart so I can update another form field when the user clicks the 'Complete Task' button. I...%"&gt; &lt;input type="button" value="Cancel" name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;__redirectsource;__redirectToList={',ddwrt:EcmaScriptEncode

  • I am using Microsoft Search Server 2008 (based on SharePoint Server 2007) + C# + .Net 3.5 + VSTS 2008 + ASP.Net to develop a web application which invokes Search Server 2008 Web Services when a button in the html page is pressed. I am using the following code to query content from Microsoft Search Server 2008. My question is how to display the search results from the DataSet retrieved? I did...;&lt;QueryText language='en-US' type='STRING'&gt;" + keywordString + "&lt;/QueryText>&lt;/Context>&lt;/Query>&lt;/QueryPacket>"; SearchTest.QueryService queryService = new

  • ()); } UPDATE: Based on feedback from Wictor, I tried the following: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;webParts> &lt;webPart xmlns="http://schemas.microsoft.com/WebPart/v3"&gt; &lt...\"?&gt;" + "&lt;webParts>&lt;webPart xmlns=\"http://schemas.microsoft.com/WebPart/v3\"&gt;" + "&lt;metaData>" + "&lt;type name...I'm trying to add a custom web part (that is one I have written myself) using the new Javascipt OM available with SharePoint 2010. My solution is also running within the Sandbox. I have it working

  • Hiding Left Nav user1155

    ="LeftNavTableCell" runat="server"&gt; &lt;table cellpadding="0" cellspacing="0" id="LeftNav"&gt; &lt;tr> &lt;td style="width:301px; text-align:left; vertical-align:top...; &lt;ContentTemplate> &lt;h3 class="ms-standardheader"&gt;&lt;label class="ms-hidden"&gt;&lt;SharePoint:EncodedLiteral runat="server" text="&lt;%$Resources:wss,quiklnch_pagetitle...="ms-quicklaunchheader"&gt;&lt;SharePoint:SPLinkButton id="idNavLinkViewAll" runat="server" NavigateUrl="~site/_layouts/viewlsts.aspx" Text="&lt;%$Resources:wss,quiklnch_allcontent%&gt;" accesskey

  • (I have also asked this question on Stack Overflow) I have a SharePoint feature I'm using to add some custom aspx files to the Pages Library. When I activate the feature, I can visit the pages in-browser and they are visible in SPDesigner, but when I "View All Site Content" they are not there. Why is this the case? The Feature's Elements File: &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt...;/Module> &lt;/Elements> The Aspx File: &lt;%@ Page language="C#" Inherits="System.Web.UI.Page,System.Web,Version=2.0.0.0,Culture=neutral,PublicKeyToken=b03f5f7f11d50a3a" MasterPageFile

  • contains a hyperlink. My CAML render pattern looks like: &lt;RenderPattern Name="DisplayPattern"&gt; &lt;Switch> &lt;Expr> &lt;Column /&gt; &lt;/Expr> &lt;Case Value...;/RenderPattern> In WSS 3.0, this would render the 2nd column in the field as a hyperlink in the LVWP, which is what I want. In SharePoint 2010, I tried adding TRUE to my field type definition, but that ends up rendering the actual anchor tag, as opposed to a clickable hyperlink: &lt;a href="http://www.something.com"&gt;www.something.com&lt;/a> So then I tried creating a XSL transform, since

Data information