Materials



Hands-On LabSharePoint 2010:JavaScriptLab version: 1.0.0Last updated: DATE \@ "M/d/yyyy" 7/18/2011Virtual Machine Logon Details:UserName: Administrator, Password: pass@word1This 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 TOC \o "1-2" \h \z \t "pp Procedure Start,3,pp Topic,1" Overview PAGEREF _Toc298742577 \h 3Exercise 1: Using JavaScript PAGEREF _Toc298742578 \h 4Task 1 – Running setup PAGEREF _Toc298742579 \h 4Task 2 – Using the JavaScript Client API PAGEREF _Toc298742580 \h 4Lab Summary PAGEREF _Toc298742581 \h 11OverviewThis 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.MaterialsThis Hands-On Lab contains resources in the following folders. Setup Files: c:\mslabs\SharePoint2010\WCM\08_JavaScript \Setup Exercise 1: Using JavaScriptIn 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 setupIf 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. 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 REF _Ref286835622 \h Figure 1.Figure SEQ Figure \* ARABIC 1Running PowerShell.This will install a feature in the web at for this labTask 2 – Using the JavaScript Client APIOpen Microsoft SharePoint Designer 2010 (SPD) by going to Start | All Programs | SharePoint | Microsoft SharePoint Designer 2010.In SPD click the Open Site button. Type for the Site Name value. You will need to press the Open button twice. See REF _Ref284336827 \h Figure 2.Figure SEQ Figure \* ARABIC 2Opening site in SPDOnce 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 REF _Ref284334486 \h Figure 3.Figure SEQ Figure \* ARABIC 3New Page Layout buttonWhen the New dialog appears select Publishing Content Types the selected group, and Page as the Content Type Name. Type Complaint as the URL Name and Complaint as the Title. See REF _Ref284334670 \h Figure 4.Figure SEQ Figure \* ARABIC 4New page layout dialogClick OK to add the new page layout to your publishing site.Once the page layout is added SPD will display it in the designerIn 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); 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>Your code should now look like REF _Ref284791265 \h Figure 5.Figure SEQ Figure \* ARABIC 5JavaScript code addedSave (CTRL+S) the page layout.In Internet Explorer go to the page Complaint as the name of your new page, and pick the Complaint page layout from the list and click Create. See REF _Ref284791363 \h Figure 6.Figure SEQ Figure \* ARABIC 6Creating the complaint pageNow in the complaint page type in a complaint. See REF _Ref284791559 \h Figure 7 as an example.Figure SEQ Figure \* ARABIC 7Entering a complaintClick the Submit your complaint button. Notice that the HTML has changed in the browser. See REF _Ref284791664 \h Figure 8.Figure SEQ Figure \* ARABIC 8Page after HTML changeThe script that executes when the complaint button is clicked enters an item in the CustomerComplaints list. Navigate to and check that an item has been added to the list. See Figure 9Complaint item added to CustomerComplaints listLab 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. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download