Hands-On Lab
SharePoint 2010:
JavaScript
Lab version:
1.0.0
Last updated:
2/8/2016
Virtual Machine Logon Details:
UserName: Administrator, Password: pass@word1
This document is provided “as-is”. Information and views expressed in this document, including
URL and other Internet Web site references, may change without notice. You bear the risk of
using it.
This document does not provide you with any legal rights to any intellectual property in any
Microsoft product. You may copy and use this document for your internal, reference purposes.
© 2011 Microsoft. All rights reserved.
CONTENTS
OVERVIEW ................................................................................................................................................... 3
EXERCISE 1: USING JAVASCRIPT ........................................................................................................... 4
Task 1 – Running setup ......................................................................................................................... 4
Task 2 – Using the JavaScript Client API................................................................................................ 4
LAB SUMMARY ........................................................................................................................................ 11
Overview
This lab will walk you through creating a page layout which uses JavaScript to respond to submission of a
complaint. A task is created in a list to deal with the submitted complaint.
Estimated time to complete this lab: 10 minutes.
Materials
This Hands-On Lab contains resources in the following folders.
Setup Files: c:\mslabs\SharePoint2010\WCM\08_JavaScript \Setup
3
Exercise 1: Using JavaScript
In this exercise, you will be using the JavaScript Client API in SharePoint to add tasks to a list from a rich
browser application.
Task 1 – Running setup
If you want to continue working from the last lab you can skip Task 1. Note that if there is any minor
difference between your environment at this point and the environment the lab expects you may have
to adapt some of the steps in this lab to compensate.
1. In the Setup folder run the install.ps1 file. You can run from a Windows PowerShell command
prompt or by right-clicking on the file in Windows Explorer and selecting Run with PowerShell.
See Figure 1.
Figure 1
Running PowerShell.
This will install a feature in the web at http://demo2010a:8080/ for this lab
Task 2 – Using the JavaScript Client API
1. Open Microsoft SharePoint Designer 2010 (SPD) by going to Start | All Programs | SharePoint
| Microsoft SharePoint Designer 2010.
2. In SPD click the Open Site button. Type http://demo2010a:8080/ for the Site Name
value. You will need to press the Open button twice. See Figure 2.
4
Figure 2
Opening site in SPD
3. Once the site is open, click on the Page Layouts node in the Site Objects toolbar on the left
hand side of the SPD window. Then click the New Page Layout button in the ribbon. See Figure
3.
5
Figure 3
New Page Layout button
4. When the New dialog appears select Publishing Content Types the selected group, and Page as
the Content Type Name.
5. Type Complaint as the URL Name and Complaint as the Title. See Figure 4.
6
Figure 4
New page layout dialog
6. Click OK to add the new page layout to your publishing site.
7. Once the page layout is added SPD will display it in the designer
8. In the code view, add the following script to the page between the asp:Content tags on line 6
and 7.
HTML
<script type="text/javascript">
var listItem = null;
function AddTask() {
var
var
var
var
clientContext = new SP.ClientContext.get_current();
web = clientContext.get_web();
list = web.get_lists().getByTitle("CustomerComplaints");
itemCreateInfo =
new SP.ListItemCreationInformation();
listItem = list.addItem(itemCreateInfo);
7
var textBox = document.getElementById("complaintText");
listItem.set_item("Title", textBox.value);
listItem.set_item("PercentComplete", 0);
listItem.update();
clientContext.executeQueryAsync(taskAdded);
}
function taskAdded() {
document.getElementById("complaintArea").style.display='none';
document.getElementById("complaintMessage").style.display = '';
}
</script>
<div id="complaintArea">
<h2>Please enter your complaint</h2>
<input type="text" id="complaintText" />
<input value="Submit your complaint" type="button" id="complaintButton"
onclick="AddTask()"/></div>
<div id="complaintMessage" style="display:none">
<h2>Thank you for submitting your complaint</h2></div>
9. Your code should now look like Figure 5.
Figure 5
JavaScript code added
8
10. Save (CTRL+S) the page layout.
11. In Internet Explorer go to the page
http://demo2010a:8080/_Layouts/CreatePage.aspx.
12. Type Complaint as the name of your new page, and pick the Complaint page layout from the
list and click Create. See Figure 6.
Figure 6
Creating the complaint page
13. Now in the complaint page type in a complaint. See Figure 7 as an example.
9
Figure 7
Entering a complaint
14. Click the Submit your complaint button.
Notice that the HTML has changed in the browser. See Figure 8.
Figure 8
Page after HTML change
The script that executes when the complaint button is clicked enters an item in the
CustomerComplaints list.
15. Navigate to
http://demo2010a:8080/Lists/CustomerComplaints/AllItems.aspx and
check that an item has been added to the list. See
10
Figure 9
Complaint item added to CustomerComplaints list
Lab Summary
In this lab, you performed the following exercises:

Created a page layout which uses JavaScript to respond to submission of a complaint.

Used SharePoint’s built in functionality to display complaint submissions in a list.
11