Skip to content

Instantly share code, notes, and snippets.

@Oceanswave

Oceanswave/ SharePoint Online Custom New Doc Set

Last active November 30, 2020 10:00
Show Gist options
  • Save Oceanswave/e0cd45e2083e51c5026117dc74d65d41 to your computer and use it in GitHub Desktop.
Save Oceanswave/e0cd45e2083e51c5026117dc74d65d41 to your computer and use it in GitHub Desktop.
Download ZIP
A custom New Document Set page (newdocset.aspx) in SharePoint Online
Raw
CustomNewDocSet.aspx
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<WebPartPages:AllowFraming runat="server" />
<head>
<title>Create a new Document Set</title>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css"/>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css"/>
<link rel="Stylesheet" type="text/css" href="/_layouts/15/1033/styles/Themable/corev15.css" />
</head>
<body style="margin: 20px;">
<SharePoint:ScriptLink Name="MicrosoftAjax.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="Core.js" runat="server" Defer="False" Localizable="false" />
<SharePoint:ScriptLink Name="SP.core.js" runat="server" Defer="False" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.runtime.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:ScriptLink Name="SP.DocumentManagement.js" runat="server" Defer="True" Localizable="false"/>
<SharePoint:ScriptLink name="clienttemplates.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientforms.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="clientpeoplepicker.js" runat="server" LoadAfterUI="true" Localizable="false" />
<SharePoint:ScriptLink name="autofill.js" runat="server" LoadAfterUI="true" Localizable="false" />
<div class="ms-fontSize-xxl">
Create a new Document Set
</div>
<hr/>
<form id="mainForm" runat="server" style="padding-top: 10px">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
<label class="ms-Label is-required">
Name
</label>
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
<div class="ms-TextField">
<input id="NewDocSetName" class="ms-TextField-field" placeholder="Please enter a name">
<span class="ms-TextField-description">The name of the new document set.</span>
</div>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
<label class="ms-Label">
Description
</label>
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
<div class="ms-TextField ms-TextField--multiline">
<textarea id="NewDocSetDescription" class="ms-TextField-field" placeholder="Please enter a description"></textarea>
<span class="ms-TextField-description">The description of the new document set.</span>
</div>
</div>
</div>
<%--
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
<label class="ms-Label">
Server-Side People Picker
</label>
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
<SharePoint:PeopleEditor ID="SdfPeoplePicker" runat="server" SelectionSet='User,SecGroup,SPGroup' />
<span class="ms-TextField-description">The person that is something something on the document set.</span>
</div>
</div>
--%>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg2">
<label class="ms-Label">
Client-Side People Picker
</label>
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg10">
<div id="personClientSide" style="height: 50px; padding-bottom: 10px;"></div>
<span class="ms-TextField-description">The person that is blah blah on the document set.</span>
<input type="button" value="Show Picked User Info" onclick="getUserInfo()"></input>
</div>
</div>
<div class="ms-Grid-row" style="padding-top: 10px;">
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg8">
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg4">
<div id="buttons">
<button id="btnCancel" class="ms-Button" type="button">Cancel</button>
<button id="btnCreate" class="ms-Button ms-Button--primary" type="button" disabled="disabled">OK</button>
</div>
<div id="waiting" style="display: none;">
Please wait...
</div>
</div>
</div>
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg8">
</div>
<div class="ms-Grid-col ms-u-sm6 ms-u-md4 ms-u-lg4">
<span id="errorMessage" class="ms-fontColor-error"></span>
</div>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.1/URI.min.js"></script>
<script>
function createDocumentSet(siteUrl, listId, docSetName, properties, success, error) {
var ctx = new SP.ClientContext(siteUrl);
var web = ctx.get_web();
var list = web.get_lists().getById(listId);
ctx.load(list);
var parentFolder = list.get_rootFolder();
ctx.load(parentFolder);
var docSetContentTypeID = "0x0120D520";
var docSetContentType = ctx.get_site().get_rootWeb().get_contentTypes().getById(docSetContentTypeID);
ctx.load(docSetContentType);
ctx.executeQueryAsync(function (){
SP.DocumentSet.DocumentSet.create(ctx, parentFolder, docSetName, docSetContentType.get_id());
var docSetFolder = web.getFolderByServerRelativeUrl(parentFolder.get_serverRelativeUrl() + '/' + docSetName);
var docSetFolderItem = docSetFolder.get_listItemAllFields();
if (properties != null) {
for (var property in properties) {
if (properties.hasOwnProperty(property) === true) {
docSetFolderItem.set_item(property, properties[property]);
}
}
}
var docSetParentList = docSetFolderItem.get_parentList();
docSetFolderItem.update();
ctx.load(docSetFolderItem);
ctx.load(docSetParentList);
ctx.executeQueryAsync(function () {
success(docSetFolderItem, docSetParentList);
}, error);
},
error);
};
function getUserInfo() {
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.personClientSide_TopSpan;
var users = peoplePicker.GetAllUserInfo();
alert(JSON.stringify(users));
};
$("#NewDocSetName").on("input", function() {
if ($("#NewDocSetName").val().length < 3) {
$("#btnCreate").attr("disabled", "disabled");
}
else {
$("#btnCreate").removeAttr("disabled");
}
});
$("#btnCreate").on("click", function() {
$("#buttons").css("display", "none");
$("#waiting").css("display", "");
$("#errorMessage").text("");
var webAbsoluteUrl = _spPageContextInfo.webAbsoluteUrl;
var name = $("#NewDocSetName").val();
var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict.personClientSide_TopSpan;
var users = peoplePicker.GetAllUserInfo();
var properties = {
DocumentSetDescription: $("#NewDocSetDescription").val()
};
if (users.length === 1) {
//TODO: Change the property "Comments" to be the name of the SP Field that holds the user data
//Might need to change the users[0][???] to be the proper data that you'd want.
properties.Comments = users[0].Key;
}
var success = function(docSetFolderItem, docSetParentList) {
var fieldValues = docSetFolderItem.get_fieldValues();
var targetUri = URIJS(webAbsoluteUrl + fieldValues.FileDirRef + "/Forms/Document%20Set/docsethomepage.aspx")
.query({
ID: fieldValues.ID,
FolderCTID: fieldValues.ContentTypeId.get_stringValue(),
List: docSetParentList.get_id(),
RootFolder: fieldValues.FileRef,
RecSrc: fieldValues.FileRef
});
window.location = targetUri.toString();
}
var error = function(sender, args) {
$("#buttons").css("display", "");
$("#waiting").css("display", "none");
$("#errorMessage").text(args.get_message());
}
createDocumentSet(webAbsoluteUrl, currentListId, name, properties, success, error);
});
var currentListId, URIJS;
$(document).ready(function() {
URIJS = URI.noConflict();
var config = {};
config['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
config['SearchPrincipalSource'] = 15;
config['ResolvePrincipalSource'] = 15;
config['AllowMultipleValues'] = false;
config['MaximumEntitySuggestions'] = 50;
config['Width'] = '280px';
// Render and initialize the picker.
SPClientPeoplePicker_InitStandaloneControlWrapper("personClientSide", null, config);
//Get the Current ListId from the query string params
var searchUri = URIJS(window.location.search);
if (searchUri.hasQuery("List")) {
currentListId = searchUri.query(true)["List"][1];
} else {
throw Error("A QueryString parameter named 'List' should contain the ListId.");
}
});
</script>
</body>
</html>
Raw
Instructions.md

Prelim: If this is the root site, ensure that scripting capabilities are enabled via this link

  1. Ensure that the Document Set Site Collection feature is enabled.
  2. Upload the CustomNewDocSet.aspx file that creates a new Document Set to any document library (SitePages/SiteAssets might be a good location)
  3. Create a new Document Library
  4. Curse at the new Document Library UI
  5. Add the Document Set Content Type to the Document Library
  6. Add a "Comments" field to the Document Library that holds the identity value from the people picker
  7. In SPD (for speed, not for distance) set the newdocset page to the uploaded file location, with a querystring param named 'List' to override SP's List= querystring handling. ><
  8. Go back to the document library, click "New" ... "Document Set" and get brought to the custom newdocumentset page.
@rgudino
Copy link

rgudino commented Nov 12, 2018

Hi,

I am getting Guid should contain 32 digits with 4 dashes (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx). error on click of OK button.
customnewdocset

Got the same issue, fixed it by removing the second index ( [1] ) in line 215:

currentListId = searchUri.query(true)["List"];

Everything works now.

@evdma
Copy link

evdma commented Nov 30, 2020

Hello,
I used this script but i am getting the following error

Sorry, something went wrong No item exists at http://192.168.189.51/sites/Test/VSDB/SitePages/TSDB.Pages/NewDocSet.aspx?List=d468510c-5bd3-4c2f-9319-e79132383231&Source=http://192.168.189.51/sites/Test/VSDB/Validation%2520Standards/Forms/All%2520Documents.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage&ContentTypeId=0x0120D52000A58C3F7E2762EF4DBCD41C45E2359DAA00639754CD1C659B4591186FD730F8A2F6&RootFolder=/sites/Test/VSDB/Validation Standards. It may have been deleted or renamed by another user.

I am trying to create a custom doc set form for SP2013. what is the thing i am doing wrong here. Please comment.

Thanks
Manish

I've got the same issue and fixed it adding in SPD link to newdocset page with queryparam List="" e.g.
/sites/mySite/SiteAssets/CustomNewDocSet.aspx?List="".

Also, important is to leave the second index ([1]) in line 215:
currentListId = searchUri.query(true)["List"][1];.

Then everything will work fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment