Display the Properties for the Current Site and Site Collection

In this activity, you create a page that will display information about the current site and site collection. 1. Open SharePoint Designer from your Start menu. 2. Click the Open Site button. 3. When the Open Site dialog appears, enter the URL to your site in the Site name textbox and clickthe OK button. 4. If a Windows Security dialog appears, enter your username and password for the SharePoint siteand click the OK button. 5. After the site opens, select Site Pages from the Navigation bar on the left. 6. Select Page ASPX from the ribbon and modify the name of the page appropriately. 7. You can double-click the icon to open the fi le, but clicking the fi lename will open the properties ofthe page, at which point you can click the Edit button in the Ribbon or on the properties page. 8. If you are prompted to open the page in Advanced mode, choose Yes. 9. After the page is open, select Attach from the Style tab of the ribbon. Select a master page from thedrop-down list under the Attach button. 10. Click the Split tab at the bottom of the page. 11. In the code window, type the following code at the bottom of the page: <asp:Content id="Content1"runat="server" contentplaceholderid="PlaceHolderMain"> </asp:Content> 12. Select SharePoint Show Toolbox from the Insert tab on the ribbon. 13. Position the mouse cursor inside the asp:Contenttag. 14. Double-click Input (Button) in the HTML/Form Controls section of the Toolbox. 15. In the Code view, modify the new button and configure the following properties (you must add theonclick property yourself):

PROPERTY VALUE value onclick Show Site Properties SP.SOD.executeOrDelayUntilScriptLoaded(callSharePoint, sp.js');

16. Place the cursor below the newly created button and double-click div in the HTML/Tags section ofthe Toolbox. 17. Add the ID attribute to the div tag and set its value to divResults. 18. Insert the following code snippet just above the closing asp:Contenttag: <script type="text/javascript"> </script> 19. Insert the following code snippet inside the script tag: functioncallSharePoint() { } functiononSuccess(sender, args) { } functiononFailure(sender, args) { } 20. In the callSharePointfunction, insert the following code between the {} braces: var context = new SP.ClientContext.get_current(); this.site = context.get_web(); context.load(this.site); context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure)); 21. In the onSuccessfunction, insert the following code between the {} braces: var output = "Site Properties:<br/>"; output += "Title : " + this.site.get_title();

output += "<br/>" output += "URL : " + this.site.get_serverRelativeUrl(); output += "<br/>" output += "Created : " + this.site.get_created(); output += "<br/>" document.getElementById("divResults").innerHTML = output; 22. In the onFailurefunction, insert the following code between the {} braces: var output = "Call to SharePoint failed:<br/>"; output += "Error Code: " + args.get_errorCode() + "<br/>"; output += "Error Details: " + args.get_errorDetails() + "<br/>"; output += "Error Type: " + args.get_errorTypeName() + "<br/>"; output += "Error Value: " + args.get_errorValue() + "<br/>"; output += "Error Message: " + args.get_message() + "<br/>"; output += "Stack Trace: " + args.get_stackTrace() + "<br/>"; document.getElementById("divResults").innerHTML = output; 23. Save the page by clicking the Save button in the Quick Access Toolbar at the top of the screen. 24. Select Preview in Browser from the Home tab on the ribbon. 25. After the page loads in the browser, click the Show Site Properties button to test your code. Youshould see the site's title, URL, and creation date appear on the page.

Prep Work for Querying a SharePoint List In this activity, you create a Task list and populate it with data in preparation for the next activity. 1 . Open SharePoint Designer from your Start menu. 2. Click the Open Site button. 3. When the Open Site dialog appears, enter the URL to your site in the Site name textbox and clickthe OK button. 4. If a Windows Security dialog appears, enter your username and password for the SharePoint siteand click the OK button. 5. When the site opens, select Lists and Libraries from the Navigation bar on the left. 6. Select SharePoint List Tasks from the ribbon. The Create list or document library dialogappears. 7. Enter MyTasks in the Name textbox and click the OK button. After the list is created, a new tabwith the name of the newly created list appears. 8. If the new tab in Step 7 does not appear, click your list and select List Settings from the ribbon. 9. Select Preview in Browser from the ribbon. 10. After the browser opens and navigates to the new list, add the following items to the list TITLE Upgrade to Exchange 2010 Migrate intranet toSharePoint 2010 Create marketingpresentation Query a SharePoint List In this activity, you query the items in a Task list and display them on a page. 1. Open SharePoint Designer from your Start menu. 2. Click the Open Site button. PRIORITY (1) High (2) Normal (2) Normal STATUS In Progress Not Started Completed

3. When the Open Site dialog appears, enter the URL to your site in the Site name textbox and clickthe OK button. 4. If a Windows Security dialog appears, enter your username and password for the SharePoint siteand click the OK button. 5. After the site opens, select Site Pages from the Navigation bar on the left. 6. Select Page ASPX from the ribbon and modify the name of the page appropriately. 7. You can double-click the icon to open the fi le, but clicking the fi lename will open the properties ofthe page, at which point you can click the Edit button in the Ribbon or on the properties page. 8. If you are prompted to open the page in Advanced mode, choose Yes. 9. After the page is open, select Attach from the Style tab of the ribbon. Select a master page from thedrop-down list under the Attach button. 10. Click the Split tab at the bottom of the page. 11. In the code window, type the following code at the bottom of the page: <asp:Content id="Content1"runat="server" contentplaceholderid="PlaceHolderMain"> </asp:Content> 12. Select SharePoint Show Toolbox from the Insert tab on the ribbon. 13. Position the mouse cursor inside the asp:Content tag. 14. Double-click Input (Button) in the HTML/Form Controls section of the Toolbox. 15. In the Code view, modify the new button and configure the following properties (you must add theonclick property yourself):

PROPERTY VALUE value onclick Show Tasks SP.SOD.executeOrDelayUntilScriptLoaded(callSharePoint, sp.js');

16. Place the cursor below the newly created button and double-click div in the HTML/Tags section ofthe Toolbox. 17. Add the ID attribute to the div tag and set its value to divResults. 18. Insert the following code snippet just above the closing asp:Content tag: <script type="text/javascript"> </script> 19. Insert the following code snippet inside the script tag: functioncallSharePoint() { } functiononSuccess(sender, args) { } functiononFailure(sender, args) { } 20. In the callSharePoint function, insert the following code between the {} braces: var context = new SP.ClientContext.get_current(); var tasks = context.get_web().get_lists().getByTitle("MyTasks"); varcaml = "<View>" + "<Query>" + "<Where>" + "<Neq>" + "<FieldRef Name='Status'/>" + "<Value Type='Choice'>Completed</Value>" + "</Neq>" + "</Where>" + "<OrderBy>" +

"<FieldRef Name='Title' Ascending='True'/>" + "</OrderBy>" + "</Query>" + "</View>"; var query = new SP.CamlQuery(); query.set_viewXml(caml); this.results = tasks.getItems(query); context.load(this.results); context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailure)); 21. In the onSuccess function, insert the following code between the {} braces: var output = "Results:<br/>"; output += "<table>" var enumerator = this.results.getEnumerator(); output += "<tr>"; output += "<th>ID</th>"; output += "<th>Title</th>"; output += "<th>Priority</th>"; output += "<th>Status</th>"; output += "</tr>"; while (enumerator.moveNext()) { var item = enumerator.get_current(); output += "<tr>" output += "<td>" + item.get_id() + "</td>"; output += "<td>" + item.get_item("Title") + "</td>";

output += "<td>" + item.get_item("Priority") + "</td>"; output += "<td>" + item.get_item("Status") + "</td>"; output += "</tr>" } output += "</table>" document.getElementById("divResults").innerHTML = output; 22. In the onFailure function, insert the following code between the {} braces: var output = "Call to SharePoint failed:<br/>"; output += "Error Code: " + args.get_errorCode() + "<br/>"; output += "Error Details: " + args.get_errorDetails() + "<br/>"; output += "Error Type: " + args.get_errorTypeName() + "<br/>"; output += "Error Value: " + args.get_errorValue() + "<br/>"; output += "Error Message: " + args.get_message() + "<br/>"; output += "Stack Trace: " + args.get_stackTrace() + "<br/>"; document.getElementById("divResults").innerHTML = output; 23. Save the page by clicking the Save button in the Quick Access Toolbar at the top of the screen. 24. Select Preview in Browser from the Home tab on the ribbon. 25. After the page loads in the browser, click the Show Tasks button to test your code.