0

I'm trying to build this menu from a sharepoint list.

Sample data below

The Parent column is a lookup column pointing the title field

ID   Title            Parent           URL
1    Home                             http://google.com

2     Request         Home           http://google.com

3     Charge          Home           http://google.com

4     Admin Menu                      http://google.com

5     End Date        Admin Menu http://google.com

In the scenario above the Home and the Admin Menu will be the top header menu

But I have issue with grouping them accordingly.I can achieve the below

-Header 
Home
Requests
Charge
End Date
Exit 
Data 
Test Home
-Header 
Admin Menu

But I need something like this

-Top Header 
Home
Requests
Charge

-Top Header 
Admin Menu
End Date
Exit 
Data 
Test Home

How can I group them accordingly? e.g look for parent id 1 and group with lookupid of child which is Requests lookup id 1

<script language="javascript" type="text/javascript">


var globalNavigationListItems;


function globalNavigationRetrieveListItems() {
    //var clientContext = new SP.ClientContext("/");

    //var web = clientContext.get_web();
    //var oList = web.get_lists().getByTitle("LeftMenu");


    var clientContext = SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('LeftMenu');



    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query></Query><RowLimit>20</RowLimit></View>');

    //camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="SortOrder" Ascending="true" /><FieldRef Name="URL" Ascending="true" /></OrderBy></Query></View>');

    globalNavigationListItems = oList.getItems(camlQuery);
    //load default columns
    clientContext.load(globalNavigationListItems);
    clientContext.executeQueryAsync(
        globalNavigationOnQuerySucceeded,
        globalNavigationOnQueryFailed
        );
}

function globalNavigationOnQuerySucceeded(sender, args) {

    var listItemEnumerator = globalNavigationListItems.getEnumerator();
    var html = "";
    var html1 = "";

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current()

        var title = oListItem.get_item("Title");
        var url = oListItem.get_item("URL");
        var id = oListItem.get_id();

        if (oListItem.get_item("Parent")!= null)
        {
        var lookupid = oListItem.get_item("Parent").get_lookupId();
        }

        var parent = oListItem.get_item("Parent") == null ? 0 : oListItem.get_item("Parent").get_lookupId();

        if (parent == 0)
        {
        //parent = "header";
        console.log(title + " " + url + "" + parent + "" + id);

        html += "<div class=\"ms-rtestate-read ms-rte-embedcode ms-rtestate-notify ms-rte-embedil s4-wpActive\" contenteditable=\"false\" id=\"Parent\">";
        html += "<a title=\"\" class=\"ParentMenu\" unselectable=\"on\">" + title + "</a>";
        html += "</div>";

        console.log(id);

        }



        if (parent !=0)
        {

        html1 += "<div class=\"ms-rtestate-read ms-rte-embedcode ms-rtestate-notify ms-rte-embedil s4-wpActive\" contenteditable=\"false\" id=\"ChildMenu\" attr=\"" + lookupid + "\">";
        html1 += "<a title=\"\" class=\"ChildMenu\" unselectable=\"on\">" + title + "</a>";
        html1 += "</div>";

        console.log(id + "" + lookupid + "" + title + " " + url + "" + parent);

     }

   }

    $('#parentmenu').append(html);
    $('#Parent').append(html1);


function globalNavigationOnQueryFailed(sender, args) {
    var html = 'Request failed. ' + args.get_message() + '<br/>\n' + args.get_stackTrace();
    console.log(html);
}


$(document).ready(function () {
    try {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', globalNavigationRetrieveListItems);

    } catch (err) {
        //
    }
});

function getItemsByLookUpID(lookupID) {
}

</script>​​ 

//DIV that hold the menu HTML
<div id="parentmenu">
</div>

Thanks in advance

Your Answer

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

Browse other questions tagged or ask your own question.