Exercise 1: Build a List Maintenance Web Page

Task 1 – Manipulate List Data Using the JavaScript Client Object Model

In this task, you will build a simple ASPX page that will be used to add items to the Billable Time list.

1. Launch Visual Studio 2010 and open the lab project by clicking File >> Open >> Project\Solution...
2. Browse to C:\%Office365TrainingKit%\Labs\4.2\Source\Before\AddTimeEntryJS.sln and open the solution.

3. Expand CustomPages and open Elements.xml.

   CustomPages contains two items: a minified version of jQuery 1.4.2, and an ASPX page which you will use to add items to the Billable Time list.

4. Open AddTimeEntryJS.aspx.

   AddTimeEntryJS.aspx is a simple ASPX page that uses the default SharePoint master page in order to maintain a look and feel consistent with the rest of the site. The page contains a simple HTML form to add items to the Billable Time list.

5. Locate the following line of code in AddTimeEntryJS.aspx:

   ASPX

   <SharePoint:ScriptLink ID="scriptlink1" runat="server"/>
   Note:

   The ScriptLink control is used to include SharePoint JavaScript files in the page. You can instruct the control to include a specific JavaScript file by specifying it in the name attribute of the control. If the name of the JavaScript file is not specified in the ScriptLink control, all the necessary SharePoint JavaScript files are loaded with the page - you can see which files are loaded by examining the page using the Internet Explorer Developer Tools.

   The appropriate JavaScript files are now included with the page, allowing you to reference the SP namespace from JavaScript code.

6. Locate the following line of code in AddTimeEntryJS.aspx:

   ASPX

   <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

   This code references the jQuery library using a script include. In a production application, multiple pages in the site might be using the jQuery library. You can store it in the site collection’s Site Assets library and reference it with a ScriptLink control.

7. Locate //TODO: 4.2.1 in AddTimeEntryJS.aspx and add the following code after the comment:

   (Toolbox code snippet 4.2.1)

   JavaScript

   function ExecClientOM() { //Get a client context var context = new SP.ClientContext.get_current(); //Load the current site (SPWeb) var billableTime = context.get_web().get_lists().getByTitle('Billable Time'); //Create a new list item var itemCreateInfo = new SP.ListItemCreationInformation(); this.newItem = billableTime.addItem(itemCreateInfo); //Populate the list item's values this.newItem.set_item('Hours', $('#Hours').val()); this.newItem.set_item('BillableDate', new Date($('#BillableDate').val())); this.newItem.set_item('Task', $('#Task').val()); this.newItem.set_item('Employee', $('#Employee').val()); this.newItem.set_item('BillableDescription', $('#Description').val()); this.newItem.update(); //Execute the actions context.executeQueryAsync( Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onError)); }

   The code gets the context to the current SharePoint site, and then gets a reference to the Billable Time list. The SP.ListItemCreationInformation method is used to create a new SharePoint ListItem and specify its properties.

   Finally, call executeQueryAsync to create the new item. executeQueryAsync requires that you provide a JavaScript delegate to execute on success or failure.

8. Locate the following line of code in AddTimeEntryJS.aspx:

   ASPX

   <input id="Save" type="button" value="Save" />

   The Save button needs to be wired up to call the ExecClientOM function when it is clicked.

9. Add an onclick handler to the Save input control to call ExecClientOM:

   (Toolbox code snippet 4.2.2)

   ASPX

   <input id="Save" type="button" onclick="ExecClientOM()" value="Save" />
10. Save your changes.

Task 2 – Test the Billable Time List Entry Page

In this task, you will test the AddTimeEntryJS.aspx page to add items to the Billable Time list.

1. In the Solution Explorer window, open the properties of the AddTimeEntryJS project and verify that the Site URL is set to the Url of your Lab04 site, e.g., https://intranet.contoso.com/Lab04.
2. Press F5 to build and deploy the project.

3. In Internet Explorer, navigate to the AddTimeEntryJS.aspx page, e.g. https://intranet.contoso.com/Lab04/SitePages/AddTimeEntryJS.aspx.

4. Create a time entry.

5. Click Save to save the entry.
6. The dialog window appears to confirm that the entry was saved successfully.
7. Browse to the Billable Time list by clicking the Quick Launch link.

8. You can see the new entry that was just added:

9. Close Internet Explorer.