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

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  2. <script type="text/javascript" src="/Dashboard/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  4. <style type="text/css">  
  5.     /* .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 { 
  6. display: none; 
  7. } 
  8. span#DeltaPlaceHolderPageTitleInTitleArea { 
  9. display: none; 
  10. } */ //optional  
  11.     .row-space {  
  12.         padding: 20px 100px 20px 100px;  
  13.     }  
  14.   
  15.     .img-align {  
  16.         margin: 0 auto;  
  17.         width: 50px;  
  18.         height: 50px;  
  19.         margin-top: 20px;  
  20.         margin-bottom: 10px;  
  21.     }  
  22.   
  23.     .txt-align {  
  24.         text-align: center;  
  25.         font-size: 14px;  
  26.         margin-top: 10px;  
  27.     }  
  28.   
  29.     .bg {  
  30.         background-color: #f5f5f5;  
  31.         margin: 10px 0 10px 0;  
  32.     }  
  33.   
  34.     @media only screen and (max-width: 500px) {  
  35.         .row-space {  
  36.             padding: 20px 20px 20px 20px;  
  37.         }  
  38.     }  
  39. </style>  
  40. <script type="text/javascript"

  41.  
  42.    
  43.     $(document).ready(function() {  
  1.         var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  
  2.         var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('Icons')/Items?$select=Url,Image,Active,ID&$orderby= Display asc&$filter=(Active eq 1)";  
  3.         $.ajax({  
  4.             url: oDataUrl,  
  5.             dataType: "json",  
  6.             type: "GET",  
  7.             headers: {  
  8.                 "Accept""application/json;odata=verbose"  
  9.             },  
  10.             success: GetSuccessMethod,  
  11.             error: onError  
  12.         });  
  13.   
  14.         function GetSuccessMethod(data, request) {  
  15.             var contents = "";  
  16.             //var contentss = "";  
  17.             contents += "<div class='bg'>";  
  18.             contents += "<div class='row row-space'>";  
  19.             $.each(data.d.results, function(key, val) {  
  20.                 if (val.Title === 'My Task') {  
  21.                     contents += "<div class='col-xs-6 col-md-3' style='display:none'>";  
  22.                 } else {  
  23.                     contents += "<div class='col-xs-6 col-md-3'>";  
  24.                 }  
  25.                 contents += "<img src='" + val.Image.Url + "' class='img-responsive img-align' alt='Responsive image'>";  
  26.                 contents += "<p class='txt-align'><a href='" + val.Url.Url + "'class='txt-align'>" + val.Title + "</a></p>";  
  27.                 contents += "</div>";  
  28.                 // contents += "<img id='image' onclick='RedirectURL('"+val.Url.Url+"'); src='"+val.Image.Url+"'></img>";  
  29.                 //contentss +="<p> <a href='"+val.Url.Url+"' id='hyperlink'>"+val.Title+"</a></p>";  
  30.             });  
  31.             contents += "</div>";  
  32.             contents += "</div>";  
  33.             $("div[id='container']").append(contents);  
  34.             isMember();  
  35.             //$("div[class='col-xs-6 col-md-3']").css('margin-bottom','35px');  
  36.         }  
  37.   
  38.         function onError(error) {}  
  39.   
  40.         function isMember() {  
  41.             $.ajax({  
  42.                 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups/getByName('NonTaskGroup')/Users?$filter=Id eq " + _spPageContextInfo.userId,  
  43.                 method: "GET",  
  44.                 headers: {  
  45.                     "Accept""application/json; odata=verbose"  
  46.                 },  
  47.                 success: function(data) {  
  48.                     if (data.d.results[0] != undefined) {  
  49.                         $("a[class='txt-align']:contains('My Task')").parent().parent().hide();  
  50.                     } else {  
  51.                         $("a[class='txt-align']:contains('My Task')").parent().parent().show();  
  52.                     }  
  53.                 }  
  54.             });  
  55.         }  
  56.   
  57.         
  58.     });  
  59. </script>  
  60. <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)
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now