Create different views for subfolders in a SharePoint library using JavaScript.

Question

I have created a need standards library and the ask included creating different views for the subfolders.

I was able to create two views, one at the root level and one at the first folder level, but haven't been successful beyond that.

I have read some articles talking about using Javascript to accomplish this but am not sure how or if it is really possible to do this.

Any insight would be greatly appreciated!

Thanks!

Answer 1

Hi @Nicole Junk,

Per my test, JSOM can only create view for list and library level currently. I can create a view for library by following code but unable to create view for a subfolder.

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());
}

If all you want is to show different view at the root and inside folder. You can use Per-location view defaults as a workaround. Please refer to following article

https://camerondwyer.com/2014/01/06/harness-sharepoint-default-views-at-different-navigation-hierarchy-levels-to-build-more-appealing-solutions/

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.