Sharepoint Modern UI vs Classic UI

With the launch of modern UI in 2016, Microsoft launches a new interface, called Modern UI, on the enterprise solution SharePoint, that is progressively updated. It is natively web responsive for mobile/tablet.

Modern UI for SharePoint lists and libraries in Office 365 can be quite confusing at first and create headaches for users used to the “old UI” known as “classic UI” when they use libraries and lists.

This article contains 3 different chapters, helping you to understand what and where are your usual actions on this new UI:

• Features only available on Modern UI
• Features only available on Classic UI
• Features on both experience (achieved in different ways)

Make sure you like the video on youtube and subscribe to the channel if you appreciate it 🙂

So let’s have a tour to compare how to do things in modern UI, the same way you were doing back on SharePoint 2013/2016 :

Features only available on Modern UI

1. Activity Feed
   
2. Add files as links instead of copying them between sites.
   Add a link in a library, to point to another resource
   
3. Move to, Copy to
   Those actions would be possible in classic UI using Explorer view. Really less convenient.
4. Easily act on column/views – Create columns in few clicks
   
   
5. Easily act on column/views – Group views easily
   
6. Fill automatically multiple metadata based on a grouped view, when dragging/dropping to the relevant grouped area
   
7. Attention view (get notified for required metadata)
   ( Jeff Angama CollabMania Blog –  More detail on this Associated article)
   
8. Column formatting for SharePoint libraries and list, by JSON / SPFX (blogged about it before)
   (Jeff ANGAMA CollabMania Blog – More detail on this Associated Article)
9. Flow
   the way to automatically process. As SharePoint workflow would do
10. Power Apps
    Create multi-platform apps
11. Pin documents to the top to promote them.
    

Features only available on Classic UI

1. These actions are not in the modern UI
   Declare Record
   Send To Follow
   External data columns
   Geolocation columns
   Publishing columns
   Column formatting by JSLINK ( replaced by JSON which is better)
   Popularity trends (for pages/site libraries)
   RSS Feed
   Most Popular Items
   Connect to Outlook
   Open with Access
   Form Web Parts
   New Quick Step
   
2. Explorer view
   One of the key feature users like when they are used to file share is the explorer view.
   It is missing on modern UI but as we have seen, it is possible partially by the modern UI (using drag and drop).
3. One drive Synch feature is an other option.

Features on both experience (achieved in different ways)

1. 1. Create folders and upload
      Modern Way
      Create folders and upload folders the same way you do in OneDrive, using the command bar instead of the ribbon in classic UI.
      
      
      GREAT FEATURE, that could replace the classic explorer view: Drag and drop a folder with folder or files inside is working nicely.
   2. Drag and drop
      (Modern supports folders inside folders, classic doesn’t, unless you use explorer view)
   3. Metadata navigation and filtering
      Prerequisite for classic, activate the site feature: Metadata Navigation and filtering). Modern UI Wins as it is available by default
      
      
      Metadata navigation and filtering on Modern UI
   4. Edit massively multiple files metadata
      
       
   5. Access List / Library Settings Link on both UI
      
      From the ribbon on the classic UI
      
      From the action button on Modern UI

REST API code

<script src="https://ab57311.sharepoint.com/sites/test/SiteAssets/jquery-1.11.3.min.js"></script>

<script>
//https://tjendarta.wordpress.com/2014/02/20/create-retrieve-update-and-delete-sharepoint-list-item-using-rest-api-and-jquery/
//http://www.codeproject.com/Articles/990131/CRUD-operation-to-list-using-SharePoint-Rest-API

var v1, v2, v3, v4, v5, itemid;

$(document).ready(function(){

BindListitems();

$('#input2').change(function () {
 GetListitems();
    });

});
var SiteURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('test')/items";

function GetListitems()
{
var ddlid= $('#input2').val();
var url1 =SiteURL +"?$filter=ID eq " + ddlid;
    $.ajax({
        url: url1,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d.results.length == 1) {

                $('#txtname').val(data.d.results[0].Name);

            }
            else {
                failure("Multiple results obtained for the specified Id value");
            }
        },
        error: function (data) {
            failure(data);
        }
    });
}

function BindListitems()
{
$.ajax({

url:  SiteURL,

        method: "GET",

        headers: { "Accept": "application/json; odata=verbose" },

        success: function (data) {

            var lnt = data.d.results.length;

             for(var i=0; i<lnt; i++ ){

              var title = data.d.results[i].ID;
                 
$('#input2').append("<option value=" + title  + ">" + title  + "</option>");
         

}

        },

        error: function (data) {

           console.log(data.responseJSON.error);

        }

});
}

function CreateNew() {
    var listName = "test";
    CreateListItemWithDetails(listName, _spPageContextInfo.webAbsoluteUrl, function () {
        alert("New Item has been created successfully.");
 }, function () {
     alert("Ooops, an error occured. Please try again.");
 });
}

function CreateListItemWithDetails(listName, webUrl, success, failure)
{
var value = $("#txtname").val();
 var itemType = GetItemTypeForListName("test");
    var item = {
        "__metadata": { "type": itemType },
        "Title": "New Title Item added","Name":value
    };

    $.ajax({
        url: SiteURL,
        type: "POST",
        contentType: "application/json;odata=verbose",
        data: JSON.stringify(item),
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            success(data);
        },
        error: function (data) {
            failure(data);
        }
    });

}

function Update() {
    var listName = "test";
    var url = _spPageContextInfo.webAbsoluteUrl;
    var itemId = $('#input2').val(); // Update Item Id here
    var title = $("#txtname").val();
    updateListItem(itemId, listName, url, title, function () {
        alert("Item updated, refreshing avilable items");
    }, function () {
        alert("Ooops, an error occured. Please try again");
    });
}
function updateListItem(itemId, listName, siteUrl, title, success, failure) {
    var itemType = GetItemTypeForListName(listName);
    var item = {
        "__metadata": { "type": itemType },
        "Name": title
    };

    getListItemWithId(itemId, listName, siteUrl, function (data) {
        $.ajax({
            url: data.__metadata.uri,
            type: "POST",
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(item),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "X-HTTP-Method": "MERGE",
                "If-Match": data.__metadata.etag
            },
            success: function (data) {

                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }, function (data) {
        failure(data);
    });
}
function Delete() {
    var listName = "test";
    var url = _spPageContextInfo.webAbsoluteUrl;
    var itemId =$('#input2').val(); // Update Item ID here
    deleteListItem(itemId, listName, url, function () {
        alert("Item deleted successfully");
    }, function () {
        alert("Ooops, an error occured. Please try again");
    });
}

function deleteListItem(itemId, listName, siteUrl, success, failure) {
    getListItemWithId(itemId, listName, siteUrl, function (data) {
        $.ajax({
            url: data.__metadata.uri,
            type: "POST",
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-Http-Method": "DELETE",
                "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                "If-Match": data.__metadata.etag
            },
            success: function (data) {
                success(data);

            },
            error: function (data) {
                failure(data);
            }
        });
    },
   function (data) {
       failure(data);
   });
}
function getListItemWithId(itemId, listName, siteurl, success, failure) {
    var url = siteurl + "/_api/web/lists/getbytitle('" + listName + "')/items?$filter=Id eq " + itemId;
    $.ajax({
        url: url,
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d.results.length == 1) {
                success(data.d.results[0]);
            }
            else {
                failure("Multiple results obtained for the specified Id value");
            }
        },
        error: function (data) {
            failure(data);
        }
    });
}
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}


</script>

<table>
<tr><td></td><td>Name</td><td><input type="text" id="txtname"/></td></tr>
<tr><td><input type="submit" value="Save" id="btnsubmit" onclick="CreateNew()" /></td>
<td><input type="submit" value="Update" id="btnUpdate" onclick="Update()" /></td>
<td><input type="submit" value="Delete" id="btnUpdate" onclick="Delete()" /></td>
</tr>
<tr><td></td><td>ID</td><td><select id="input2" style="width:30%"><option>Any</option></select></td></tr>

</table>