5

I need to fetch information from my promoted list and build webpart which has same look and feel as we have when we see promoted links. I will have some custom Logic hence need to create webpart so could have just created OTB webpart to fetch those links.

I just wrote normal code to fetch info from promoted

SPSite site = SPContext.Current.Site;
            using (SPSite spSite = new SPSite(site.Url))
            {
                using (SPWeb spWeb = spSite.OpenWeb())
                {
                    SPList list = spWeb.Lists["Promoted Links"];
                    SPListItemCollection items = list.GetItems();
                    if (items.Count != 0)
                    {
                        foreach (SPListItem item in items)
                        {
                            var title = item["Title"].ToString();
                            var linkLocation = item["LinkLocation"].ToString();
                            var description = item["Description"].ToString();

                        }
                    }
                }
            }

How can i build same Interface?

2 Answers 2

2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<style>

    .imagecontainer a:visited {
        color: white;
    }

    .imagecontainer a {
        text-decoration: none;
    }
    /*for displaying text on image*/
    /*Add this class to the container which will hold image and anchor tag
        In this case container is td*/
    .imagecontainer {
        height: 110px;
        width: 110px;
        position: relative;
        padding-left: 10px;
        padding-top: 10px;
    }
    /*Add this class to image tag within the container*/
    .imagecontent {
        position: absolute;
        left: 0;
        top: 0;
        height: 110px;
        width: 110px;
        padding-left: 10px;
        padding-top: 10px;
    }
    /*Add this class to anchor tag within the container*/
    .imagetext {
        z-index: 100;
        position: absolute;
        color: white;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.60);
        width: 102px;
        height: 35px;
        bottom: 1px;
        padding-left: 8px;
        margin-bottom: -1px !important;
        transition: height 1500ms;
        -moz-transition: height 1500ms, -moz-transform 1500ms; /* Firefox 4 */
        -webkit-transition: height 1500ms, -webkit-transform 1500ms; /*Safari and Chrome */
        -o-transition: height 1500ms, -o-transform 1500ms; /* Opera */
    }
    /*this class will be applied when mouse is hovered on the class having imagetext i.e. anchor tag.
         This trick is to apply the sliding effect*/
    .imagecontainer:hover .imagetext {
        height: 110px;
        transition: height 750ms;
        -moz-transition: height 750ms, -moz-transform 750ms; /* Firefox 4 */
        -webkit-transition: height 750ms, -webkit-transform 750ms; /*Safari and Chrome */
        -o-transition: height 750ms, -o-transform 750ms; /* Opera */
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        GetTestLink();
    });

    /// this method read the link list from SharePoint using REST API 
    //and will the append the rows to the html table having id "tblLinks"
    function GetTestLink() {
        var temURL = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestLink')/items";
        $.ajax({
            url: temURL,
            method: "GET",
            headers: {
                "Accept": "application/json; odata=verbose",
                "content-type": "application/json; odata=verbose"
            },
            success: function (data) {
                var linkshtml = "";

                var j = 0
                //below json resultsset loop will append maximum three columns in every row.
                //Since i wanted only three columns in each row i am dividing the length by three so
                //that we will get only that many rows.     
                for (var i = 0; i < (data.d.results.length) / 3; i++) {
                    linkshtml += "<tr>";

                    //this to set 0 value to j during first loop
                    if (i == 0) {
                        j = 0;
                    }
                    //below line will set the value in k, so that it will read results till that index
                    var k = (j + 3);
                    for (j; j < k && j < data.d.results.length; j++) {
                        //below line will simply create td and will be stored in linkshtml  
                        linkshtml += "<td class='imagecontainer' ><img src='/SiteAssets/images.png' alt='' class='imagecontent'/><a class='imagetext' href='"
                        + data.d.results[j].URL.Url + "'>" + data.d.results[j].URL.Description + "</a></td>";
                    }
                    linkshtml += "</tr>";
                }
                //below line will append rows to table
                $("#tblLinks").append(linkshtml);
            },
            error: function (jqxr, errorCode, errorThrown) {
                alert(jqxr.responseText);
            }
        });
    }
</script>
<div style="padding-bottom: 40px; border-width: 2px; border-color: #ccc; border-style: solid; border-radius: 4px">
    <table id="tblLinks"></table>
</div>
8
  • Do you mean i use this css and build this table dynamically With content? Have you yourself done this?
    – Happy
    Commented Dec 9, 2015 at 10:55
  • i tried to build table but links are displaying in same line and not wrapping Down after say 5th element. How to fix
    – Happy
    Commented Dec 9, 2015 at 11:43
  • yes this is working code. for more reference you can visit this link. azamkhaan.blogspot.ae/2015/12/…
    – Azam Khan
    Commented Dec 9, 2015 at 14:41
  • I dont see what logic you apply to wrap on next row? Can you explain?
    – Happy
    Commented Dec 9, 2015 at 15:08
  • Instead of posting code only and a reference link could you elaborate your answer, please? ... in case the provided link breaks.
    – jcp
    Commented Dec 9, 2015 at 16:52
0

You can make a call through REST API and built up the interface through HTML/CSS. Here is the sample code. What this is doing is making a call and fetching details from the from list to display in a different format. I have three fields in the list i.e. Title, URL and Image.

    $(document).ready(function () {
    var i = 0;
    $.ajax({
        url: "/_api/web/lists/GetByTitle('MyList')/items",
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if (data.d.results.length > 0) {
                $.each(data.d.results, function (index, value) {

                    s = "<div class=\"myitems\">";
                    s += "<a href='" + value.url.Url + "' title='" + value.Title + "'\>" + "<img src=\"" + value.icon.Url + "\" /></a><br />";
                    $('#Myitems').append(s);
                    i++;
                });
            }
            else {
                $('#Myitems').append("No data in the List");
            }
        },
        error: function (error) {
            console.log(JSON.stringify(error));
        }
    });
});

enter image description here

2
  • How are you wrapping links to next row? Dont see any logic
    – Happy
    Commented Dec 10, 2015 at 5:27
  • Yes no wrapping to next row is done, but I am sure you can do this through CSS. Commented Dec 10, 2015 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.