Bits & Pieces – A blog by Kannan Balasubramanian
For a long time I was trying to switch from Angular to React for building SharePoint Modern Web Part but was finding it difficult to start off.
The lab posted here by Andrew Connell, helps to get started.
You can also view the video below.
You can also view the lab as document from the below pdf file generated on 09 May 2019
SharePoint’s modern experience web parts is an easy and fast way to bring content to the viewer. But at the same time it’s not as configurable or as exhaustive as it is when compared to classic experience web parts.
The following URL shows some of the modern web part equivalents of classic web parts. Please note that these are not a 1:1 matching, instead they have similar functionalities.
Click here to visit “Classic and modern web part experiences” by Microsoft
A timeline depicting what happens when a data is deleted and how it can be restored?
There was a simple requirement I came across for which a page should list all the files and folders in a SharePoint document library.
I came up with a solution using ODATA call. Following is the REST call I made to get the list of all folder and files.
/_api/web/Lists/GetByTitle(‘Documents’)/Items?$select=FileLeafRef,FileRef&$orderby=FileRef asc
Following is the code which quickly prints them out in a table. Just add this code to a script editor web-part.
Please make sure the URL is updated based on your site URL.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "<site url>/_api/web/Lists/GetByTitle('Documents')/Items?$select=FileLeafRef,FileRef&$orderby=FileRef asc",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data, textStatus, xhr)
{
$.each(data.d.results, function (index, item)
{
// alert("The items in list are : " + item.FileRef);
$("#table1 tbody").append("<tr><td>" + item.FileRef + "</td></tr>");
})
},
error: function r(xhr, textStatus, errorThrown)
{
alert("error:" + JSON.stringify(xhr));
}
});
</script>
<table id="table1">
<tbody></tbody>
</table>Sometime we need to enable tree view in current navigation to help navigate within document libraries.
Traditional Way:
Site Settings -> Look and Feel: Navigation Elements -> Check ‘Enable Tree View’
Programmatic way using PnP Powershell:
try {
$web = Get-PnPWeb -Includes TreeViewEnabled
Write-Host "Setting options to enable tree view..."
$web.TreeViewEnabled = $true
$web.Update()
Invoke-PnPQuery
Write-Host "Completed."
}
catch {
$ErrorMessage = $_.Exception.Message
Write-Host "Error enabling tree view. $ErrorMessage"
}
Sometime we need to disable the “Sync” button in SharePoint document libraries and that can be done by the following methods.
Traditional Way:
Site Settings -> Search: Search and offline availability -> Set ‘Allow items from this site to be downloaded to offline clients?’ to “No”
Programmatic way using PnP Powershell:
try {
$web = Get-PnPWeb -Includes ExcludeFromOfflineClient
Write-Host "Setting options to disable 'Allow items from this site to be downloaded to offline clients'..."
$web.ExcludeFromOfflineClient = $true
$web.Update()
Invoke-PnPQuery
Write-Host "Completed."
}
catch {
$ErrorMessage = $_.Exception.Message
Write-Host "Error disabling offline clients. $ErrorMessage"
}In some scenarios we might need to disabled drag and drop in SharePoint sites.
The following code works when we need to disable a page with one document view.
Add the html code in content editor web part where the document view is there.
<style type="text/css">
/*-- Hide Drag & Drop --*/
caption.ms-dragDropAttract {
caption-side: bottom;
display: none !important;
}
</style>
<script type="text/javascript">
/*-- Stop Drag & Drop --*/
ExecuteOrDelayUntilScriptLoaded(function() {
g_uploadType = DragDropMode.NOTSUPPORTED;
SPDragDropManager.DragDropMode = DragDropMode.NOTSUPPORTED;
SPDragDropManager.DargDropMode.style.display = "none";
}, "DragDrop.js");
</script>For pages with multiple document libraries when you want to target a specific library prepend the id of the web part div and an underscore e.g. WebPartWPQ4_
#WebPartWPQ4_ms-dnd-dropbox{ display: none !important; }Source: https://sharepoint.stackexchange.com/questions/82805/how-can-i-disable-the-document-library-drag-and-drop-function
Sometimes we need Microsoft Office documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.
The following code helps in implementing this.
Note: This code only works for office documents. For pdf documents look at the previous article.
<!-- Put this code below the list view web part -->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script type="text/javascript">
$hrefVal = $("a[onclick*='return DispEx'][target!='_blank']").attr("href");
$siteUrl = _spPageContextInfo.webServerRelativeUrl;
$("a[onclick*='return DispEx'][target!='_blank']")
.removeAttr("onclick")
.attr("href", "javascript:OpenDocumentInDialogue(\"" + $siteUrl + "/_layouts/WopiFrame.aspx?action=default&sourcedoc=" + $hrefVal + "\")");
function OpenDocumentInDialogue(href) {
var o;
$("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%'></object></div>");
o = {};
o.html = $("#docTemp")[0];
o.showMaximized = true;
o.title = href.substring(href.lastIndexOf("/") + 1);
o.dialogReturnValueCallback = OpenDocumentinDlgCallback;
SP.UI.ModalDialog.showModalDialog(o);
}
function OpenDocumentinDlgCallback() {
// do something here when the dialog closes
}
</script>
Sometimes we need PDF documents to be opened in dialogs instead of SharePoint’s default behavior which is opening the document in the same window or tab.
The following code helps in implementing this.
Note: This code only works for PDF documents. For office documents look at the next article.
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("a[href$='.pdf']").each(function() {
$(this).removeAttr("onclick").attr("href", "javascript:OpenDocumentInDialogue(\"" + this.href + "\")");
});
function OpenDocumentInDialogue(href) {
var o;
$("body").append("<div id='docTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><object data='" + href + "' width='100%' height='100%' type='application/pdf' ></object></div>");
o = {};
o.html = $("#docTemp")[0];
o.showMaximized = true;
o.title = href.substring(href.lastIndexOf("/") + 1);
o.dialogReturnValueCallback = OpenDocumentInDialogueCallback;
SP.UI.ModalDialog.showModalDialog(o);
}
function OpenDocumentInDialogueCallback() {
// Do something here when the dialog closes
}
</script>
The following code helps in displaying the “Working on it…” dialog box available in SharePoint 2013 or SharePoint Online.
Before you being the background operation, call the function “RequestStarted“. Once the background operation has been completed, call the function “RequestEnded“.
function RequestEnded(sender, args) {
try {
waitDialog.close();
waitDialog = null;
} catch (ex) {}
};
function RequestStarted(sender, args) {
var waitDialog;
ExecuteOrDelayUntilScriptLoaded(ShowWaitDialog, "sp.js");
};
function ShowWaitDialog() {
try {
if (waitDialog == null) {
waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress...', 120, 440);
}
} catch (ex) {}
};Source: Sharepoint Stackexchange