Creating Dynamic URL , Dynamic WebPage And Retrieving AttachmentField In SharePoint

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="/sites/LMS/SiteAssets/Dashboard/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .bla {
        display: inline-block;
        font-weight: bold;
    }

    ​ .divimage {
        width: 50% !important;
        float: left !important;
    }

    div#container {
        width: 100%;
    }

    .divDetails {
        float: right;
        width: 50%;
    }

    img.img-responsive.img-align {
        width: 35%;
        height: 260px;
        float: left;
        border-radius: 10px;
    }

    p.txt-align {
        margin-left: -50px;
        padding-top: 13px;
        font-size: 16px;
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        var MyParameter = getParameterByName("itemid");

        function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
        var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
        //var urlString = "YourUrl/_api/web/lists/getbytitle('Icons')/Items?$select=Title,Url,Image,ID";
        var getuserstsring = "YourUrl/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,ownername,phonenumber,description,city,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=Id%20eq%20" + MyParameter + "";
        $.ajax({
            url: getuserstsring,
            dataType: "json",
            type: "GET",
            headers: {
                "Accept": "application/json;odata=verbose"
            },
            success: GetSuccessMethod,
            error: onError
        });

        function GetSuccessMethod(data, request) {
            var contents = "";
            $.each(data.d.results, function(key, val) {
                $.each(val.AttachmentFiles.results, function(key1, val1) {
                    contents += "<div class='divimage'>";
                    /*console.log(val1.ServerRelativeUrl);
                    contents +="<a href='" + val1.ServerRelativeUrl+ "'><img title='" + val.Title + "' src='"+val1.ServerRelativeUrl+"' class='img-responsive img-align' alt='Responsive image'>"; */
                    contents += "<img title='" + val.subcategory + "' src='" + val.AttachmentFiles.results.ServerRelativeUrl + "' class='img-responsive img-align' alt='Responsive image'>";
                    contents += "</div>"
                    contents += "<div class='divDetails'>"
                    contents += "<p class='txt-align'><a href='https://UrUrl.aspx?itemid=" + MYParameter + "'class='txt-align'>" + MyParameter + "</a></p>";
                    contents += "<p class='txt-align'><span class='bla'>Details : </span>" + val.Title + "</p>";
                    contents += "<p class='txt-align'><span class='bla'>Owner Name : </span>" + val.ownername + "</p>";
                    contents += "<p class='txt-align'><span class='bla'>Mobile : </span>" + val.phonenumber + "</p>";
                    contents += "<p class='txt-align'><span class='bla'>City : </span>" + val.city + "</p>";
                    contents += "<p class='txt-align'><span class='bla'>Description : </span>" + val.description + "</p>";
                    contents += "</div>";
                });
            });
            $("div[id='container']").append(contents);
        }

        function onError(error) {}

        function RedirectURL(URL) {
            alert(URL);
        }
    });
</script>
<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

var MyParameter = getParameterByName("itemid");

function getParameterByName(name, url)
{
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));

The above codes creates the Parameter for URL

 

Step 3

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

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

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 

$("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.