I promissed I’d put up my presentation that I did at the SharePoint Saturday event on 15 October 2011.
So here it is, please feel free to ask questions:
http://dizzyonsharepoint.files.wordpress.com/2011/10/sharepoint-saturday-presentation2.pptx
Here is a basic step by step:
Open project
Create Visual Web Part
Add code to dialog
<script type=”text/javascript”>
//Dialog opening
function OpenDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = “/_layouts/SPSCPT_ModalDialog/CreateNewList.aspx”;
options.width = 500;
options.height = 400;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}
var messageId;
// Dialog callback
function CloseCallback(result, target) {
if (result === SP.UI.DialogResult.OK) {
alert(“you clicked on OK!”);
}
if (result === SP.UI.DialogResult.cancel) {
alert(“You clicked on Cancel!”);
}
}
</script>
<br />
<asp:HyperLink ID=”HyperLink1″ runat=”server” NavigateUrl=”Javascript:OpenDialog();” Text=”Open Modal Dialog”></asp:HyperLink>
You wont get a result yet, as we will need to create the page which we are pointing our url at.
Create an Application Page at the level you specified previously
PageHead:
<script type=”text/javascript”>
function BtnCreateListCancel_Click() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,’Cancelled clicked’);
}
function BtnCreateListOk_Click() {
var form = document.forms.<%SPHttpUtility.NoEncode(Form.ClientID,Response.Output);%>;
var ListNameUrl = form.<%SPHttpUtility.NoEncode(TxtListName.ClientID,Response.Output);%>.value;
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, ListNameUrl);
}
</script>
placeholdermain:
<table id=”maintable” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%” >
<table border=”0″ cellspacing=”1″>
<tr>
<td colspan=”2″ nowrap=”nowrap”>
<SharePoint:EncodedLiteral ID=”EncodedLiteral7″ runat=”server” text=”List name will be used as url and as the title” EncodeMethod=’HtmlEncode’/>:
<font size=”3″> </font><br />
</td>
</tr>
<tr>
<td dir=”ltr”>
<table>
<tr>
<td nowrap=”nowrap”colspan=”2″class=”ms-authoringcontrols”>
<asp:Label Text=”Enter list name” CssClass=”ms-input” ID=”LBLTxtListName” runat=”server” />
</td>
<td nowrap=”nowrap”colspan=”2″class=”ms-authoringcontrols”>
<asp:TextBox ID=”TxtListName” runat=”server” Width=255 />
</td>
</tr>
</table>
</td>
</tr>
</table>
<asp:placeholder ID=”Placeholder1″ runat=”server”>
<input type=”button” name=”BtnOk” id=”Button1″
value=”OK” onclick=”BtnCreateListOk_Click()” />
<SeparatorHtml>
<span id=”idSpace” />
</SeparatorHtml>
<input type=”button” name=”BtnCancel” id=”Button2″
value=”Cancel” onclick=”BtnCreateListCancel_Click()” />
</asp:PlaceHolder>
</table>
notifications:
// Dialog callback
function CloseCallback(result, target) {
if (result == SP.UI.DialogResult.OK) {
//Get id
messageId = SP.UI.Notify.addNotification(“<img src=’_layouts/images/loading.gif’> Creating list <b>” + target + “</b>…”, true, “Dialog response”, null);
//Create list using client OM
//createList(target);
}
if (result == SP.UI.DialogResult.cancel) {
SP.UI.Notify.addNotification(“Operation was cancelled…”, false, “”, null);
}
}
Un comment the createList(target); code.
Use the JavaScript OM to creat the list when OK is clicked:
//Actual JS client side object model calls
function createList(listName) {
//Create client context.
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
//Let’s create list creation information object
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title(listName);
listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
listCreationInfo.set_quickLaunchOption(SP.QuickLaunchOptions.on);
this.oList = oWebsite.get_lists().add(listCreationInfo);
//Let’s create also new item to the list to be created
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item(‘Title’, ‘Example item for ‘ + listName);
oListItem.set_item(‘Body’, ‘Hello seminar audience. From list ‘ + listName);
oListItem.update();
clientContext.load(oListItem);
clientContext.load(oList);
//Execute the actual script
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
//Called if client side OM is successful
function onQuerySucceeded() {
//Remove the ‘creating’ event notification
SP.UI.Notify.removeNotification(messageId);
//Add ‘created’ notification as non sticky
SP.UI.Notify.addNotification(“List <b>” + oList.get_title() + “</b> created…”, false, “”, null);
}
function onQueryFailed(sender, args) {
//Remove the ‘creating’ event notification
SP.UI.Notify.removeNotification(messageId);
//Shown in case of error on the JS OM call
SP.UI.Notify.addNotification(“Operation was cancelled…”, false, “”, null);
}
———————————————————————–
Notifications and status bar functionality is included in the SP.js file,
the dialog framework code is included in the SP.UI.Dialog.js file.
To get IntelliSense support in Visual Studio when writing JavaScript that targets the dialog framework, add the following reference element to the JavaScript file:
/// <reference path=”C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\SP.UI.Dialog.debug.js” />
The SP.UI.ModalDialog class is accessible through the SharePoint JavaScript file called SP.UI.Dialog.js which is located in the layouts directory.
Properties available in SP.UI.DialogOptions. Here is a list of the parameters and their use:
url: Contains the URL of the page that appears in the dialog.
html: Contains the HTML of the page that appears in the dialog. Note: if both url and html are specified, url wins. One of these must be specified.
title: Contains the title of the dialog. Optional.
args: Contains an object or other data that are passed to the dialog. Optional.
x – Contains the x-offset of the dialog. Works like the CSS left value.
y – Contains the y-offset of the dialog. Works like the CSS top value.
width – Contains the width of the dialog. The default is 768 if not specified and autosizing is disabled. If width is not specified, the width will be autosized by default. If autosizing is off, the default value is used for the width.
height – Contains the height of the dialog. The default is 576 if not specified and autosizing is disabled. If height is not specified, the height will be autosized by default. If autosizing is off, the default value is used for the height.
dialogReturnValueCallback – Contains the return callback function. The function should take two parameters–a dialogResult that is of type SP.UI.DialogResult and a returnValue that contains any data returned by the dialog.
allowMaximize – Contains a Boolean that specifies if the dialog can be maximized. When this is true, the maximize button is shown. When this is false, the maximize button is not shown.
showMaximize – Contains a Boolean that specifies if the dialog opens in a maximized state. When this is true, the dialog is maximized when opened. When this is false, the dialog is opened at (1) the requested size if specified, (2) the default size, or (3) the autosized size.
showClose – Contains a Boolean that specifies if the close button appears on the dialog.
autoSize – Contains a Boolean that specifies if the dialog platform handles the window sizing.