Hands-On LabSharePoint 2010:JavaScriptLab version: 1.0.0

Last updated: 5/21/2023

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..........................................................................................................4Task 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 1Running 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 2Opening 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 Figure3.

5

Figure 3New 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 4New 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 clientContext = new SP.ClientContext.get_current(); var web = clientContext.get_web(); var list = web.get_lists().getByTitle("CustomerComplaints"); var 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.

8

Figure 5JavaScript code added

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 6Creating the complaint page

13. Now in the complaint page type in a complaint. See Figure 7 as an example.

9

Figure 7Entering a complaint

14. Click the Submit your complaint button.

Notice that the HTML has changed in the browser. See Figure 8.

Figure 8Page 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 9Complaint item added to CustomerComplaints list

Lab SummaryIn 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