Sharepoint Online’s modern experience web parts and their quivalent classic experience web parts

SharePoint 2013 Logo

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

Get folder and files recursively in SharePoint using REST call

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>

Enable tree view in current navigation within SharePoint

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"
}

Disable ‘Allow items from this site to be downloaded to offline clients’ in SharePoint

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"
}

Sharepoint disable drag and drop

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

Open SharePoint Office documents in modal dialog

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>

 

Open SharePoint PDF documents in modal dialog

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>

 

Displaying SharePoint’s “Please wait…” or “Working on it…” dialog box

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