How to: Use the Time Card Sample

  • Article

The Microsoft Office Live Time Card code sample demonstrates one way that you can use Office Live Small Business Web services to extend the functionality of an Office Live Small Business application.

The Time Card sample, which uses Project Manager, provides the functionality to track time by project task. It uses Web services provided by Windows SharePoint Services 3.0 and data from the Project Tasks list in Project Manager to populate the list of project tasks available for time tracking.

There are three files included with this sample package that contain functions used in the Time Card example:

  • tasktimer.js
  • timecard.js
  • olsharedlibv1.js

Look at the End Result

The best way to understand the functionality provided by this sample code is to install it in an Office Live Small Business application. The download is an executable file that contains a combination of files. One of these files is a sample page that contains a Web Part that displays the time card, so that you can quickly see the results of installing the code.

To download and install the Time Card code sample, do the following:

  1. Go to the Microsoft Download Center.
  2. Click OfficeLiveTimeCard.exe to install the Time Card files to the following location: C:\Microsoft Office Live Developer Resources\Time Card Sample.
  3. Upload the files to a document library in a business application. For example, you can upload the files to the Documents library of Document Manager.
  4. In the library, click samplepage.

The Sample Web page opens, with a Page Viewer Web Part that is configured to display the Time Card. Employees can use the Time Card to select a project task and then click Punch In to track the time they are currently spending on that task. The total time spent on each task is stored, so that the next time an employee opens the Time Card, the time tracked so far on the task appears in the Time spent on task field.

Accessing Office Live Small Business Data

The Time Card code sample uses a Web service provided by Windows SharePoint Services to collect the names of the tasks in the Project Tasks list in Project Manager. More specifically, the getTasks function in timecard.js uses a Web service call to populate the Project Tasks field in the Time Card user interface. The getTasks function also uses a Microsoft JScript function included in this code sample in the common JScript file olsharedlibv1.js to package the SOAP requests needed to talk to the Web service.

Syntax

function getTasks()

The getTasks function calls the getAllListItems function that is included in olsharedlibv1.js. This function packages the SOAP request.

Syntax

WssSoap.prototype.getAllListItems = function(strListName, vFields, fCallback)

Parameters

Name Required/Optional Data Type Description
strListName Required string Name of the source list.
vFields Required string[] Array of field names to retrieve for each item in the list.
fCallback Required string Callback function to execute on completion.

The Office Live Small Business list name passed to this function is site specific. In this sample, we're using the Project Tasks list in the Project Manager application.

Example

JScript 
  g_oWssSoap.getAllListItems( TimeCardResources.LISTNAME_TASKS, 
                             new Array("ID", "Title"), onGetTaskResults);

The Time Card Functionality

Capturing Elapsed Time

After the Project Tasks list has been populated, employees can select the project task they want to time. When a user clicks Punch In, a TaskTimer object is instantiated. The code for this object and its methods are in tasktimer.js.

Recording and Storing Time Records

When you run the Time Card code sample, an Office Live Small Business list named TimeCard is created and initialized by the createTimerList and the initializeTimerList functions of the TaskTimer object. This list is created to store time record items.

To view the TimeCard list in Project Manager, on the actions bar, click the arrow next to More, and then click TimeCard. This list is not intended to be viewed by a Time Card end user, and would normally be hidden.

An item is added to this list for each time recording session. This time record item is:

  • Created when the user clicks Punch In
  • Modified when the user clicks Punch Out

The duration is calculated by taking the difference between the created and modified time of the list item. The total duration for a task is calculated by summing the durations of all list items associated with a particular task.

TaskTimer Methods

The table below summarizes the main methods available for a TaskTimer object.

Method Functionality Provided
startTimer Starts the timer for the selected task and then executes the function passed as parameter.
stopTimer Stops the timer and then executes the function passed as parameter.
createTimerList Creates a list to store time records.
initialTimerList Initializes the list to store time records.
getCurrentDuration Returns the difference between the created and modified time of the current TaskTimer.
getTotalDuration Returns the sum of the durations of all list items associated with a particular task.
switchTask Stops the timer and switches to a different task for the timer.
constructTaskQuery Constructs the query for timer items associated with the selected task.