Mostly SharePoint Stuff

Tuesday 23 February 2016

SharePoint 2010 Client Side People Picker

<%@ Page Language="C#" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/forms.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pp = $().SPServices.SPFindPeoplePicker({
peoplePickerDisplayName: "pp_displayName",
valueToSet: "xxx\\xxx;",
checkNames: true
});
　
$("#btnTest").click(function(){
var pp = $().SPServices.SPFindPeoplePicker({peoplePickerDisplayName: "pp_displayName"});
for(var i=0;i<pp.dictionaryEntries.length;i++)
alert(pp.dictionaryEntries[i].AccountName);
});
});
</script>
</head>
<body>
<form id="myPeoplePickerForm" runat="server">
<table>
<tr>
<td><nobr style="display:none">pp_displayName</nobr>
<div class="p">
<label>Enter Name(s) Here:</label>
<span style="float:left;">
<SharePoint:PeopleEditor ID="myPeoplePicker" runat="server" SelectionSet='User,SecGroup,SPGroup'/>
</span>
<div class="clear"></div>
</div>
</td></tr></table>
</form>
<button id="btnTest">Test</button>
</body>
</html>

Friday 22 May 2015

Using IFrame and postMessage to perform cross page communication

This is a JavaScript function which wraps all the necessary logic to communicate with a target page, below are the key points of this implementation:

target page is loaded using an hidden iframe

once iframe finishes loading, send data over via postMessage

async operation has been wrapped with a jQuery promise

Usage example:

  $("#btnTest").click(function(){
   var dataSend = {"value": 123};
   sendAndReceiveMessage("child.html", "*", dataSend).done(function(data){
    alert("Test result: " +data.value);
   });
  });

A sample implementation of child.html is below. In this case I just double the value received from calling page and return it back.

(function(){
function receiveMessage(event){
  var data = JSON.parse(event.data);
  data.value *= 2;
  event.source.postMessage(JSON.stringify(data), "*");
}

$(document).ready(function(){
  window.addEventListener("message", receiveMessage, false);
});
})();

Thursday 9 January 2014

Utilizing SPServices to Call SharePoint Search Web Service

SPServices from CodePlex provides a much simpler way to interact with SharePoint Search Web Service, as you can see from an example below. Please note that I've only requested documents from the query, if you want to return everything, remove ISDOCUMENT=true from the query.

(function () {

function querySearchService(scopeName, keywordToSearch, maxItemCount) {

keywordToSearch = keywordToSearch.trim().replace(/\s+/g, "+");

var queryText = "<QueryPacket xmlns='urn:Microsoft.Search.Query' Revision='1000'>"

queryText += "<Query>"

queryText += "<Range><StartAt>1</StartAt><Count>" + maxItemCount + "</Count></Range>"

queryText += "<Context>"

queryText += "<QueryText language='en-US' type='MSSQLFT'>"

queryText += "SELECT Title, Path, IsDocument, ContentClass, Author, Rank, Size, Description, Write FROM scope() WHERE CONTAINS ('" + keywordToSearch + "') AND \"scope\"='" + scopeName + "' AND ISDOCUMENT=true ORDER BY Rank DESC"

            queryText += "</QueryText>"
// Keyword syntax
//   queryText += "<QueryText language='en-US' type='String'>" + keywordToSearch;
//   queryText += " Scope:" + scopeName;
//   queryText += "</QueryText>";

queryText += "</Context>"

queryText += "</Query>"

queryText += "<EnableStemming>True</EnableStemming>"

queryText += "<TrimDuplicates>True</TrimDuplicates>"

queryText += "</QueryPacket>";

alert(queryText);

$().SPServices({

operation: "Query",

queryXml: queryText,

completefunc: function (xData, Status) {

$(xData.responseXML).find("QueryResult").each(function () {

var array = new Array();

alert($(this).text());

var result = $.parseXML($(this).text());//$("<XmlResult>" + $(this).text() + "</XmlResult>");

var matches = result.find("Document");

if (matches.length == 0) {

alert("Nothing Found!");

return;

}

$("#dynamic-search-results").empty();

matches.each(function () {

url = $("Properties>Property:nth-child(2)>Value", $(this)).text(); //$("Action>LinkUrl", $(this)).text();

title = $("Properties>Property:nth-child(1)>Value", $(this)).text();

$("#resultDiv").append($("<p></p>").append($("<a></a>").prop("href", url).text(title)));

});

}

});

}

$(document).ready(function () {

querySearchService("Entire Site", "SharePoint", 10);

});

})();

</script>

<title>Untitled 2</title>

</head>

<body>

</body>

</html>

Thursday 2 January 2014

Upload a File Using JavaScript by Calling _layouts/Upload.aspx Page

The technique is to build a new UI with file input element to interact with users while loading Upload.aspx within an hidden iframe. Once everything is ready, we swap our file input control with the one inside iframe, hence their ids have to be identical. This is due to the fact that the value of the file input element cannot be populated through javascript.

Please reference the source code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<%@ Page Language="C#" %>

$(document).ready(function(){

var iframe, fileInput, btnUpload;

$("#myUpload").click(function(event){

//Hide the button and show animation

$(event.target).hide();

$("#imgLoading").show();

//Set call back method

$(iframe).get(0).contentWindow.frameElement.commitPopup = function(){

window.location.reload();

};

//Swap file box with the one within iframe and then trigger the upload

var oFile = $("input[name*='InputFile'][type='file']").detach();

var parentElement = $(fileInput).parent();

var iFile = $(fileInput).detach();

$(parentElement).append(oFile);

$(btnUpload).trigger("click");

});

$("#uploadIframe").one("load", function(event){

iframe = event.target;

//Locate elements within iframe

fileInput = $("input[name*='InputFile'][type='file']", $(iframe).contents());

btnUpload = $("input[name*='btnOK']", $(iframe).contents());

//$("input[name*='InputFile'][type='file']", $(iframe).contents()).css("background-color", "red").val("hello");

});

</script>

<title>Untitled 1</title>
</head>
<body>

<p>
<input name="ctl00$PlaceHolderMain$ctl01$ctl05$InputFile" class="ms-fileinput" id="ctl00_PlaceHolderMain_ctl01_ctl05_InputFile" onfocus="ResetSpFormOnSubmitCalled();" type="file" size="35" Validators="[object HTMLSpanElement],[object HTMLSpanElement]"/>
<button id="myUpload">Upload</button>
<img id="imgLoading" src="/_layouts/images/gears_anv4.gif" border="0px;" style="display:none;" />
</p>
<p>
<iframe id="uploadIframe" src="https://Some-Site/_layouts/Upload.aspx?List={A2176B62-CF75-4A24-AB95-5491F2D6F28E}&RootFolder=&IsDlg=0" style="width:0px;height:0px;border-width:0px;">
</iframe>
</p>
</body>
</html>

Monday 7 October 2013

Upload images to SharePoint library when imputting a Picture field

Issue

In SharePoint it is very common that you use “Hyperlink or Picture” column on lists and libraries to represent a picture. Unfortunately within the default input form you can only type an URL. If you need to upload image to a SharePoint library, it will need to be done as a separate step.

Workaround

One approach involves injecting JavaScript to popup a dialog for user to upload pictures when inputting the form. In my case I’ve created a custom list with just a Title field and a Picture column called “Picture”. Open NewForm.aspx, insert a content editor and paste the following script over, assuming you already have jQuery reference ready, i.e. in your master page.

$('document').ready(function () {

$('tr[id^=Picture] td:last').append('<br/><button style="background-color:pink;" type="button" id="btnUpload">Upload Picture</button>');

$('#btnUpload').on('click', function () {

SP.UI.ModalDialog.showModalDialog({

url: L_Menu_BaseUrl + "/_layouts/RteUploadDialog.aspx?LCID=1033&Dialog=UploadImage&UseDivDialog=true",

title: "Upload a picture",

dialogReturnValueCallback: function (result, value) {

if (result == SP.UI.DialogResult.OK) {

$('input[title=Picture]').val($(value).attr('src'));

}

});

</script>

The return value from RteUploadDialog.aspx is an img tag. Thus we parse it to extract the src attribute and use it to populate the URL value of the Picture column.