DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Archive for the ‘JavaScript’ Category

Using Google Analytics with SharePoint

Posted by PANVEGA on March 14, 2009

One of my clients wants to use Google Analytics (GA) for their SharePoint (MOSS 2007) intranet. GA is a web analytics package provided free by Google.  You sign up plug some JavaScript into your site (provided to you during the sign up process).

Thanks to the way SharePoint 2007 uses master pages, it’s a breeze to hook it up.  I’m using GA for multiple sites, some are SharePoint 2007 WCM sites and some are not.  As you know, SharePoint already has some built in usage analysis capabilities and they are pretty good.  GA extends these capibilities and provides a more common interface and set of tools for slicing your web site usage data.

There’s some good information out there about how to set this up, but I wanted to clarify a few points in the hope of saving others some time.

The basic steps are:

  1. Obtain the Fully Qualified Domain Name (FQDN) for your MOSS site.
  2. Create your Google Analytics account (see detail below). FYI, You don’t need to pass any authentication in order to track hits to your site.
  3. Add the GA tracking code to your site’s master page within the HTML Body tags, which will allow you to analyze all the sub-pages, not just the home page.
  4. If you doo not have the right permissions to change the masterpage just add a WebEditor Webpart into your ASPX page and copy the JS code into it. Make the Webpart invisiblefor users by setting the Crometype to none Read the rest of this entry »

Posted in Infrastructure, JavaScript, MOSS | Tagged: , , , , | 1 Comment »

Using ASP in JavaScript for URL Encoding in SharePoint fields

Posted by PANVEGA on February 3, 2009

In this post I want to show you how to rebuild the standard MyLinks –> Add to My Links for a custom MyLinks Control in Visual Studio and using ASP in JavaScript.

Active Server Pages exposes an object called ServerVariables, which is part of the Request object. This ServerVariables object allows the programmer to see many environment variables. You can use the ServerVariables along with IIS’s directory sercurity options to determine who is currently accessing your site. You can also grab the visitor’s IP address using the ServerVariables object. This article includes a question and answer from the Activer Server Pages mailing list, as well as an excerpt from the Visual InterDev 1.0 help files detailing all of the properties of the ServerVariables object. (4. How to develop your custom MyLink Control in Visual Studio.) Read the rest of this entry »

Posted in ASP.NET, C#, Delegate Controls, Deployment, DotNet, JavaScript, MOSS, My Links, My Site | Tagged: , , , , , , , | 2 Comments »

Create a rotation banner in a CQWP

Posted by PANVEGA on January 13, 2009

In this post I am gonna explain how easy it is to create a custom banner function in a CQWP by adding some JavaScript code. The goal is to show a Title with a hyperlink and a short description in a rotation banner function. The Content will be referenced from a Custom SP List with these fileds. Read the rest of this entry »

Posted in Delegate Controls, JavaScript, MOSS, SPDesigner, WebParts | Tagged: , , , , , | Leave a Comment »

Javascript set the setAttibute dynamically for SharePoint Sites

Posted by PANVEGA on January 9, 2009

I have been trying to dynamically set an attribute using setAttribute() in a javaScript mehtod.

I wanna use this way to show the user which link is an external link on the Website. More detailed information in  one of my other posts.

Read the rest of this entry »

Posted in Delegate Controls, JavaScript, MOSS | Tagged: , , | Leave a Comment »

Adding more funtionaltity to SharePoint with JS funtions

Posted by PANVEGA on October 14, 2008

Do you sometimes wish to make some special form validation or other javascript actions on SharePoint form fields (like for example onchange, onfocus, onblur, etc?). You can add special functions on events to the SharePoint form fields using JavaScript.

This example demonstrates how to synchronise different fields from another SharePoint lits and apply the SP Designer custom workflows.

Referencing SharePoint fileds with JavaScript:

Read the rest of this entry »

Posted in JavaScript, MOSS, Workflows | Tagged: , , , | 3 Comments »

Open SharePoint Link in a new Window

Posted by PANVEGA on October 12, 2008

In SharePoint when clicking on a link the windows opens in the same window as your application. However usually you still wanna have the link to your SharePoint Site. It’s definitely not the best user experience

Add the following JavaScript Code for example to your custom UserControl .ascx and add it to your Delegate Control in your master page:

Read more about Delegate Controls in my previous post

Read the rest of this entry »

Posted in Delegate Controls, JavaScript, MOSS, SPDesigner, UserControls | Tagged: , , , , | 4 Comments »

How to add a JS ToolTip into a custom Webpart?

Posted by PANVEGA on May 16, 2008

Sometimes it is very useful, for instance you wanna show for a download document library a small popup window with a preview Image of the first page. This can be a simple JS mouse over event.

With Javascript generated tooltips we can include anything that we can code using HTML including graphics and even code generated from other Javascripts. This will make our tooltips much more flexible in what they can display and hopefully much more useful to your visitors. The only thing that you do need to keep in mind is that your visitor will be unable to interact with the tooltip content using their mouse since as soon as they move their mouse from over the link to which the tooltip is attached, the tooltip will disappear. Read the rest of this entry »

Posted in JavaScript, MasterPage, MOSS, WebParts, XSLT | Tagged: , , , | 4 Comments »

Differents between Class and ID in CSS

Posted by PANVEGA on February 12, 2008

In this short post I gonna explain in easy words the main differents between a CSS Class and CSS ID.


CSS IDs are similar to classes in that they define a special case for an element. Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name. The end result looks something like “element#idname”. Also, be sure to absorb the fact that when an ID is used in HTML, we must use “id=name” instead of “class=name” to reference it!

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.
  • Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

The key thing to know is that IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

In my opinion the most important difference is that ID can be called by Javascript’s getElementByID function.I had to use the function many times and it is always very helpful calling the ID.

document.getElementById(“Headline”).style.visibility = “visible”;

Read the rest of this entry »

Posted in CSS, JavaScript | Tagged: , | Leave a Comment »

Asynchron Webservice call with XMLHttpRequest

Posted by PANVEGA on February 12, 2008

XMLHttpRequest is a JavaScript object that was created by Microsoft and adopted by Mozilla. You can use it to easily retrieve data via HTTP. Despite its name, it can be used for more than just XML documents, e.g. for JSON.

As deployment of XML data and web services becomes more widespread, you may occasionally find it convenient to connect an HTML presentation directly to XML data for interim updates without reloading the page. Thanks to the little-known XMLHttpRequest object, an increasing range of web clients can retrieve and submit XML data directly, all in the background. To convert retrieved XML data into renderable HTML content, rely on the client-side Document Object Model (DOM) to read the XML document node tree and compose HTML elements that the user sees.

History and Support

Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2.

Similar functionality is covered in a proposed W3C standard, Document Object Model (DOM) Level 3 Load and Save Specification. In the meantime, growing support for the XMLHttpRequest object means that is has become a de facto standard that will likely be supported even after the W3C specification becomes final and starts being implemented in released browsers (whenever that might be).

Using XMLHttpRequest is very simple. You create an instance of the object, open a URL, and send the request. The HTTP status code of the result, as well as the result document are available in the request object afterwards.Some simple code to do something with data from an XML document fetched over the network:

function test(data) {
 // taking care of data

function handler() {
 if(this.readyState == 4 && this.status == 200) {
  // so far so good
  if(this.responseXML != null && this.responseXML.getElementById('test')
     // success!
 } else if (this.readyState == 4 && this.status != 200) {
  // fetched the wrong page or network error...

var client = new XMLHttpRequest();
client.onreadystatechange = handler;"GET", "test.xml");

If you just want to log a message to the server:

function log(message) {
 var client = new XMLHttpRequest();"POST", "/log");
 client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

Or if you want to check the status of a document on the server:

function fetchStatus(address) {
 var client = new XMLHttpRequest();
 client.onreadystatechange = function() {
  // in case of network errors this might not give reliable results
  if(this.readyState == 4)
 }"HEAD", address);

 Read the rest of this entry »

Posted in AJAX, Infrastructure, JavaScript | Tagged: , , , , , | Leave a Comment »


Posted by PANVEGA on November 10, 2007

JSON and XML are the two programs that have been lovingly adapted to JavaScript to create Rich Internet Applications. JSON  is a data interchange format whose design goals were to be textual, minimal, and a subset of JavaScript, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent. It supports two structures: objects (unordered collections of name/value pairs) and arrays (ordered sequences of values), as well as four simple types: strings, numbers, booleans, and null. It’s not associated with any kind of data transportation pattern. When your data comes back from the server, it’s already in a JavaScript object format.

There has been a point of controversy over whether JSON or XML is better at dealing with communication between endpoints. For documents, XML is certainly the leader, supporting namespaces and mixed content. But for communications between live programs, JSON with its implicit hash and array support. With XML, on the other hand, it’s assumed that you might want to stream it in by the gigabyte, or load it into one of a many different in-memory data structures, or run a full-text indexer over the contents, or render it for human consumption, or, well, anything. In addition, XML has some glaring advantages what with XPath and XSLT offering powerful ways to sift through XML datasets and transform them to other formats. However JSON is more succint, but not as much as one might think. But because the syntax is simpler, it parses more quickly.

Read the rest of this entry »

Posted in AJAX, JavaScript, JSON, XML, XSLT | Tagged: , , , | Leave a Comment »

Developing Custom Field Types

Posted by PANVEGA on February 18, 2007

In this post i am going to introduce how to develope a custom field type in 6 steps with the Sharepoint People Picker. Search the name you want, push the button in order to resolve the user enitities in the code behind class. Finnaly return the parsed values to a simple multiline text box. You can also create a datagrid or just a table to format the values.

First of all we are going to create the visual user interface. As the custom field will be deployed as an feature assembly, it is a good idea to create a class library project in Visual Studio 2005 or Visual Studio 2008. Prepare also the folder structure that is required for a feature. Read the rest of this entry »

Posted in ASP.NET, Deployment, DotNet, JavaScript, UserControls, WebParts | Tagged: , , , , , , | Leave a Comment »