Programmatically show a list

May 29, 2013 at 5:28 PM
I have used SPServices to create a list (every time someone reaches the page), but I can't figure out how to display that list.

The code I use is contained within a CEWP on a particular page, and I want to show the list on the same page.

Thanks...
Coordinator
May 29, 2013 at 5:55 PM
So you're creating the list on page load and then you want to display that same list? You'll need to delay trying to show it until it's been created, which I think happens asynchronously.

M.
May 29, 2013 at 6:03 PM
But how do I even show it--my mind is a blank. I want the equivalent of adding the list as a web part.
Coordinator
May 29, 2013 at 6:30 PM
You can't add it as a Web Part if you're creating it client side, as it won't exist when the page is rendered by the server. You could call GetListItems on it after it has been created and add the contents to the page (assuming you're prepopulating it).

M.
May 29, 2013 at 6:42 PM
I am pre-populating it, but the whole point of the exercise is to have a standard SharePoint list view. What is working (occasionally) is to redirect the page to the SP view of the list--ie, the .../Lists/newlist/AllItems.aspx view. As you suggest, the problem is asynchronicity. Most often, I get to the new view before the items have been added.

Anyway, I'll work on that part of the problem. And no wonder my mind was a blank--what I wanted to do can't be done! Thanks for straightening me out...
May 29, 2013 at 7:24 PM
You can create the list on page load, then in the completefunc, call a short script that performs a GetListItems operation and enumerates them to build your HTML on the fly, displayed in a <div> element placeholder in an existing CEWP. You won't have all the whiz-bang features of a typical list view but you can at least link your items to their DispForm.aspx (detail) view. Of course, all this is dependent on building/populating your list completely before the manual rendering step occurs.

For instance, I don't like that the basic "Links" list format in SharePoint doesn't allow you to specify a new window (target="_blank") and I have a links list I show in a web part on my home page. So, I modified the list to inlcude a new field, "New Window", as a boolean. In order to display the list on the home page with the new window functionality operational, I render it myself in a CEWP with a div element (CustomLinksDiv) on page load (of course, the data already exists at this point).
function PrepareLinks() {
    //Update Advanced Links web part
    var strHTML = "<table class='ms-summarycustombody' id='acqsvs_Links' style='margin-bottom:5px;' border='0' cellSpacing='0' cellPadding='0' summary='Links'>";
    var strLinkURL;
    var strLinkLabel;
    $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Links",
        CAMLViewFields: "<ViewFields Properties='True' />",
        completefunc: function(xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function(){
                strHTML += "<tr><td class='ms-vb' style='padding-top:3px; padding-bottom:5px; vertical-align:middle'><img src='/_layouts/images/square.gif' complete='complete'/>"
                        + "<td class='ms-vb' style='padding-bottom:5px; padding-left:5px; vertical-align:middle; font-family:tahoma,sans-serif'><a href='";
                strLinkURL = $(this).attr("ows_URL");
                strLinkURL = strLinkURL.slice(0, strLinkURL.indexOf(","));
                strLinkLabel = $(this).attr("ows_URL");
                strLinkLabel = strLinkLabel.slice(strLinkLabel.indexOf(",") + 2, strLinkLabel.length);
                strHTML += strLinkURL + "'";
                if($(this).attr("ows_Comments")) {
                    strHTML += " title='" + $(this).attr("ows_Comments") + "'";
                }
                if($(this).attr("ows_NewWindow") == true) {
                    strHTML += " target='_blank'";
                }
                else {
                    strHTML += " target='_self'";
                }
                strHTML += ">" + strLinkLabel + "</a></td></tr>";
            });
        }
    });
    strHTML += "</table>";
    $("#CustomLinksDiv").html(strHTML);
}
The result is a links list on my home page that users can't tell from a regular web part....except that links that are supposed to open in a new window do so.

This works for me because I have a relatively short list to render. Obviously, this amount of client side HTML generation could seriously delay your page load on a large list.

GKO
May 29, 2013 at 10:50 PM
Thank you for this. I'll study it, but I have to say that the point of my current project was to use a regular SharePoint list view. The client wants all the bells and whistles--all the Excel-like features. I had originally designed the data display to be something like you describe but have had to re-think this in view of the client's objections.

Just before I left work today, I succeeded at what I was trying. Once I determine what data in the list the current user is allowed to see, I create a new list, populate it accordingly, and then show it--only to him. It seems pretty cool, actually, and I'll incorporate it into my web site: SharePoint One-Offs, probably by this weekend. I'll make it an add-on to the Absolute Security article.

Thanks again...