Creating Dynamic URL , Dynamic WebPage And Retrieving AttachmentField In SharePoint

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  2. <script type="text/javascript" src="/sites/LMS/SiteAssets/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.     .bla {  
  6.         display: inline-block;  
  7.         font-weight: bold;  
  8.     }  
  9.   
  10.     ​ .divimage {  
  11.         width: 50% !important;  
  12.         float: left !important;  
  13.     }  
  14.   
  15.     div#container {  
  16.         width: 100%;  
  17.     }  
  18.   
  19.     .divDetails {  
  20.         float: right;  
  21.         width: 50%;  
  22.     }  
  23.   
  24.     img.img-responsive.img-align {  
  25.         width: 35%;  
  26.         height: 260px;  
  27.         float: left;  
  28.         border-radius: 10px;  
  29.     }  
  30.   
  31.     p.txt-align {  
  32.         margin-left: -50px;  
  33.         padding-top: 13px;  
  34.         font-size: 16px;  
  35.     }  
  36. </style>  
  37. <script type="text/javascript">  
  38.     $(document).ready(function() {  
  39.         var MyParameter = getParameterByName("itemid");  
  40.   
  41.         function getParameterByName(name, url) {  
  42.             if (!url) url = window.location.href;  
  43.             name = name.replace(/[\[\]]/g, "\\$&");  
  44.             var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),  
  45.                 results = regex.exec(url);  
  46.             if (!results) return null;  
  47.             if (!results[2]) return '';  
  48.             return decodeURIComponent(results[2].replace(/\+/g, " "));  
  49.         }  
  50.         var siteUrl = _spPageContextInfo.siteAbsoluteUrl;  
  51.         //var urlString = "YourUrl/_api/web/lists/getbytitle('Icons')/Items?$select=Title,Url,Image,ID";  
  52.         var getuserstsring = "YourUrl/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,ownername,phonenumber,description,city,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=Id%20eq%20" + MyParameter + "";  
  53.         $.ajax({  
  54.             url: getuserstsring,  
  55.             dataType: "json",  
  56.             type: "GET",  
  57.             headers: {  
  58.                 "Accept""application/json;odata=verbose"  
  59.             },  
  60.             success: GetSuccessMethod,  
  61.             error: onError  
  62.         });  
  63.   
  64.         function GetSuccessMethod(data, request) {  
  65.             var contents = "";  
  66.             $.each(data.d.results, function(key, val) {  
  67.                 $.each(val.AttachmentFiles.results, function(key1, val1) {  
  68.                     contents += "<div class='divimage'>";  
  69.                     /*console.log(val1.ServerRelativeUrl); 
  70.                     contents +="<a href='" + val1.ServerRelativeUrl+ "'><img title='" + val.Title + "' src='"+val1.ServerRelativeUrl+"' class='img-responsive img-align' alt='Responsive image'>"; */  
  71.                     contents += "<img title='" + val.subcategory + "' src='" + val.AttachmentFiles.results.ServerRelativeUrl + "' class='img-responsive img-align' alt='Responsive image'>";  
  72.                     contents += "</div>"  
  73.                     contents += "<div class='divDetails'>"  
  74.                     contents += "<p class='txt-align'><a href='https://UrUrl.aspx?itemid=" + MYParameter + "'class='txt-align'>" + MyParameter + "</a></p>";  
  75.                     contents += "<p class='txt-align'><span class='bla'>Details : </span>" + val.Title + "</p>";  
  76.                     contents += "<p class='txt-align'><span class='bla'>Owner Name : </span>" + val.ownername + "</p>";  
  77.                     contents += "<p class='txt-align'><span class='bla'>Mobile : </span>" + val.phonenumber + "</p>";  
  78.                     contents += "<p class='txt-align'><span class='bla'>City : </span>" + val.city + "</p>";  
  79.                     contents += "<p class='txt-align'><span class='bla'>Description : </span>" + val.description + "</p>";  
  80.                     contents += "</div>";  
  81.                 });  
  82.             });  
  83.             $("div[id='container']").append(contents);  
  84.         }  
  85.   
  86.         function onError(error) {}  
  87.   
  88.         function RedirectURL(URL) {  
  89.             alert(URL);  
  90.         }  
  91.     });  
  92. </script>  
  93. <div id="container"> </div>  
 MasterList is my  List name and Title, ID, ownername, phonenumber, description,and city are their Column names where AttachmentFiles is a Attachment of Image Field..
 
Step 1
 
Include Jquery.min.js,Bootstrap.min.js, Bootstrap.min.css
 
Step 2
  1. var MyParameter = getParameterByName("itemid");  
  2.   
  3. function getParameterByName(name, url)  
  4. {  
  5.     if (!url) url = window.location.href;  
  6.     name = name.replace(/[\[\]]/g, "\\$&");  
  7.     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),  
  8.         results = regex.exec(url);  
  9.     if (!results) return null;  
  10.     if (!results[2]) return '';  
  11.     return decodeURIComponent(results[2].replace(/\+/g, " "));  
The above codes creates the Parameter for URL
 
Step 3
  1. var getuserstsring = "https://YourURL/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,ownername,phonenumber,description,city,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=Id%20eq%20"+MyParameter+"";  
The above RestQuery fetches the columns from list and Filters Depends upon parameter Field.
 
AttachmentFiles/ServerRelativeUrl(this is the Format for retrieving attachment files from List)
 
Step 4
  1. contents +="<img title='" + val.Title + "' src='"+val.AttachmentFiles.results.ServerRelativeUrl+"' class='img-responsive img-align' alt='Responsive image'>";  
If you want a single attachement use this format (val.AttachmentFiles.results[0] )
 
The above Code  Functions for Getting image url from attachmentfiles and Binded to Contents Variable
  1. contents += "<p class='txt-align'><a href='https://UrUrl.aspx?itemid="+MYParameter+"'class='txt-align'>" + MyParameter+ "</a></p>";  
The above Code Frames a New dynamic Url and depends on MyParameter Variable (for every filter it frames a new Url, so this concept is called Dynamic Url,No need to create seperate Urls for every category)
Step 5 
  1. $("div[id='container']").append(contents);  
The aboveCode is Used to append the  Contents to the Div
 
Step 6
 
Save the Above Code as .html file and Call it to your Content Editor.
Ebook Download
View all
Learn
View all