DVWP Accordion list view

Forums Requests DVWP Accordion list view

This topic contains 13 replies, has 2 voices, and was last updated by  Alexander Bautz 2 weeks, 3 days ago.

  • Author
    Posts
  • #18951

    Nichols Family
    Participant

    Please help;

    I have a custom list on a subsite, my requirement is to show a accordion list view on another subsite. I want to use the “Title” column for the header and the “Narrative” column for body. I have tried multiple times make this work but has failed every time. Help will be rewarded in lots of beer 😀

  • #18972

    Alexander Bautz
    Keymaster

    Hi,
    Unfortunately I don’t have any code ready, but if you can tell me which SharePoint version you use I might be able to help you with a code snippet to get you started.

    Alexander

  • #18982

    Nichols Family
    Participant

    I am working with sharepoint 2013. Any help is much appreciated.

  • #18993

    Alexander Bautz
    Keymaster

    OK, I’ll try to get something made during the weekend.

    Could you give me some more details about how you want it to work? – is it just a list with all the “Title” elements that you can click to expand the “Narrative” text?

    Alexander

  • #18997

    Nichols Family
    Participant

    Exactly what I want to do. There is a faq accordion floating around but really whatever you come up with I would be much appreciative. Again this has bugged me for two months now. So to round up the list lives on one sub site and I want to view the display on another subsite. When the title is clicked the narrative should display below it. Thank you so much for your help and all of the great solutions to date.

  • #19011

    Alexander Bautz
    Keymaster

    I have attached a code snippet. Change the “WEB_BASE_URL” and “LIST_NAME” and ensure the “Narrative” field name is correct. Put the code in a HTML for web part or script editor web part or link it in from a file using the Content Editor Web Parts “Content link” option.

    The end result should look like the attached image.

    Hope you can use this as a starting point for your solution.

    Alexander

  • #19015

    Nichols Family
    Participant

    This works great thank you so much. How would I go about filtering it so only the last 25 hours (yes last 25 hours) of created items show up?

  • #19027

    Nichols Family
    Participant

    The only thing I need is a 25 hour filtering option and the ability to use list views other then that this solution is spot on.

  • #19029

    Alexander Bautz
    Keymaster

    Sorry for the delay – change the function like this:

    function getFaqItems(){
        var date = new Date(), dateISO = "";
        date.setDate(date.getDate()-25);
        dateISO = String(date.getFullYear()) + "-" + String(date.getMonth()+1) + "-" + String(date.getDate()) + "T00:00:00Z";
        var endpoint = "/WEB_BASE_URL/_api/web/lists/getbytitle('LIST_NAME')/items?$filter=(Created ge datetime'"+dateISO+"')";
        jQuery.ajax({
            url: endpoint,
            method: "GET",
            ...
            ...
            ...

    Alexander

  • #19037

    Nichols Family
    Participant

    Awesome. One more request, with a provided latitude and longitude in its respective columns, can I display a google map below the narrative with a icon on the lat long center point?

  • #19061

    Nichols Family
    Participant

    And maybe a edit icon to modify the narrative that would be amazing.

  • #19082

    Alexander Bautz
    Keymaster

    Hi,
    Yes, all is possible, but unfortunately I’m a bit to busy to help you with this right now. I might find time to do it after the holidays, but if you want to give it a go you can find information about the Google map api here (please note that you must register to get your API key – it’s free for up to 25K hits per day): https://developers.google.com/chart/interactive/docs/gallery/map#geocoded-locations

    The edit icon can be added using something like this example:

    <!-- Style -->
    <style type="text/css">
    .item-title-clickable{
        font-size:1.1em;
        background-color: #c7e0f4;
        padding:2px 5px;
        margin-top:2px;
        cursor:pointer;
    }
    .item-narrative{
        display: none;
        border-right:3px #c7e0f4 solid;
        border-bottom:3px #c7e0f4 solid;
        border-left:3px #c7e0f4 solid;
        padding:3px;
    }
    </style>
    <!-- HTML placeholder -->
    <div id="faq_placeholder"></div>
    <!-- Script -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
    function getFaqItems(){
        var date = new Date(), dateISO = "";
        date.setDate(date.getDate()-25);
        dateISO = String(date.getFullYear()) + "-" + String(date.getMonth()+1) + "-" + String(date.getDate()) + "T00:00:00Z";
        var endpoint = "/DFFS/_api/web/lists/getbytitle('title_click_to_expand_text')/items?$select=*,FileDirRef&$filter=(Created ge datetime'"+dateISO+"')";
        jQuery.ajax({
            url: endpoint,
            method: "GET",
            headers: {
                "accept": "application/json; odata=verbose",
                "content-type": "application/jsom;odata=verbose",
                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value
            }
        }).done(function (data) {
            var b = [], url;
            jQuery.each(data.d.results,function(i,item){
                b.push("<div class='item-title-clickable' onclick='jQuery(this).next().slideToggle(100);'>"+item.Title+"</div>");
                url = item.FileDirRef+"/EditForm.aspx?ID="+item.Id;
                b.push("<div class='item-narrative'>");
                    b.push("<span style='cursor:pointer;' onclick='openItemInDlg(\""+url+"\");'><img src='"+_spPageContextInfo.webServerRelativeUrl+"/_layouts/15/images/edititem.gif'></span><br>");
                    b.push(item.Narrative);
                b.push("</div>");
            });
            jQuery("#faq_placeholder").html(b.join(""));
        }).fail(function (err) {
            jQuery("#faq_placeholder").html(JSON.stringify(err));
        });
    }
    
    function openItemInDlg(url){
        SP.UI.ModalDialog.showModalDialog({"url":url,"dialogReturnValueCallback":function(a){
            if(a === 1){
                location.href = location.href;
            }
        }});
    }
    // Call function
    getFaqItems();
    </script>

    Alexander

  • #19104

    Nichols Family
    Participant

    You are the man thank you so much. heres a quick question if there are no results to display how would a send a “no results” message to the view?

  • #19210

    Alexander Bautz
    Keymaster

    Sorry – I missed your question. If you haven’t already figured it out you can do it like this:

    function getFaqItems(){
        var date = new Date(), dateISO = "";
        date.setDate(date.getDate()-25);
        dateISO = String(date.getFullYear()) + "-" + String(date.getMonth()+1) + "-" + String(date.getDate()) + "T00:00:00Z";
        var endpoint = "/DFFS/_api/web/lists/getbytitle('title_click_to_expand_text')/items?$select=*,FileDirRef&$filter=(Created ge datetime'"+dateISO+"')";
        jQuery.ajax({
            url: endpoint,
            method: "GET",
            headers: {
                "accept": "application/json; odata=verbose",
                "content-type": "application/jsom;odata=verbose",
                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value
            }
        }).done(function (data) {
            var b = [], url;
    		if(data.d.results.length > 0){
    			jQuery.each(data.d.results,function(i,item){
    				b.push("<div class='item-title-clickable' onclick='jQuery(this).next().slideToggle(100);'>"+item.Title+"</div>");
    				url = item.FileDirRef+"/EditForm.aspx?ID="+item.Id;
    				b.push("<div class='item-narrative'>");
    					b.push("<span style='cursor:pointer;' onclick='openItemInDlg(\""+url+"\");'><img src='"+_spPageContextInfo.webServerRelativeUrl+"/_layouts/15/images/edititem.gif'></span><br>");
    					b.push(item.Narrative);
    				b.push("</div>");
    			});
    		}else{
    			b.push("No result");
    		}
            jQuery("#faq_placeholder").html(b.join(""));
        }).fail(function (err) {
            jQuery("#faq_placeholder").html(JSON.stringify(err));
        });
    }

    Alexander

You must be logged in to reply to this topic.