Today I learned a neat trick for keeping the global namespace on a page clean.  Lets say you have the following code:

var interval = createInterval('doStuff()',2000);
var counter = 0;
function doStuff() {
    alert(counter++);
    if(counter > 5)
        clearInterval(interval);
}

(function() {
    var interval = createInterval('doStuff()',2000);
    var counter = 0;
    function doStuff() {
        alert(counter++);
        if(counter > 5)
            clearInterval(interval);
    }
})();

Have you ever needed to inject some JavaScript into a web-page contained in a WebBrowser control and then run said code?  If you have then you’re in luck; here is some sample code which accomplishes exactly that in a console application (the same code works for a WinForms application with a few tweaks):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Threading;
using mshtml;

namespace JSInjector
{
    class Program
    {
        [STAThread] //needed for COM compatibility
        static void Main(string[] args)
        {
            /*
            this is the javascript which will be injected
            it takes one parameter and returns it multiplied by the number of images in the page
             * */
            const string jsToInject = @"
                function doStuff(foo)
                {
                    return document.images.length * foo;
                }";

            //create a new WebBrowser and point it to a website
            WebBrowser wb = new WebBrowser();
            wb.Navigate("http://metrostarsystems.com");

            byte loopCount = 0; //we wouldn't want an infinit loop would we?
            while (wb.ReadyState != WebBrowserReadyState.Complete)
            {
                if (loopCount > 200)
                    throw new Exception("Page did not load after 20 seconds!");

                Application.DoEvents(); //needed by the WebBrowser so that events are processed

                Thread.Sleep(100); //if the page hasn't finished loading wait 1/10 of a second
                loopCount++;
            }

            HtmlElement scriptEle = wb.Document.CreateElement("script"); //create the script element
            scriptEle.SetAttribute("type", "text/javascript");

            /*
             Load the javascript into the script element.
             The type casting is necessary since the HtmlElement will not let you set the innerHtml or innerText of a script element
             Note: You must have a reference to the MSHTML (Microsoft HTML Object Library) COM dll in order to do the typecasting
             */
            ((IHTMLScriptElement)scriptEle.DomElement).text = jsToInject;

            wb.Document.Body.AppendChild(scriptEle); //add the script element to the page

            int jsParam = 5; //5 will be the parameter passed in to the JS function
            object returnedFromJs = wb.Document.InvokeScript("doStuff", new object[] { jsParam} ); //call the doStuff JS function with 5 as the argument and store the result

            Console.WriteLine("Returned " + returnedFromJs);
        }
    }
}

To see this code in action check out our new visual search here!

-Lee

Tooltips may be implemented to greatly improve user experience in many scenarios.  This walkthrough will provide a method with which tooltip functionality may be implemented on SharePoint Data View Web Parts (DVWPs) using XSL and JavaScript.

Preparation

1. Open the SharePoint site in SharePoint Designer 2007
2. Open the page on which the tooltip functionality will be implemented
3. Enable either Split or Code view

Create the Tooltip

1. Locate the DVWP in which the tooltip functionality will be implemented
2. Locate the XSL template “dvt_1.rowview” within the DVWP
   

   	Example
   <xsl:template name=”dvt_1.rowview”>

   This XSL template specifies what is rendered for each List Item displayed in the DVWP.  A tooltip will be rendered for eash List Item and therefore should be added to this template.

3. Locate where the tooltip should appear
   No consideration for spacing of the tooltip should be taken into account.  The tooltip will utilize the position style value “absolute” to display over other page content.
4. Insert the blank tooltip
   

   	Example
   <div style=”position:absolute;display:none;margin-top:14px;white-space: »nowrap;overflow:visible;border:silver 1px solid;background-color: »white” class=”ms-listdescription”> <xsl:attribute name=”id”>tooltip_<xsl:value-of select=”@ID”/> »</xsl:attribute> <xsl:attribute name=”onmouseenter”>javascript:this.style.display= »’none’;</xsl:attribute> </div>
   » – unintended line break

   The tooltip may be any HTML object and is not limited to the DIV object.  The tooltip HTML object must have the id attribute set as shown in the provided example.  The position and display style attributes should be set as shown in the provided example.  Setting the position style attribute to “absolute” allows the tooltip to display over other page content.  The onmouseenter attribute (as shown in the provided example) hides the tooltip if the user moves the cursor onto the tooltip.

   If multiple DVWPs on the same page will use the tooltip functionality, the id attribute of tooltips must be made distinct in each DVWP.  For example, tooltips in a DVWP on the List “Transactions” could use the id attribute convention: tooltip_transactions_[List Item ID].  Thus, tooltip id attributes that may have been “tooltip_14″ and “tooltip_14″ may now be “tooltip_transactions_14″ and “tooltip_reports_14″.

5. Set the tooltip text
   

   	Example
   <xsl:choose> <xsl:when test=”string-length(string(@Tooltip))=0″> <xsl:text>No tooltip.</xsl:text> </xsl:when> <xsl:otherwise> <xsl:value-of select=”@Tooltip” disable-output-escaping=”yes”/> </xsl:otherwise> </xsl:choose>

   If the tooltip references a List Item column that is not required (i.e. may be empty), it is suggested that empty values be handled as shown in the provided example. List columns must be referenced by their internal name. Setting the disable-output-escaping attribute to “yes” will display special (i.e. escaped) characters properly (i.e. unescaped). Please note that the provided example references a custom (i.e. non-standard) column called “Tooltip”.

The tooltip should be located like:

As a result of setting the position style attribute to “absolute”, the tooltip renders like:

Create the Tooltip Triggers

1. Locate the DVWP in which the tooltip has been created
2. Locate the XSL template “dvt_1.rowview” within the DVWP
   

   	Example
   <xsl:template name=”dvt_1.rowview”>

   This XSL template specifies what is rendered for each List Item displayed in the DVWP. Each tooltip trigger (i.e. system response to a user action) will show /hide the tooltip in the same row (i.e. TR object) as itself.  Therefore, the tooltip trigger should be located within this template.

3. Locate the HTML object that will trigger the display of tooltips in response to a specified user action.
4. Insert the tooltip triggers
   

   	Example
   <td> <xsl:attribute name=”onmouseenter”>javascript:var tooltipObj=document. »getElementById(‘tooltip_<xsl:value-of select=”@ID”/>’);tooltipObj. »style.left=event.clientX;tooltipObj.style.top=clientY;tooltipObj. »style.display=”;</xsl:attribute> <xsl:attribute name=”onmouseleave”>javascript:document.getElementById( »’tooltip_<xsl:value-of select=”@ID”/>’).style.display=’none’; »</xsl:attribute> <xsl:value-of select=”@Title”/> </td>
   » – unintended line break

   Tooltip triggers are inline JavaScript that find and display the tooltip appropriately. The tooltip is shown by setting its display style attribute to null and hidden by setting its display style attribute to “none”. The provided example shows the tooltip when the user moves the cursor onto the Title column’s parent TD and hides the tooltip when the user moves the cursor off the title column’s parent TD. Please note that the tooltip triggers are applied to the column’s parent TD to provide an optimal user experience.  The provided example displays the tooltip at the point where the user moved the cursor onto the parent TD (rather than always below the parent TD content).

Example

]]> http://blog.metrostarsystems.com/2009/12/04/dvwp-tooltip/feed/ 1 http://blog.metrostarsystems.com/2009/11/03/show-elapsed-modified-time-in-a-document-library/ http://blog.metrostarsystems.com/2009/11/03/show-elapsed-modified-time-in-a-document-library/#comments Tue, 03 Nov 2009 19:10:23 +0000 Ross Beurmann http://blog.metrostarsystems.com/?p=2031 ... ]]>

Introduction

The requirement has come to fruition to see the elapsed time from the “Modified Date” to “Now” on a reports document library. This is not possible in a calculated value unfortunately do to [Today] and [Me] values being consumed in a calculated value are considered “Volatile” by SharePoint out of the box. These use the core MOSS/WSS functions and since the list is 100% dynamic it doesn’t pull session or current state information before loading the list on page load. Every possible solution was attempted prior to using this custom solution. Although this is all “client side” customization all methods of using out of the box methods were tried prior to this solutions development, the downfall being that even when [Today] was able to be used in a calculated value it did not record the time, only the current date.

Required Items

This solution involves slight modification of Meta Data through a simple SharePoint Designer workflow, a short JavaScript function, and the creation of a “Last Updated” field that is a Date and Time field. Below are step by step instructions with screen shots of how to properly customize any List or Document Library to use this functionality. SharePoint Designer, .NET Frame Work 3.5, and WSS 3.0 are required to implement this solution.

Elapsed Time

Create or open an existing document library and go to settings.

Figure 1 Document Library Settings

Click Create Column

Figure 2 Create Column

Name the Column “Last Updated” (Red) and make it a Date & Time column (Blue)

Figure 3 Configure Column

Click Save, and go back to the Document Library page. Click Site Actions, and Edit Page.

Figure 4 Edit Page

Click Add a Web Part and select a Content Editor Web Part and click add.

Figure 5 Add a Web Part

Figure 6 Content Editor Web Part

Select Edit on the Content Editor Web Part and select Modified Shared Web Part

Figure 7 Modify Web Part

Select source editor and copy the following into the source box and click save.

I used the below code from this website: http://www.endusersharepoint.com/2009/01/23/jquery-for-everyone-replacing-today/

Source:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(function() {

var str = “Last Updated”; //change this based on col header

var today = new Date();

today = Date.parse(today)/1000;

var a=0;

var headers = $(“table.ms-listviewtable:first> tbody> tr:first th”).get();

$.each(headers, function(i,e){

x = $(e).contents().find(“a[title*='"+str+"']“).length;

a = x > 0 && i > a ? i : a;

});

var dArray = $(“table.ms-listviewtable:first> tbody> tr:gt(0)”).find(“>td:eq(“+a+”)”).get()

$.each(dArray, function(i,e){       �

var d1 = Date.parse($(e).text())/1000;

var dd = (today-d1)/86400;

var dh = (dd-Math.floor(dd))*24;

var dm = (dh-Math.floor(dh))*60;

var time = ((Math.floor(dd) > 0 ? Math.floor(dd) +” days, ” : “”)+

(Math.floor(dh) > 0 ? Math.floor(dh)+” hrs, ” : “”)+

(Math.floor(dm)+” min”));

$(e).text(time);

});

});

</script>

Figure 8 Source Editor Selection

Figure 9 Source Editor Input

Open the page in SharePoint Designer and create a new workflow file.

Figure 10 Create a Workflow

Name the workflow as “SetLUAsModified” select the list to attach as the document library you are using and select on create and on edit as when the workflow will run.

Figure 11 Set Last Updated Time

Click next and now create your Action, we are setting the last updated field to equal modified. Go to the Actions Drop down and select set field in current item (Red), then set value 1 as “Last Updated” and Value 2 as “Current Item” “Modified” (Blue)

Figure 12 Set Field

Figure 13 Set Last Updated

Figure 14 Set Modified

Save the Workflow and go back to the site, add a document to the library or edit an existing document and the “Last Updated” field will change to 0 minutes.

Figure 15 Test Results

This is a great post by the SharePoint Designer Team on using javascript to manipulate a list form field:

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

This is a good article on how to be able to set values on SharePoint Elements.

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

Thanks for the link Pirooz