In this blog post I want to show you how to get a better user experience for your document set properties.
The default one isn’t that fancy in my opinion and also if I want to show a lot of properties it even becomes worse.
After you finished the following steps you should have a output like this:
First create a standard document set with e.G. two addional document set properties. In this post I used category and company.
After creating the document set you should have the output like in the first picture.
Now we want to get all the needed properties and display them instead of the normal view. Therefore you have to edit the page (Now you are editing the welcome page for all document sets of this content type) and add a script editor to the page.
Now edit the source, paste the script and save everything.
<script src="/_catalogs/masterpage/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Rest URL
var requestUri = "http://sp13/englishtest/_api/lists/getbytitle('Documents')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function (data) {
$.each(data.d.results, function (i, item){
var title = item.Title;
var description = item.DocumentSetDescription;
var company = item.Company;
var category = item.Category;
document.getElementById("head").innerHTML = title;
document.getElementById("headcontent").innerHTML = "<table><tr><td>Description: </td><td>\u00A0 \u00A0" + description + "</td></tr></table>";
document.getElementById("companyContent").innerHTML = "<table><tr><td>" + company + "</td></tr></table>";
document.getElementById("categoryContent").innerHTML = "<table><tr><td>" + category + "</td></tr></table>";
})
},
error: function () {
alert("Error getting document set properties");
}
});
});
</script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="accordion">
<h3 id="head"></h3>
<div id="headcontent">
</div>
<h3>Company</h3>
<div id="companyContent">
</div>
<h3>Category</h3>
<div id="categoryContent">
</div>
</div>
</body>
Now you should see above your document set properties the collapsed list view. If everything is alright go back into the edit mode of the document sets welcome page and delete the standard web part.
That’s it. You have now a much more readable view for the document set properties you want. Also you can now categorize the properties and display them in the collapsed style.
I hope you like this blog post. If so, please share it in your social networks and follow me on Twitter or Facebook. Do you want to see a YouTube channel? Please comment below and me know.