Create custom button that shows item count of a list SharePoint 2013

Question

So essentially, what I want to do is have a custom button or image that displays the item count of a particular list.

A outline use case would be:

A list exists in another tab. On the front home page of SharePoint there is a sort of "view" or image that automatically gets updated and shows the amount of items in that particular list. User can look a this view and know how many items are currently in this list without actually going to that tab. They can also click on this image or view and it would take them into the list tab.

I was hoping if someone could point me in the right direction to accomplish this.

Answer 1

On front page, add a content or script editor webpart. Use JSOM to get list item counts using below code and display it in some form of html. As you are new to sharePoint, I would suggest you to go through below links also.

<script type="text/javascript">
    var clientContext = null;
    var web = null;
    var list ;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
    function Initialize()
    {
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        list = web.get_lists().getByTitle("ListName");
        clientContext.load(list);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), 
        Function.createDelegate(this, this.onQueryFailed));
    }
    function onListItemsLoadSuccess(sender, args) {
       var count = list.get_itemCount();
    alert(count); // This is just to test if count is coming correctly
        $('#yourhtmlelement').text(count);

    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

Refer below link to add script editor webpart to page https://support.shortpoint.com/support/solutions/articles/1000265208-how-to-add-javascript-code-to-a-page-using-the-script-editor-web-part