JavaScript Used in Session 740: Extending Rapid Development Tools with JavaScript

Becky Goldberg

Epoch Time

Set Lectora variable (_today) to the current Epoch time:

Var_today.set(Math.round(new Date().getTime() / 1000))

Browser Size

Determine browser height & width. Last two lines of code set two Lectora variables (_browserWidth and _browserHeight) with the respective width and height.

script

functionbrowserSize() {

varmyWidth = 0, myHeight = 0;

if(typeof( window.innerWidth ) == 'number' ) {

//Non-IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

} else if(document.documentElement & ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

} else if(document.body & ( document.body.clientWidth || document.body.clientHeight ) ) {

//IE 4 compatible

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

Var_browserWidth.set(myWidth)

Var_browserHeight.set(myHeight)

}

</script>

Script explained (just enough to troubleshoot):

Line 1: names the function “browserSize”

Line 2: defines JavaScript variables for width and height, with initial values of 0.

Line 3: determines if the width can be retrieved from the window property.

Line 4: code note*

Line 5-6: captures window width & height in JavaScript variables using window property.

Line 7-9: determines if the width can be determined using the documentElement property.

Line 10: code note*

Line 11-12: captures window width & height in JavaScript variables using documentElement property.

Line13-14: determines if width can be determined using the body property.

Line 15: code note*

Line 16-17: captures window width & height in JavaScript variables using body property.

Line 18: closes clause.

Line 19 & 20: captures value of JavaScript height & width variables in Lectora variables.

Line 21: closes the browserSize function.

* Anything following two forward slashes in JavaScript is a code note. Put anything you want after two slashes on a single line so future developers know what’s going on in your code.

JQuery & SPServices

Include this script in the Head of your web page to leverage jQuery:

script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"</script>

Include this script in the Head of your web page to leverage SPServices:

script src="

To send information to SharePoint (change the highlighted values):

$().SPServices({

operation:"UpdateListItems",

async:false,

batchCmd:"New",

listName:"listName",

valuepairs:[

["ColumnTitle1", value],

["ColumnTitle2", "string value"],

["ColumnTitle3", VarEntry_0009.value]

]

});

Script explained (just enough to troubleshoot):

Line 1: tells the browser you’re using SPServices

Line 2: identifies the operation in SPServices you’re using

Line 3: tells the browser not to wait for a response when the call to SharePoint is sent

Line 4: tells the browser what command to use

Line 5: Identifies the list name – this is your list’s name in SharePoint. Tip: Try to avoid special characters and spaces, if possible, when naming the SharePoint List.

Line 6: Opens the value pairs

Lines 7-9: Value pairs. The first value in each value pair is the column title the data should go in*; Then a comma; Then the value that should populate that column for this entry. Use double-quotes for strings. Target the value property of Lectora objects (the variable in the sample is a text entry box). Comma between value pairs, no comma at the end of the last value pair.

Line 10: closes the value pairs

Line 11: tells the browser you’re done with SPServices (closes everything)

* Tip: sort your list by column, then look at the URL for the column title. Avoid special characters and spaces, where possible.