Tag Archives: Javascript

Cascading Drop Down Menus

Requirement

Cascading drop-down menus in a document library. SharePoint 2010 does not support this by default but you can work around this by using JQuery.

Solution

I used the following solution. However, one of the problems I encountered was that datasheet view does not present the values properly. If you try to edit the metadata using datasheet view, the filter will not apply to the sub-category column and you will get a list of all sub categories.

The steps of the solution presented are basically:

  1. Create a list for the parent category.
  2. Create a list for the sub category.
  3. Create the required columns in the list you wish to implement cascading drop downs.
  4. Edit the EditForm.aspx and insert javascript.
Actual code and instructions can be found here:

http://www.uccorner.com/253/sharepoint/cascading-drop-down-sharepoint-foundation-2010/

Comments ( 0 )

Content Query Webpart and Data View Webpart – Modal Dialogs

Requirement

We have a content query webpart that displays information from a list on a subsite. When a user clicks on a link on the webpart, we want the link to open in a Modal dialog.

Solution

  1. Open SharePoint Designer 2010
  2. Go to All Files -> Style Library -> XSL Style Sheets -> ItemStyle.xsl -> Modify
  3. Copy one of the existing templates, e.g. Default, change the name and modify the XSL according to your needs.

Here is a simple example, that I created for ‘Job Vacancies’.

Note the bits in blue where javascript is used to force the links to open in a dialog window.

<xsl:template name=”JobVacancy” match=”Row[@Style=’JobVacancy’]” mode=”itemstyle”>

<xsl:variable name=”Created”>

<xsl:value-of select=”ddwrt:FormatDateTime(string(@Created) ,1033 ,’dd/MM/yyyy’)” />

</xsl:variable>

<xsl:variable name=”_DCDateCreated”>

<xsl:value-of select=”ddwrt:FormatDateTime(string(@_DCDateCreated) ,1033 ,’dd/MM/yyyy’)” />

</xsl:variable>

<xsl:variable name=”SafeLinkUrl”>

<xsl:call-template name=”OuterTemplate.GetSafeLink”>

<xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>

</xsl:call-template>

</xsl:variable>

<xsl:variable name=”SafeImageUrl”>

<xsl:call-template name=”OuterTemplate.GetSafeStaticUrl”>

<xsl:with-param name=”UrlColumnName” select=”‘ImageUrl'”/>

</xsl:call-template>

</xsl:variable>

<xsl:variable name=”DisplayTitle”>

<xsl:call-template name=”OuterTemplate.GetTitle”>

<xsl:with-param name=”Title” select=”@Title”/>

<xsl:with-param name=”UrlColumnName” select=”‘LinkUrl'”/>

</xsl:call-template>

</xsl:variable>

<xsl:variable name=”LinkTarget”>

<xsl:if test=”@OpenInNewWindow = ‘True'” >_blank</xsl:if>

</xsl:variable>

<div id=”linkitem” class=”item”>

<xsl:if test=”string-length($SafeImageUrl) != 0″>

<div class=”image-area-left”>

<a href=”{$SafeLinkUrl}” target=”{$LinkTarget}” title=”{$DisplayTitle}”>

<xsl:value-of select=”$_DCDateCreated”/> – <xsl:value-of select=”$DisplayTitle”/>

</a>

</div>

</xsl:if>

<div class=”link-item”>

<xsl:call-template name=”OuterTemplate.CallPresenceStatusIconTemplate”/>

<script type=”text/javascript”>

function ModalDialog(url) {

var options = {

url: url,

title: “Job Vacancies”,

allowMaximize: true,

showClose: true,

width: 800,

height: 600,

dialogReturnValueCallback: silentCallback};

SP.UI.ModalDialog.showModalDialog(options);

}

function silentCallback(dialogResult, returnValue) {

}

function refreshCallback(dialogResult, returnValue) {

SP.UI.Notify.addNotification(‘Operation Successful!’);

SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

}

</script>

<a href=”javascript:ModalDialog(‘{$SafeLinkUrl}’)” target=”{$LinkTarget}” title=”{$DisplayTitle}”>

<xsl:value-of select=”$_DCDateCreated”/> – <xsl:value-of select=”$DisplayTitle”/>

</a>

<div class=”description”>

<xsl:value-of select=”@Description” />

</div>

</div>

</div>

</xsl:template>

 

You can also use the same bit of code to force links in your data view web part to open in a dialog window.

  • Edit Webpart properties of your Data View Web Part
  • Under Data View Properties -> Click on XSL Editor
  • Copy the entire contents to a code editor like Visual Studio or Notepad++.
  • Search for the string ‘a href’ – there should only be 1 string.
  • Just above the line ‘<a href….”>
  • Add in the following code:

<script type=”text/javascript”>

function ModalDialog(url) {

var options = {

url: url, title: “<change this to your title>”,

allowMaximize: true,

showClose: true,

width: 800,

height: 600,

dialogReturnValueCallback: silentCallback};

SP.UI.ModalDialog.showModalDialog(options);

}

function silentCallback(dialogResult, returnValue) {

}

function refreshCallback(dialogResult, returnValue) {

SP.UI.Notify.addNotification(‘Operation Successful!’);

SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

}

</script>

  • Next, modify the URL so that it looks like this:

 <a href=”javascript:ModalDialog2(‘http://sharepoint/DispForm.aspx?ID={@ows_ID}‘)“>

  • Copy the XSL back to the webpart and save.

Your links should now open in a dialog window.

 

Comments ( 0 )

Open link in SP Dialog from Global Navigation / Quick launch

Requirement

Building on my previous post about opening a link in a SP dialog window (similar to lightbox), we decided to make it so that clicking on the link under the quick launch or top navigational bar would open the page immediately in a SP dialog box. This is not possible out of the box, as SharePoint does not allow javascript in the links under the top navigation / quick launch. Here is our work around using Jquery/javascript.

The benefit of this for us is that users can now open the staff directory from anywhere on the site collection without leaving their current page as long as they have access to the top navigational bar.

Solution

This solution uses Jquery. Change the bits in bold to meet your requirements. If you want this to work on every page in the site collection, you will need to add this script to the master page. This script will:

  1. Load the Jquery library from your SharePoint site collection.
  2. Check if the link being clicked leads to a page called ‘staffdir.aspx’.
  3. Open the link to the page (http://path/to/staffdir.aspx) specified under in a SP Modal Dialog.

<script type=”text/javascript” src=”http://path/to/jquerylibrary/jquery-1.4.4.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“a[href$=’staffdir.aspx‘]”).click(function() { SP.UI.ModalDialog.showModalDialog({ url: “http://path/to/staffdir.aspx“, title: “Staff Directory“, allowMaximize: true, showClose: true, width: 1200, height: 768, dialogReturnValueCallback: function (dialogResult, returnValue) {}});   return false; }); }); </script>

 

Comments ( 0 )

Opening Images and Pages in a Dialog / Lightbox

Opening any webpage in a dialog window (tested with SharePoint 2010).

http://pacsharepoint.com/2010/07/open-list-item-modal-dialog-lightbox.html

Note: I had to add the script using SharePoint Designer 2010 as the web editor kept removing the javascript whenever I clicked on save.

Opening an image with a Lightbox effect.

http://johnliu.net/blog/2011/5/9/sharepoint-2010-simple-lightbox-effect-for-large-images.html

Note: I had to modify John’s script a little to get this to work for me.

<script type=”text/javascript”>
$(document).ready(function () {
$(“img.ms-rteImage-LightBox”).click(function(){
SP.UI.ModalDialog.showModalDialog({
url: $(this).attr(“src”),
title: $(this).attr(“alt”)
});
});
});
</script>

Comments ( 4 )

Dynamic banner images depending on browser resolution

Requirement

Intranet site branding requires that the v4.master masterpage be customised with a dynamically expanding banner that changes its resolution depending on the resolution of the user’s browser.

Solution

We created a simple javascript that is copied just below the

<script type="text/javascript">
	var _fV4UI = true;
	</script>

section of the master page. Note that this uses ASP literals so that the masterpage can be deployed to any site collection. ASP literals can be quite problematic when editing using SharePoint designer as the editor adds unnecessary mark up to the code, e.g. __designer:preview and __designer:values. It is recommended to insert this code using a text editor, or copy it to a .js file and call it from the masterpage. If you choose this option, you will need to copy the images/files to the _layouts folder of the webserver and update the file paths in the script.

Before you run this script you will need to copy the following files to the Site Collection \ Style Library

  1. jquery library should be copied to Site Collection/Style Library/jquery library/
  2. Banner images should be copied to Site Collection/Style Library/images and must match the image names: banner_bg1280.jpg, banner_bg1440.jpg, banner_bg1680.jpg and banner_bg1920.jpg.
<script type="text/javascript" id="s1"></script>
    <script type="text/javascript">
        var siteColl = '<asp:Literal ID="siteColl" runat="server" Text="<%$SPUrl:~sitecollection/Style Library/jquery library/jquery-1.4.4.min.js%>"></asp:Literal>';
        if (typeof (s1) != 'undefined') {
            s1.src = siteColl;
        }

        var jQueryScriptOutputted = false;
        function initJQuery() {
            //if the jQuery object isn't available
            if (typeof (jQuery) == 'undefined') {
                if (!jQueryScriptOutputted) {
                    //only output the script once..
                    jQueryScriptOutputted = true;
                    //output the script (load it from google api)
                    document.write("<scr" + "ipt type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></scr" + "ipt>");
                }
                setTimeout("initJQuery()", 50);
            } else {
                $(function () {

                    $(document).ready(function () {
                        function adjustCSS() {
                            $('.s4-titletable').hide();
                            var pageWidth = $(window).width();
                            if (pageWidth < 1277) {
                                $('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1280.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
                            }
                            else if (pageWidth > 1400 && pageWidth < 1671) {
                                $('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1440.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
                            }
                            else if (pageWidth > 1600 && pageWidth < 1901) {
                                $('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1680.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
                            }
                            else if (pageWidth > 1901) {
                                $('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1920.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
                            }
                            else {
                                $('.s4-titletable').css({ 'background-image': "url(" + "<asp:Literal runat='server' Text='<%$SPUrl:~sitecollection/Style%20Library/Images/banner_bg1280.jpg%>' />" + ")", 'height': '145px', 'background-repeat': 'no-repeat', 'background-position': 'center top' }).fadeIn();
                            }
                        } $(function () {
                            $(".menu-item").hover(function () {
                                $(this).stop().attr('title', '');
                            },
		function () {
		    $(this).stop().attr();
		});
                        });

                        adjustCSS();
                        $(window).resize(function () { adjustCSS() });

                    });

                });
            }
        }
        initJQuery();
     </script>
Comments ( 0 )