Tagged: jquery

Add Additional Range Text to Rating Scale Survey Questions

I had a requirement to have a scale with 5 different text ranges within a survey question, by default you can only have three.

  • Strongly Agree
  • Agree (missing)
  • Neither Agree/Disagree
  • Disagree (missing)
  • Strongly Disagree

Question Settings

Before

​After

Click “Respond to this Survey” which will take you to the “NewForm.aspx” page.

Next click on “Settings” (cog) and click “Edit page”.

Add a “Script Editor” web part below your survey questions and insert the code below.

I’ve also included a few other changes which I think make a survey look a little tidier.

<style>

/* Removes Top Buttons */
table[id*='toolBarTbltop']{display:none;}

/* Removes Line */
.ms-formline {display:none;}

/* Removes Number Headings */
th.ms-gridCol {display:none;}

/* Change Main Question */
.ms-formlabel {font-weight: bold!important;}

/* Change Sub Question Options */
.ms-gridT1, .ms-gridCol {font-weight:normal!important;}

/* Change Sub Question Options Column Width */
.ms-gridCol {color:#444!important; width:110px!important;}

/* Change Sub Question Title Width */
.ms-gridT1 {padding: 0px 0px 10px 0px; width:300px!important;}

</style>

<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.SPServices-2013.01.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function (){

// 1st Rating Scale
$("td.ms-gridCol:eq(1)").append("Agree ");
$("td.ms-gridCol:eq(3)").append(" Disagree");

// 2nd Rating Scale
$("td.ms-gridCol:eq(6)").append("Agree ");
$("td.ms-gridCol:eq(8)").append(" Disagree");

// 3rd Rating Scale
$("td.ms-gridCol:eq(11)").append("Agree ");
$("td.ms-gridCol:eq(13)").append(" Disagree");

// 4th Rating Scale
$("td.ms-gridCol:eq(16)").append("Agree ");
$("td.ms-gridCol:eq(18)").append(" Disagree");

// 5th Rating Scale
$("td.ms-gridCol:eq(21)").append("Agree ");
$("td.ms-gridCol:eq(23)").append(" Disagree");

});

</script>

Get Items from Multiple Lists using jQuery & SPServices

Update: Only works for Site collection administrators

I had a requirement to collate the newest Announcements from all the sub-sites and display them onto the front page of an intranet site. I found this solution from Ben Tedder which worked but it wasn’t giving me quite the right result. So I continue my search and found this solution from Marc D Anderson, which was giving the right results but within an alert.

get-pages   get-announcements

So I decided to try and combine these two solutions into one. It starts by looping through all the sites within the collection and sees if an Announcements list exist and if there are any items within it. The CAMLQuery filters by where Expires greater than or equal to today or Expires is blank, sorts by Created descending and limited to one item. Next it builds the url to the display form (DispForm.aspx), within a dialog box and displays the results to a bulleted list.

get-items-multiple-lists

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.SPServices-2013.01.min.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function() {

  var listName = "Announcements";

  $().SPServices({
    operation: "GetAllSubWebCollection",
    async: false,
    completefunc: function (xData, Status) {
      $(xData.responseXML).find("Web").each(function() {
        var thisUrl = $(this).attr("Url");
        $().SPServices({
          operation: "GetListCollection",
          webURL: thisUrl,
          async: false,
          completefunc: function (xData, Status) {
            $(xData.responseXML).find("List").each(function() {
              if($(this).attr("Title") == listName && $(this).attr("ItemCount") != "0") {
                $().SPServices({
                  operation: "GetListItems",
                  webURL: thisUrl,
                  async: false,
                  listName: listName,
                  CAMLViewFields: "<ViewFields><FieldRef Name='ID' /><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='Title' /></ViewFields>",
                  CAMLQuery: "<Query><OrderBy><FieldRef Name='Created' Ascending='False' /></OrderBy><Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'><Today /></Value></Geq><IsNull><FieldRef Name='Expires' /></IsNull></Or></Where></Query>",
                  CAMLRowLimit: 1,
                  completefunc: function (xData, Status) {
                    $(xData.responseXML).SPFilterNode("z:row").each(function() {
                      var url = $(this).attr("ows_EncodedAbsUrl");
					  var url = url.substr(0, url.lastIndexOf("/"));
					  var fullUrl = '"' + url + "/DispForm.aspx?ID=" + $(this).attr("ows_ID") + '"';
					  var liHtml = "<li><a style='cursor: pointer;' onclick='javascript:SP.UI.ModalDialog.OpenPopUpPage(" + fullUrl + ", null, 800, 600); return false;'>" + $(this).attr("ows_Title") + "</a></li>";
					  $("#listItems").append(liHtml);
                    });
                  }
                });
              }
            });
          }
        });
      });
    }
  });
});

</script>

<ul id="listItems"/>

Display a list in another site collection

The Idea

Original Post: http://blog.pathtosharepoint.com/2009/01/22/a-simple-method-to-display-a-list-in-another-site/

<!-- Load and display list - jQuery version -->
<!-- Questions and comments: Christophe@PathToSharePoint.com -->
<DIV id="ListPlaceholder"><IMG src="/_layouts/images/GEARS_AN.GIF"></DIV>
<script type="text/javascript">
// Paste the URL of the source list below:
var SelectedView = "http://domain.com/SiteCollection1/SourceSite/SourceList/MyView.aspx";
$("#ListPlaceholder").load(SelectedView+" #WebPartWPQ1 .ms-listviewtable",function() {
$("#ListPlaceholder *").removeAttr("id");
$("#ListPlaceholder *").removeAttr("onclick");
$("#ListPlaceholder *").removeAttr("onfocus");
$("#ListPlaceholder *").removeAttr("onmouseover");
});
</script>

Update: http://blog.pathtosharepoint.com/2010/04/09/cross-site-list-snapshot-version-2-0-beta/

The main improvements in version 2:
– the script now works for both lists and calendars
– there won’t be any conflict if you place several scripts on the same page
– a form helps you select your options, and includes a debugging utility

Script Generator: http://usermanagedsolutions.com/SharePoint-User-Toolkit/Pages/Cross-Site-List-Snapshot.aspx

This script allows you to display in a SharePoint page a view taken from another site or site collection. In SharePoint, the standard way to achieve this is to use a Page Viewer Web Part. Compared to a PVWP, my solution:
– looks better, as the content from the other site is integrated in the page layout
– offers less functionality, as most of the interactivity is lost in the process. This is why I am using the term “snapshot”, rather than “view”.

Display Grouped Items: http://mekalikot.blogspot.co.uk/2011/11/display-grouped-items-in-list-or.html

<!-- Load and display list - iframe version for Grouped Items SP2010-->
<div id="ListPlaceholder" style="display: none"><img src="/_layouts/images/GEARS_AN.GIF" alt=""/></div>
<!-- Paste the URL of the source list below: -->
<script type="text/javascript">
function DisplayThisList()
{
var placeholder = document.getElementById("ListPlaceholder");
var displaylist = null;
var sourcelist = document.getElementById("SourceList");
try {
if(sourcelist.contentDocument)
// Firefox, Opera
{displaylist = sourcelist.contentDocument.getElementById("WebPartWPQ2") ;}
else if(sourcelist.contentWindow)
// Internet Explorer
{displaylist = sourcelist.contentWindow.document.getElementById("WebPartWPQ2") ;}
else if(sourcelist.document)
// Others?
{displaylist = sourcelist.document.getElementById("WebPartWPQ2") ;}
}
catch(err) { alert ("Loading failed");}
placeholder.style.display = "none";
sourcelist.contentDocument.getElementById("ctl00_IplsFooter").style.display = "none";
sourcelist.contentDocument.getElementById("MSO_ContentTable").style.marginLeft = "0px";
sourcelist.contentDocument.getElementById("s4-ribbonrow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-titlerow").style.display = "none";
sourcelist.contentDocument.getElementById("s4-leftpanel").style.display = "none";
}
</script>

My Revision

Before we begin, you need to make sure that the view your using has the “Basic Table” style applied (Library/List Settings > Views).

Add a “Script Editor” web part to your page and add the following script.

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function DisplayThisList()
{
$("#SourceList").contents().find(".ms-gb a").click(function() {
DisplayThisList();
});

$("#SourceList").contents().find("#suiteBar").hide();
$("#SourceList").contents().find("#s4-ribbonrow").hide();
$("#SourceList").contents().find(".ms-core-navigation").hide();
$("#SourceList").contents().find("#contentBox").css('margin-left','0px');
$("#SourceList").contents().find("#contentRow").css('padding-top','0px');
//$("#SourceList").contents().find("#MSOZoneCell_WebPartWPQ2").css('margin-bottom','0px');
$("#SourceList").contents().find("#Hero-WPQ2").hide();
$("#SourceList").contents().find("#titleAreaBox").hide();
$("#SourceList").contents().find("#s4-titlerow").css({'height' : '0px','padding-top' : '0px','padding-bottom' : '0px'});

$("#SourceList").contents().find("th.ms-vh").removeAttr("onmouseover");
$("#SourceList").contents().find("th.ms-vh2").removeAttr("onmouseover");
$("#SourceList").contents().find("a.ms-headerSortTitleLink").removeAttr("onclick onfocus href").css('text-decoration', 'none');

setTimeout(function(){
$("#SourceList").contents().find(".ms-subtleLink").attr('target', '_blank');
$("#SourceList").contents().find(".ms-vb2 a").removeAttr("onclick onfocus onmousedown").attr('target', '_blank');
}, 1000);

}
</script>
<ifram id="SourceList" src="http://intranet/Shared Documents/Forms/SelectedViewGroupBy.aspx" frameborder="0" onload="DisplayThisList()" width="100%" height="500"></ifram>

Note: Replace ifram with iframe (iframe are not allowed on WordPress.com for security reasons).

list-in-another-site

I hope you find my solution helpful.

Newsfeed for Everyone

Before

newsfeed-before

After

newsfeed-after

Copy script, save as Newsfeed.dwp and add to web part zone.

<?xml version="1.0" encoding="utf-8"?>
<WebPart xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/WebPart/v2">
<Title>Newsfeed</Title>
<FrameType>None</FrameType>
<Description>Displays conversations and event notifications from content and people you follow across SharePoint sites, and lets users send short, publicly-viewable messages.</Description>
<IsIncluded>true</IsIncluded>
<ZoneID>MiddleLeftZone</ZoneID>
<PartOrder>1</PartOrder>
<FrameState>Normal</FrameState>
<Height />
<Width />
<AllowRemove>true</AllowRemove>
<AllowZoneChange>true</AllowZoneChange>
<AllowMinimize>true</AllowMinimize>
<AllowConnect>true</AllowConnect>
<AllowEdit>true</AllowEdit>
<AllowHide>true</AllowHide>
<IsVisible>true</IsVisible>
<DetailLink />
<HelpLink />
<HelpMode>Modeless</HelpMode>
<Dir>Default</Dir>
<PartImageSmall />
<MissingAssembly>Cannot import this Web Part.</MissingAssembly>
<PartImageLarge />
<IsIncludedFilter />
<Assembly>Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>
<TypeName>Microsoft.SharePoint.Portal.WebControls.MicroFeedWebPart</TypeName>
</WebPart>

Copy script into a Script Editor web part.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#ms-blankfeeddiv").hide();
$("#ms-shareWithDiv").hide();
$("#ms-titlebardiv").hide();
setTimeout(function() {
$("a[alt='Everyone']").trigger('click');
},1000);

});
</script>