SharePoint Dashboard Design Icons and Links are Fetched from SharePoint List based on Active Status Button

SharePoint Dashboard Design, Icons and Links are Fetched from SharePoint List based on Active Status Button.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="/Dashboard/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    /* .ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox .ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table {
display: none;
}
span#DeltaPlaceHolderPageTitleInTitleArea {
display: none;
} */ //optional
    .row-space {
        padding: 20px 100px 20px 100px;
    }

    .img-align {
        margin: 0 auto;
        width: 50px;
        height: 50px;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    .txt-align {
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
    }

    .bg {
        background-color: #f5f5f5;
        margin: 10px 0 10px 0;
    }

    @media only screen and (max-width: 500px) {
        .row-space {
            padding: 20px 20px 20px 20px;
        }
    }
</style>
<script type="text/javascript">



    $(document).ready(function() {
        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
        var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Icons')/Items?$select=Url,Image,Active,ID&$orderby= Display asc&$filter=(Active eq 1)";
        $.ajax({
            url: oDataUrl,
            dataType: "json",
            type: "GET",
            headers: {
                "Accept": "application/json;odata=verbose"
            },
            success: GetSuccessMethod,
            error: onError
        });

        function GetSuccessMethod(data, request) {
            var contents = "";
            //var contentss = "";
            contents += "<div class='bg'>";
            contents += "<div class='row row-space'>";
            $.each(data.d.results, function(key, val) {
                if (val.Title === 'My Task') {
                    contents += "<div class='col-xs-6 col-md-3' style='display:none'>";
                } else {
                    contents += "<div class='col-xs-6 col-md-3'>";
                }
                contents += "<img src='" + val.Image.Url + "' class='img-responsive img-align' alt='Responsive image'>";
                contents += "<p class='txt-align'><a href='" + val.Url.Url + "'class='txt-align'>" + val.Title + "</a></p>";
                contents += "</div>";
                // contents += "<img id='image' onclick='RedirectURL('"+val.Url.Url+"'); src='"+val.Image.Url+"'></img>";
                //contentss +="<p> <a href='"+val.Url.Url+"' id='hyperlink'>"+val.Title+"</a></p>";
            });
            contents += "</div>";
            contents += "</div>";
            $("div[id='container']").append(contents);
            isMember();
            //$("div[class='col-xs-6 col-md-3']").css('margin-bottom','35px');
        }

        function onError(error) {}

        function isMember() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('NonTaskGroup')/Users?$filter=Id eq " + _spPageContextInfo.userId,
                method: "GET",
                headers: {
                    "Accept": "application/json; odata=verbose"
                },
                success: function(data) {
                    if (data.d.results[0] != undefined) {
                        $("a[class='txt-align']:contains('My Task')").parent().parent().hide();
                    } else {
                        $("a[class='txt-align']:contains('My Task')").parent().parent().show();
                    }
                }
            });
        }


    });
</script>
<div id="container"> </div>

 

Here i am Using Icons as My list,

 

Image,Url,Active,display are Column Names for Image Field,Url Field,Number Field and Yes/No Field Respectively..

 

NonTaskGroup is a Group i created and Add 2 Members(Adding Members  Regarding Ur wish)

 

Step 1

Include Min.js

Step 2

Include BootStrap Css and Bootstrap.min.js for Good Design

Step 3

Write Style Script for row,image and Text Align..

Step 4

In Document.ready Function Fetch absolute URL of the site and get list Using siteUrl +
"/_api/web/lists/getbytitle("list Name") /Items?$select=Title,Url,Image,Active,ID&$orderby= Display asc&$filter=(Active eq 1)"; in this we are filter by ascending order and Checking status by active column(whether yes(1) it returns those Results) in GetSuccess Method assign Div classes to CSS Class Itterate data.d.results using for loop by key and val check val.title=individual field Assign url,href to Some Variable(contents)..

Append Contents to Div ..

 

Step 5

 

Create Another RestQuery for Filter By GroupMembers 

 

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('NonTaskGroup')/Users?$filter=Id eq " + _spPageContextInfo.userId 

 

Step 6 

 

Then check the Codition depends on data.d.results

 

if True hide both div using $("a[class='txt-align']:contains('My Task')").parent().parent().hide();//Hide My Task to NonTaskGroup Members

 

else Unlock the Hide Using $("a[class='txt-align']:contains('My Task')").parent().parent().show(); //Show My Task to EveryMembers

 

Note : - Depending upon display Number Field values 1,2,3,4,5 etc... in the list dasboard Icons are Arranged in order,depending upon the Active(Yes/No) Field the Icons will DIsplayed(Yes means Display no Means Hidden)