SharePoint 2010 in RTM!

The SharePoint team has blog the best news ever! SharePoint 2010 reaches RTM!

SharePint!

Remember #SharePint the 22nd of April @ http://bit.ly/459dLn 18 o’clock #SPBG #in

Playing around with the ModalDialog framework

I played a bit around with the SharePoint 2010 modal dialog framework. My idea was to create a popup box where I could change the current webs title, both in the HTML DOM and persist the new title by updating the SPWeb.Title property. The first thing I needed was a link (a tag) that called some JavaScript that would create the popup window. So my link look like this <a href="javascript:createPop();" accesskey="a">createPop</a>. Just a normal link to execute a JavaScript function. The function call is creating a new JavaScript object of the type SP.UI.DialogOptions.

function createPop()
{
var options = {
url: '/SitePages/renameWeb.aspx',
tite: 'Rename current web',
allowMaximize: false,
showClose: true,
width: 800,
height: 600,
dialogReturnValueCallback: CloseCallback };
SP.UI.ModalDialog.showModalDialog(options);
}

I set the respective property and call SP.UI.ModalDialog.showModalDialog http://msdn.microsoft.com/en-us/library/ff410058(office.14).aspx. One of the things to be aware of is the value of dialogReturnValueCallback property, the value is the name of the function that will be called after the popup window is closed.

CloseCallback looks like this:
function CloseCallback(dialogResult, returnValue)
{
alert('dialogResult ' + dialogResult + '\nreturnValue ' + returnValue);

if(dialogResult == SP.UI.DialogResult.OK)´
{
SP.UI.Notify.addNotification('You clicked OK or save');
document.title = returnValue;
}

if(dialogResult == SP.UI.DialogResult.cancel)
SP.UI.Notify.addNotification('You clicked cancel!');
}

The function takes two arguments, first argument is the result of the "submit" dialog box e.g. If the dialog box is submitted with an OK or Cancel. The second argument is the result value, in my example the new title of the web.
But the real magic is on the page that is call by createPop().
On the renameWeb.aspx there is one textbox and three buttons.

<div>
<input type="text" id="newWebTitle" accesskey="t" />
<input type="button" value="Save" accesskey="o" onclick="updateTitle();"/>
<input type="button" value="Show current web info" accesskey="i" onclick="getWebProperties();"/>
<input value="Close" accesskey="c" onclick="ClosePopup();" name="close" title="Close" type="button" />
</div>

The first button is the submit button, that calls the JavaScript function updateTitle();

function updateTitle() {
var ctx = new SP.ClientContext.get_current();
this.web = ctx.get_web();
web.set_title(document.getElementById('newWebTitle').value);
this.web.update();
ctx.executeQueryAsync(Function.createDelegate(this, this.onUpdate), Function.createDelegate(this, this.onFail));
}

This function create a new ClientContext object http://msdn.microsoft.com/en-us/library/ff408569(office.14).aspx and a new web (server site SPWeb) object http://msdn.microsoft.com/en-us/library/ee550397(office.14).aspx , then set the title property of the web and call the update method. Last the function calls the executeQueryAsync http://msdn.microsoft.com/en-us/library/ff411085(office.14).aspx method on the context object to execute the batch that has build up. If the executeQueryAsync is executed without errors the onUpdate function is called.

function onUpdate(sender, args) {
alert('title updated');
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, document.getElementById('newWebTitle').value);
}

This function makes an alert message and then calls the commonModalDialogClose metode http://msdn.microsoft.com/en-us/library/ff409682(office.14).aspx, the first parameter is an enum http://msdn.microsoft.com/en-us/library/ff409060(office.14).aspx and the second parameter is the value to return. In this example the value from the textbox.

When the middle button is clicked the function getWebProperties is called. This function creates a ClientConext from the current web and if it loads without errors then the function onSuccess is called.

function getWebProperties() {
var ctx = new SP.ClientContext.get_current();
this.web = ctx.get_web();
ctx.load(this.web);
ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
}

This function shows an alert box with the current webs info.

function onSuccess(sender, args) {
alert('web title:' + this.web.get_title() + '\n ID:' + this.web.get_id() + '\n Created Date:' + this.web.get_created());
}

The last button calls the ClosePopup function. This function calls the commonModalDialogClose function.

function ClosePopup()
{
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancelled clicked');
}

function onFail(sender, args) {
alert('failed to get list. Error:'+args.get_message());
}