Monthly Archives: May 2014

SharePoint – Auto-Fill fields using jQuery and SPServices

Hello everyone. Today I want to show you how you can use jQuery and SPServices (Javascript) to automatically fill fields of SharePoint Forms based on the current user. This can be used to reduce the time users need to fill out forms and to prevent re-entering data you already have.

Unfortunately you need to fulfill all of the following prerequisites before you can begin:

  • SharePoint Server (When you use SharePoint Server 2010 you need an Enterprise License)
  • User Profile Service Application up and running with some Profiles in it (For example: Imported from Active Directory)
  • Download jQuery
  • Download SPServices

After I downloaded all necessary scripts I created a new Document Library called “Script” and added a column (Single line of text) called “Script_Version” to store the version of the scripts (This way I can keep track of the current version and do not need to update my scripts each time a new version is published).


After that I created a new Custom List called “Test” (Not very creative I know). And I added the following columns:

  • LastName (Single line of text)
  • FirstName (Single line of text)
  • Department (Single line of text)
  • EmployeeNumber (Single line of text)
  • Manager (Person or Group)


Now you need to update the New Form of your Custom List. To edit the New Form enter the following URL into your Browser:


Now add a Content Editor Webpart to the page.


Now add a link pointing to the AutoFillFields.js to the Content Link textbox of your Content Editor Webpart and hide it so your users will not see it when the open up a New Form. When you are finished click on OK and save your work by clicking on Stop Editing.


Here is the code of the AutoFillFields.js Javascript file you need to make this example work:

<script language="javascript" src="/sites/test/Script/jquery.min.js" type="text/javascript"></script>

<script language="javascript" src="/sites/test/Script/jquery.SPServices.min.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

//Get and Set Department
var userDepartment = $().SPServices.SPGetCurrentUser({

fieldName: "Department"



//Get and Set LastName
var userLastName = $().SPServices.SPGetCurrentUser({

fieldName: "LastName"



//Get and Set FirstName
var userFirstName = $().SPServices.SPGetCurrentUser({

fieldName: "FirstName"



//Get and Set Manager (People or Group field)
var columnName = 'Manager';

var managerName;
operation: "GetUserProfileByName",
async: false,
AccountName: $().SPServices.SPGetCurrentUser(),
completefunc: function (xData, Status) {
$(xData.responseXML).find("PropertyData > Name:contains('Manager')").each(function() {
managerName = $(this).parent().find("Values").text();

var searchText = RegExp("FieldName=\"" + columnName + "\"", "gi");

$("").each(function() {

if(searchText.test($(this).html())) {
$(this).find("div[Title='People Picker']").html(managerName);
return false;

//Get and Set EmployeeNumber (Custom user property)
var employeeNumber;
operation: "GetUserProfileByName",
async: false,
AccountName: $().SPServices.SPGetCurrentUser(),
completefunc: function (xData, Status) {
$(xData.responseXML).find("PropertyData > Name:contains('EmployeeNumber')").each(function() {
employeeNumber = $(this).parent().find("Values").text();




As always you can download my script from here.

The screenshot below shows you that I have added my List as a Webpart to my default page (To show you that this script does also work when the List itself is used as a Webpart).


The next step for me was to sign in as a user who has a profile in my User Profile Store (For example: I created a user profile for Lisa Simpson). After I clicked on Add new item (and waiting for about 1-2 seconds) a New Form opened up with all fields I defined in my script already filled out.


That´s it. You now have the power to fill out fields beforehand to make your users happy 🙂



Tagged ,

SharePoint – Add Google Maps to your pages

Hello everyone. Some days ago I discovered that you can use Google Maps to visualize contact or address information on a map. Since I thought that this is pretty cool I wanted to share this information with you.

The first thing you need to do is to create a Document Library to store the Javascript file which will add Google Maps to your page. I called my Document Library “Script”. You can download the Google Maps Javascript file from here.

Before I uploaded the script I changed the following variables:

var useCoordinates = false;
var hideMapUntilClick = false;

I set those variables to false since I wanted to use address information instead of coordinates and I wanted the map to open up by default without having to enable it manually.

Now create a Contacts List. It has already all fields we need to test our Google Maps Script. I called my Contacts List “Addresses”.


Next step: Now add your Contacts List and a Content Editor Webpart to your SharePoint page.


Now you need to edit your Contacts List and choose the setting Show Toolbar. This is a necessary step for the Google Maps Javascript to make it work correctly.


Now edit your Content Editor Webpart and add the Url of your Google Maps Javascript into the textbox.


Now your SharePoint page will look like this: (Don´t worry, the map will load after you have at least created one entry in your Contacts List.)


Now we will create our first entry. You need to fill out the following fields to make it work:

  • Address
  • City
  • State/Province
  • ZIP/Postal Code
  • Country/Region

I added the address of the Stephansdom (a famous building in Austria) and the Statue of Liberty in the USA to test the Script.


Now Google Maps will show on your SharePoint page and mark your entries on the map.


That´s it. Pretty simple and cool, right? (By the way: You can download the Script I used for my example from here.)

Important note: I did not create this script. I just discovered it and wanted to share it. Please give the guy who created this script some credit for his awesome work. (For more information about this topic have a look at the sources.)


Tagged ,

SharePoint – Use Javascript to let it snow

Hi everyone. Today I want to show you that you can use Javascript to let it snow on your SharePoint websites. (I know that May isn´t the time of the year where you are thinking of snow but I will use this as an example to show you what you can do using Javascript.)

To let it snow on your SharePoint website you need do the following:

Now do the following:

  • Upload snowstorm.js to your SharePoint page (I uploaded it to a Document library called “Script”)
  • Edit the HTML Source of a Content Editor Web Part you added to your SharePoint website and add the following code:
    <script src="/sites/test/Script/snowstorm.js"></script>

That´s it. Now it will snow on your SharePoint page.


Tagged ,

SharePoint – Use Javascript

Hello everyone. Today I want to show you how to use Javascript on your SharePoint websites.

To show you how this works I created a Javascript file which applies a CSS file to a SharePoint Page. Here are my scripts:


var path = "/Style Library/Custom";
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = path + '/HideRecentlyModified.css';


display: none;

After I created those scripts I uploaded them to my SharePoint website.


Now add a Content Editor Webpart to the SharePoint Page you want to apply your Javascript file to.


Now start editing your Content Editor Webpart and click on Edit HTML Source to modify its HTML Code.


Now add the following code to the HTML Source window:

<script src="/Style Library/Custom/SwitchCSS.js"></script>


Now click on OK and save your changes. That´s it. This is all you need to do when you want to apply a Javascript file to your SharePoint pages. I hope my post was useful for you.


Tagged , ,