4

I am using SPServices in Sharepoint 2013 to get some results from cutom list named "navigator" presented here:

enter image description here

and for this purpose I am using code:

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-2014.01.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "navigator",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var target = ($(this).attr("ows_Target"));
                var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
                $("#navigator").append(liHtml);
            });
        }
    });
});
            </script>
            <ul id="navigator" />

I get list of all items like this:

enter image description here

But I would like to achieve something like this:

enter image description here

Is it possible to use "Category" as parent for this elements?

  • is only 1 category having 1 list item? – Malin De Silva Aug 19 '14 at 8:50
  • This is only example of an idea. Each category will have more items 10 at least. – omygoodness Aug 19 '14 at 8:52
3

So upon your feedback try this one on. The divs will float and it will add a new div based on the category. You need to order items first by category. Then Display order.

$(document).ready(function() {
$().SPServices({
    operation: "GetListItems",
    async: true,
    listName: "navigator",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
    CAMLQuery: "<Query><OrderBy><FieldRef Name="Category" Ascending='true'/><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
    completefunc: function (xData, Status) {

//Added previous category here
var previouscategory="";

        $(xData.responseXML).SPFilterNode("z:row").each(function() {
            var title = ($(this).attr("ows_Title"));
    // Set current category
    var category = ($(this).attr("Category"));
            var href = ($(this).attr("ows_URL")).split(",")[0];
            var target = ($(this).attr("ows_Target"));

    if(category !=previouscategory)
    {
        $("#navigator").append("<div style='float:left'><h4>"+category+"</h4>");
    }

            var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
            $("#navigator").append(liHtml);

    if(category !=previouscategory)
    {
        $("#navigator").append("</div>);
    }

    previouscategory= category;
        });
    }
});

});

  • Thank you for your answer. I tried to use your code and now I don't see any results - blank screen. Should I add div with id="navigator" or any other element? – omygoodness Aug 19 '14 at 10:35
  • Yes please try with that. I could not try this on mine as I did not have your environment. Logically this code should work. If not, try removing the float. – Malin De Silva Aug 19 '14 at 11:10
  • I managed to show some results like this: link by using this code: if(category != previouscategory) { $("#navigator").append("<div style='float:left;'><h1>"+category+"</h1><br> "+liHtml+""); } Now I need to remove duplicate names of categories somehow – omygoodness Aug 19 '14 at 11:26
  • Thats great. Now you can add more style and make it work better. Also replace h1 tags with lower ones like h3,h4 or some other tags. – Malin De Silva Aug 19 '14 at 11:27
  • To remove the duplicates, make sure the category != previous category comes true only when a new category is coming – Malin De Silva Aug 19 '14 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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