Post
Ask Question

Range Slider, Tooltip And Retrieving Attachment Field In SharePoint

  1. <html>  
  2. <style type="text/css">  
  3.     a.tooltip {  
  4.         outline: none;  
  5.     }  
  6.   
  7.     a.tooltip strong {  
  8.         line-height: 30px;  
  9.     }  
  10.   
  11.     a.tooltip:hover {  
  12.         text-decoration: none;  
  13.     }  
  14.   
  15.     a.tooltip span {  
  16.         z-index: 10;  
  17.         display: none;  
  18.         padding: 14px 20px;  
  19.         margin-top: 60px;  
  20.         margin-left: -160px;  
  21.         width: 300px;  
  22.         line-height: 16px;  
  23.     }  
  24.   
  25.     a.tooltip:hover span {  
  26.         margin-top: 180px;  
  27.         display: inline;  
  28.         position: absolute;  
  29.         border: 2px solid #FFF;  
  30.         color: #EEE;  
  31.         background: #333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;  
  32.     }  
  33.   
  34.     .callout {  
  35.         z-index: 20;  
  36.         position: absolute;  
  37.         border: 0;  
  38.         top: -14px;  
  39.         left: 120px;  
  40.     }  
  41.     /*CSS3 extras*/  
  42.   
  43.     a.tooltip span {  
  44.         border-radius: 2px;  
  45.         box-shadow: 0px 0px 8px 4px #666;  
  46.         /*opacity: 0.8;*/  
  47.     }  
  48.   
  49.     img.img-responsive.img-align {  
  50.         margin: 0 auto;  
  51.         width: 250px;  
  52.         height: 150px;  
  53.         margin-top: 20px;  
  54.         margin-bottom: 10px;  
  55.     }  
  56.   
  57.     span.imp {  
  58.         font-size: 140%;  
  59.         color: ghostwhite;  
  60.     }  
  61.   
  62.     table#tableEmployee {}  
  63.   
  64.     .spacing-table {  
  65.         font-family: 'Helvetica', 'Arial', sans-serif;  
  66.         font-size: 15px;  
  67.         table-layout: fixed;  
  68.         width: 100%;  
  69.         border-spacing: 0 5px;  
  70.         /* this is the ultimate fix */  
  71.     }  
  72.   
  73.     .spacing-table th {  
  74.         text-align: left;  
  75.         padding: 5px 15px;  
  76.     }  
  77.   
  78.     .spacing-table td {  
  79.         padding-left: 25px;  
  80.         border-width: 3px 0;  
  81.         width: 50%;  
  82.         border-color: darkred;  
  83.         border-style: solid;  
  84.         background-color: rgba(109, 7, 7, 0.29);  
  85.         color: white;  
  86.     }  
  87.   
  88.     .spacing-table td:first-child {  
  89.         border-left-width: 3px;  
  90.         border-radius: 50px 0 0 5px;  
  91.     }  
  92.   
  93.     .spacing-table td:last-child {  
  94.         border-right-width: 3px;  
  95.         border-radius: 0 5px 5px 0;  
  96.     }  
  97.   
  98.     .spacing-table thead {  
  99.         display: table;  
  100.         table-layout: fixed;  
  101.         width: 100%;  
  102.     }  
  103.   
  104.     .spacing-table tbody {  
  105.         display: table;  
  106.         table-layout: fixed;  
  107.         width: 100%;  
  108.         border-spacing: 0 30px;  
  109.         border-collapse: separate;  
  110.     }  
  111.   
  112.     div#PriceSlider {  
  113.         width: 22%;  
  114.     }  
  115. </style>  
  116. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  117. <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  118. <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  119. <script>  
  120.     $(document).ready(function() {  
  121.         $("#PriceSlider").slider({  
  122.             min: 5000,  
  123.             max: 100000,  
  124.             values: [5000, 20000],  
  125.             range: true,  
  126.             slide: function(event, ui) {  
  127.                 $("#price").val("₹" + ui.values[0] + " - ₹" + ui.values[1]);  
  128.             }  
  129.         });  
  130.         $("#PriceSlider").on("slidestop", function(event, ui) {  
  131.             var pricefilterstring = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=((subcategory eq '" + name + "') and (price gt " + ui.values[0] + " and price lt " + ui.values[1] + "))";  
  132.             getitems(pricefilterstring);  
  133.         });  
  134.         var name = getParameterByName("itemid");  
  135.   
  136.         function getParameterByName(name, url) {  
  137.             if (!url) url = window.location.href;  
  138.             name = name.replace(/[\[\]]/g, "\\$&");  
  139.             var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),  
  140.                 results = regex.exec(url);  
  141.             if (!results) return null;  
  142.             if (!results[2]) return '';  
  143.             return decodeURIComponent(results[2].replace(/\+/g, " "));  
  144.         }  
  145.         var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=subcategory eq '" + name + "'";  
  146.         getitems(requestUri);  
  147.   
  148.         function getitems(urlstring) {  
  149.             $.ajax({  
  150.                 url: urlstring,  
  151.                 type: "GET",  
  152.                 headers: {  
  153.                     "accept": "application/json; odata=verbose"  
  154.                 },  
  155.                 success: onSuccess,  
  156.                 error: onError  
  157.             });  
  158.   
  159.             function onSuccess(data) {  
  160.                 var objItems = data.d.results;  
  161.                 var tableContent = '<table id="tableEmployee" class="spacing-table" >';  
  162.                 for (var i = 0; i < objItems.length; i++) {  
  163.                     tableContent += '<tr>';  
  164.                     console.log(objItems[i].ID);  
  165.                     tableContent += "<td> <span class='imp'> " + objItems[i].Title + " </span></td>";  
  166.                     tableContent += "<td><a href='#'class='tooltip'><img src='" + objItems[i].AttachmentFiles.results[0].ServerRelativeUrl + "'class='img-responsive img-align'alt='Responsive image'> <span><img class='callout' src='http://www.menucool.com/tooltip/cssttp/callout_black.gif' />   <strong>Details</strong><br />" + objItems[i].description + "<br />₹" + objItems[i].price + "</span></a></td>";  
  167.                     tableContent += "<td><a href='UrUrl/SitePages/Ad%20Details%20View.aspx?itemid=" + objItems[i].ID + "'>Contact the owner</td>";  
  168.                     tableContent += '</tr>';  
  169.                 }  
  170.                 tableContent += '</table>';  
  171.                 $('#CustomerPanel').empty();  
  172.                 $('#CustomerPanel').append(tableContent);  
  173.             }  
  174.   
  175.             function onError(error) {  
  176.                 alert('Error');  
  177.             }  
  178.         }  
  179.     });  
  180. </script>  
  181. <div id="PriceSlider"></div>  
  182. <p> <label for="price">Price range:</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p>  
  183. <div id="CustomerPanel"> </div>  
  184.   
  185. </html>  
In this I am using MasterList as my list and Title,ID,price,description,phonenumber,subcategory as their Column Names 
 
Step 1 
  1. Include  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  3. <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  4. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">   
Step 2  
  1. $("#PriceSlider").slider({  
  2.     min: 5000,  
  3.     max: 100000,  
  4.     values: [5000, 20000],  
  5.     range: true,  
  6.     slide: function(event, ui) {  
  7.         $("#price").val("₹" + ui.values[0] + " - ₹" + ui.values[1]);  
  8.     }  
  9. });  
The above code is for Range Slider where  ui.values[ 0 ] stores Minimum value and ui.values[ 1 ] stores Maximum value
 
Step 3
 
When the user sets the Min & Max Values in the Slide, in that event we want to create a rest query for Filter(($( "#PriceSlider" ).on("slidestop", function(event, ui)  ))
 
RestQuery 
  1. var pricefilterstring= _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=((subcategory eq '"+name+"') and (price gt "+ui.values[ 0 ]+" and price lt "+ ui.values[1]+"))";  
Step 4 
  1. var name = getParameterByName("itemid");  
  2.   
  3. function getParameterByName(name, url) {  
  4.     if (!url) url = window.location.href;  
  5.     name = name.replace(/[\[\]]/g, "\\$&");  
  6.     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),  
  7.         results = regex.exec(url);  
  8.     if (!results) return null;  
  9.     if (!results[2]) return '';  
  10.     return decodeURIComponent(results[2].replace(/\+/g, " "));  
  11. }  
The Above Code is for forming a Parameter for Url
 
Step 5 
  1. tableContent +="<td><a href='#'class='tooltip'><img src='"+objItems[i].AttachmentFiles.results[0].ServerRelativeUrl+"'class='img-responsive img-align'alt='Responsive image'> <span><img class='callout' src='http://www.menucool.com/tooltip/cssttp/callout_black.gif' />    <strong>Details</strong><br />"+objItems[i].description+"<br />₹"+objItems[i].price+"</span></a></td>";    
The above code is used for retrieving attachment field, and some field values are appended to TableContent and Tooltip Function using tooltip Class "Callout " which is mentioned In Css
Step 6

Emply the container using
  1. $('#CustomerPanel').empty();  
Then append the table content to the Div CustomerPanel 
  1. $('#CustomerPanel').append(tableContent);    
Step 7
 
Save the total code as .Html file and call it to your content editor webpart