Open VS 2010
Create new SharePoint project select blank solution.
Name it: ClientOMUIActions
Add Visual Web part, name it: UIDemo
Open UIDemoUserControl.ascx file
Add below code in ascx page source side
<script type="text/javascript">
// //Dialog opening without create List
function OpenDialog1() {
//// // 1st way to open
// //Using the DialogOptions class.
// var options = SP.UI.$create_DialogOptions();
// options.title = "My Dialog Title 1";
// options.width = 400;
// options.height = 600;
// options.url = "/_layouts/ClientOMUIActions/ListCreationPage.aspx";
// SP.UI.ModalDialog.showModalDialog(options);
// 2nd way to open
//Using a generic object.
var options = {
title: "My Dialog Title 2",
width: 400,
height: 600,
url: "/_layouts/ClientOMUIActions/ListCreationPage.aspx"
};
SP.UI.ModalDialog.showModalDialog(options);
}
//Dialog opening -With Create List
function OpenDialog() {
var options = SP.UI.$create_DialogOptions();
options.url = "/_layouts/ClientOMUIActions/ListCreationPage.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("OK was clicked!");
}
if (result === SP.UI.DialogResult.cancel) {
alert("Cancel was clicked!");
}
}
// 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);
}
}
//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 Welcome to Demo. 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);
}
</script>
<br />
<a href="Javascript:OpenDialog();">Create List</a>
Add new item for solution
Select Application page
Name it: ListCreationPage.aspx
Update your application page with below code
<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="/_layouts/SP.js"></script>
<script type="text/javascript" src="/_layouts/SP.debug.js"></script>
<script type="text/javascript" src="/_layouts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/SP.Core.js"></script>
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<script language="javascript" 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>
<asp:Label Text="Enter List Name" runat="server"></asp:Label>
<asp:TextBox ID="TxtListName" runat="server"></asp:TextBox>
<asp:Button ID="BtnOk" runat="server" Text="OK" OnClientClick="BtnCreateListOk_Click()" />
<asp:Button ID="BtnCancel" runat="server" Text="Cancel" OnClientClick="BtnCreateListCancel_Click()" />
</asp:Content>
<asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
Application Page
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea"
runat="server">
My Application Page
</asp:Content>
Deploy the solution
Open SharePoint site
Insert Visual webpart
You will able to see “Create List” link
Click on the link
New window will open
Enter any name
Click OK
New list will create in SharePoint with given name
You can see new list in the quick launch under Lists
SharePoint Client Object Model Create List Using JavaScript
