Latest Posts

Power Platform Interview Questions

Azure Tutorials for Beginners

Create View in SharePoint using JSOM

The example in this topic show how to use JSOM to Create View in SharePoint

You can use Content Editor or Script Editor web part on your site, put Html and JSOM (Java Script Object Model) code and that's it. You can perform any action supported by JSOM APIs

How to execute JSOM code in SharePoint?

Note: This is just a sample, you can go ahead with your implementation.
Open your Site. Create a webpart page.
Put a Content Editor Web part and a Script Editor Web part on it.

Webpart page content editor and scipt editor

I have added below Html in Content Editor webpart. You can replace MainFunction with your actual method name.
<button onclick="MainFunction();" type="button">Click me</button>
And below references in Script Editor Webpart. You can keep jQuery reference as per your need. ScriptFile.js is a JavaScript file where you can keep below function i.e. your actual logic.
<script src="https://code.jquery.com/jquery-2.2.4.js" type="text/javascript"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script src="https://MyServer/sites/SiteCollection/style library/js/ScriptFile.js"></script>
Once you are done with setting your page, click on the button and your method should get executed.

function CreateListView() {
// You can optionally specify the Site URL here to get the context
// If you don't specify the URL, the method will get the context of the current site
// var clientContext = new SP.ClientContext("http://MyServer/sites/SiteCollection");
var clientContext = new SP.ClientContext();
// Get List Object
var olistCollection = clientContext.get_web().get_lists();
var oList = olistCollection.getByTitle("List Name");
// New "ViewCreationInformation" object
var creationInfo = new SP.ViewCreationInformation();
// Code to update the display name for the view.
creationInfo.set_title("Custom View");
// If passed "true" this new view will be set as default view of the list
creationInfo.set_setAsDefaultView("false");
// You can optionally specify row limit for the view
creationInfo.set_rowLimit("15");
// Add all the fields over here with comma separated value as mentioned below
// You can mention display name or internal name of the column
var viewFields = new Array('Title', 'Notes');
creationInfo.set_viewFields(viewFields);
// Specify type of the view. Below are the options
// 1. none - The type of the list view is not specified
// 2. html - Sspecifies an HTML list view type
// 3. grid - Specifies a datasheet list view type
// 4. calendar- Specifies a calendar list view type
// 5. recurrence - Specifies a list view type that displays recurring events
// 6. chart - Specifies a chart list view type
// 7. gantt - Specifies a Gantt chart list view type
var viewType = new SP.ViewType();
creationInfo.set_viewTypeKind(viewType.chart);
// You can optionally specify a query as mentioned below.
// Create one CAML query to filter list view and mention that query below
var camlQuery = new SP.CamlQuery();
var query = "<Where><IsNotNull><FieldRef Name='Title'/></IsNotNull></Where>";
camlQuery.set_viewXml(query);
creationInfo.set_query(camlQuery);
var oListViews = oList.get_views().add(creationInfo);
//Load the client context and execute the batch
clientContext.load(oListViews);
// Execute the query to the server.
clientContext.executeQueryAsync(onsuccess, onfailed);
}
function onsuccess() {
console.log('Success');
}
function onfailed(sender, args) {
console.log('Failed' + args.get_message() + '\n' + args.get_stackTrace());
}

Similar examples using different APIs:

Thank you for reading this article. This code was tested in SharePoint 2013

We value your Feedback:

Page URL:

Name:

Name is a mandatory field

Email:

Email is a mandatory field
Email format is not corrent

Suggestion:

Suggestion is a mandatory field

Code SharePoint

Categories