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).

sharepoint_auto_fill_scripts_library

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)

sharepoint_auto_fill_test_library

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

http://<SharePoint-Site>/Lists/listname/NewForm.aspx?PageView=Shared&ToolPaneView=2

Now add a Content Editor Webpart to the page.

sharepoint_add_script_to_new_form

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.

sharepoint_add_script_to_new_form_content_editor

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"

});

$("input[Title='Department']").val(userDepartment);

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

fieldName: "LastName"

});

$("input[Title='LastName']").val(userLastName);

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

fieldName: "FirstName"

});

$("input[Title='FirstName']").val(userFirstName);

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

var managerName;
$().SPServices({
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");

$("td.ms-formbody").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;
$().SPServices({
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();
});
}
});

$("input[Title='EmployeeNumber']").val(employeeNumber);

});

</script>

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).

sharepoint_auto_fill_fields_page

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.

sharepoint_new_form_auto_filled_fields

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

Sources:

http://www.dhirendrayadav.com/2010/08/modify-newformaspx-and-editformaspx-add.html

http://sympmarc.com/2010/03/16/set-a-people-pickers-value-on-a-form-revisited-with-jquery/

http://sympmarc.com/2010/10/29/capturing-the-current-users-manager-in-moss-using-spservices-and-getuserprofilebyname/

http://basquang.wordpress.com/2010/09/21/spservices-using-jquery-to-auto-fill-current-user-information-in-sharepoint-2010/

 

Advertisements
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”.

sharepoint_create_contacts_list

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

sharepoint_add_webparts_googlemaps

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.

sharepoint_contacts_list_show_toolbar

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

sharepoint_add_link_content_editor_googlemaps_script

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.)

sharepoint_googlemaps_webparts_ready

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.

sharepoint_contacts_list_add_address

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

sharepoint_googlemaps_finished

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.)

Sources:

http://www.youtube.com/watch?v=fVmsAFqqo5g

http://spgooglemapswpforspl.codeplex.com/

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.

Sources:

http://www.schillmania.com/projects/snowstorm/

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:

Javascript:

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

CSS:

.s4-recentchanges
{
display: none;
}

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

sharepoint_styles_library_scripts

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.

sharepoint_content_editor_webpart_edit_html_source

Now add the following code to the HTML Source window:

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

sharepoint_html_source_javascript_path

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.

Sources:

http://www.codeproject.com/Articles/591062/How-to-add-JavaScript-and-CSS-f

http://www.codeproject.com/Tips/493775/Apply-CSS-styles-to-SharePoint-Web-parts

http://techtrainingnotes.blogspot.co.at/2012/05/adding-javascript-and-css-to-sharepoint.html

Tagged , ,