Create a New List - Custom SharePoint Solutions with HTML and JavaScript In this book, you ll l

In this example, we’ll create a new list. We won’t do anything fancy, just create a new list and set its title.

HTML

Create a new HTML file in Visual Studio and name it JSOMCreateList.html. The HTML for this example is a little more complex than the previous example, and it consists of the following lines:

<div>

<strong>Enter a name for the list:</strong>

</div>

Just as before, we need to load in the sp.runtime.js and sp.js files, as well as a reference to our custom JavaScript file. The HTML is a little more complex, with several elements on the page. First, there is some simple text wrapped in a <strong> tag to make it bold on the page. Next, there is an INPUT of type Text that is just a simple textbox for the user to input the name of the list that they wish to create. There is a button for the user to submit the new list request and, finally, a DIV where we can output the results of the list creation. Each element has an ID so that we can easily target it with jQuery.

Figure 8-3. Get List Data results in the Content Editor Web Part

ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel

Note

■

in order to create a new list via JSOM, the user executing the code must have at least Manage lists permissions in Sharepoint. The page will be rendered no matter the permission level; however, Sharepoint will throw an error if the user does not have adequate permissions.

JavaScript

Create a new JavaScript file in Visual Studio and name it JSOMCreateList.js. In comparison, the JavaScript file is more complex, and it consists of the following lines:

$(function () { bindButtonClick();

});

function bindButtonClick() {

$("#btnSubmitListName").on("click", function () { var listName = $("#txtListName").val();

createList(listName);

});

}

function createList(listName) {

var clientContext = new SP.ClientContext();

var oWebsite = clientContext.get_web();

var listCreationInfo = new SP.ListCreationInformation();

listCreationInfo.set_title(listName);

listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

this.oList = oWebsite.get_lists().add(listCreationInfo);

clientContext.load(oList);

clientContext.executeQueryAsync(

Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

}

function onQuerySucceeded() {

var results = oList.get_title() + ' successfully created!';

$("#divCreateListResults").html(results);

}

function onQueryFailed(sender, args) {

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

}

ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel

In this example, we don’t need to fire any actions on the page load; however, we do need to wire up a button click event when the page loads. In the Document.ready function, we fire the bindButtonClick function. In this function, we use the jQuery on operator to wire a click event on the btnSubmitListName button in the HTML. When the user clicks the button, we grab the text from the textbox on the page and pass it to the createList() function using the following lines:

function bindButtonClick() {

$("#btnSubmitListName").on("click", function () { var listName = $("#txtListName").val();

createList(listName);

});

}

The createList() function takes a variable called listName, which is the text the user inputs on the page.

Next, we grab a reference to the current client context and get the current web. Then, we create the list using the following code:

In order to create a new list, we use an SP.ListCreationInformation() object. We can instantiate a new ListCreationInformation object using the following line:

var listCreationInfo = new SP.ListCreationInformation();

All this line does is create a new object and assign it a new variable called listCreationInfo. Next, we set the title and template using the following lines:

listCreationInfo.set_title(listName);

listCreationInfo.set_templateType(SP.ListTemplateType.genericList);

The set_title method takes the listName that was passed into the function. The set_templateType method takes a built-in value of SP.ListTemplateType, which, in this case, we pass in genericList. The available values here would be anything you would expect to see if creating the list in the browser using the SharePoint UI, IE: Announcements, Calendar, Task, and so forth. Next, we add the list to the web using the following line:

this.oList = oWebsite.get_lists().add(listCreationInfo);

clientContext.load(oList);

Just like in the previous example, after we add the list to the site, we then “load” the list to the client context. Finally, we call the executeQueryAsync function, which will actually make the call to SharePoint to create the list. Once the call is completed, we process the results with the following function:

function onQuerySucceeded() {

var results = oList.get_title() + ' successfully created!';

$("#divCreateListResults").html(results);

}

ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel In this function, using the oList.get_title() method, we can get the title of the list that was just created. This is a nice check to ensure that the list was indeed created, since we get the title from the list itself rather than using the text that the user inputted. Once we have the list title, we use jQuery to add the success message to the divCreateListResults DIV on the page.

Results

Set the Content Link property of the Content Editor Web Part to the HTML file and save the page. The page will now show the textbox and button for the user to input a new list name. Type My Custom List and then click the Submit button. The results will display the success message, as shown in Figure 8-4.

Figure 8-4. Create new list code after it has been run

Figure 8-5. The new list as displayed in the left navigation pane

Since this is all done using JavaScript and AJAX the list will get created and the user will be notified as expected. However, the left navigation on the page will not be updated since the page has not been refreshed. You could absolutely change this code to refresh the page on success, but for this example we’ll simply refresh the page in the browser. Figure 8-5 shows the page after a refresh where the new list is displayed in the left navigation.

ChapTer 8 ■ WOrKing WiTh The JavaSCripT ObJeCT MOdel

In document Custom SharePoint Solutions with HTML and JavaScript In this book, you ll learn to: SOURCE CODE ONLINE (Page 146-150)