1

I have a requirement where I need to create menus dynamically through List with out farm or sandbox solutions. And the given url for the menu should render with in the SharePoint master page .Can any one help me how can I do this?

0

What I understand is that you will have a list with two columns to show the menu in master page.

After getting all the list items you could append them in ul as li to form a menu as shown in code below.

List Name : MenuList

Columns:

  • Title - Single Line Text

  • HyperLink - Single Line Text

Use JavaScript Client Object Model to retrieve the items from this list and create a menu from it.

Code:

var siteUrl = '/sites/MySiteCollection';

function retrieveListItems() {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('MenuList');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>10</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {

    var lis= '<ul>';

    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        lis+= '<li><a href='+oListItem.get_item('HyperLink') +'/>' + oListItem.get_item('Title') +'<li/>'
    }

    lis+='</ul>';

    $('#menudiv').append(lis); // a div to which you will append the lis. 
}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Now Skeleton for your menu has been created. You need to apply css to render according to your design.

Please let me know if you have any questions. Happy Coding !

1
  • Please mark it as answer if it solves your query Aug 8 '14 at 12:41

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.