none
[URGENT] Announcement list data display RRS feed

  • Question

  • To Fetch the announcement list items and to display the item title in below custom button format as per below and on click of each button,it should fetch the respective items from the Announcement list.

    Announcement List

    Title   description

    Test         welcome test test

    Test1        Test test test

    Test2          welcome

    Test3          welcome

    Homepage :

    we should pull Title for each items and display in below button format and each button click it should display the respective item. Kindly help

    Test (Button)  Test1 (button)    Test3(Button)  Test4(button)   ////Row1

    Test5(Button)  Test6(button)    Test7(Button)   Test8(Button) ////Row2


    Blitz




    • Edited by sree_23 Wednesday, August 14, 2019 12:38 PM
    Wednesday, August 14, 2019 11:13 AM

Answers

  • Hi,

    The following example code for your reference.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var siteUrl="http://sp2010";
    var listName="AnnouncementList";
    var rowlimit=4;
    $(function () {		 
    	$.ajax({
    		url: siteUrl + "/_vti_bin/listdata.svc/"+listName,
    		type: "GET",
    		headers: {
    			"Accept": "application/json;odata=verbose",
    		},
    		success: function (data) {
    			var tableHtml="<table border='0' cellspacing='0' cellpadding='0'>";
    			var items=data.d.results;
    			for(var i=0;i<items.length/rowlimit;i++){
    				tableHtml+="<tr>";
    				for(var j=0;j<rowlimit;j++){
    					if((i*4+j)<items.length){
    						tableHtml+="<td><input type='button' style='margin:5px 5px 5px 5px' onclick='openItemPopup("+items[i*rowlimit+j].Id+")' value='"+items[i*rowlimit+j].Title+"'/></td>";
    					}else{
    						tableHtml+="<td></td>";
    					}
    				}				 
    				tableHtml+="</tr>";
    			}
    			tableHtml+="</table>";
    			$("#AnnouncementList").html(tableHtml);
    		},
    		error: function (err) {
                console.log(JSON.stringify(err));
            }
    	});
    });
    function openItemPopup(itemId){
    	var url=siteUrl+"/Lists/"+listName+"/DispForm.aspx?ID="+itemId;
    	var title=listName+"-"+itemId;
    	SP.UI.ModalDialog.showModalDialog({title: title, url: url });
    }
    </script>
    <div id="AnnouncementList"/>
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Friday, August 16, 2019 6:58 AM
    Thursday, August 15, 2019 3:07 AM
    Moderator
  • Hi,

    If you want to set background color and size for the button, please add the CSS into the style attribute of the input tag.

    tableHtml+="<td><input type='button' style='height:50px;width:80px;font-size:15px;color:#fff;background-color:#000000;margin:5px 5px 5px 5px' onclick='openItemPopup("+items[i*rowlimit+j].Id+")' value='"+items[i*rowlimit+j].Title+"'/></td>";

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Friday, August 16, 2019 7:27 AM
    Friday, August 16, 2019 7:13 AM
    Moderator

All replies

  • Hi,

    The following example code for your reference.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var siteUrl="http://sp2010";
    var listName="AnnouncementList";
    var rowlimit=4;
    $(function () {		 
    	$.ajax({
    		url: siteUrl + "/_vti_bin/listdata.svc/"+listName,
    		type: "GET",
    		headers: {
    			"Accept": "application/json;odata=verbose",
    		},
    		success: function (data) {
    			var tableHtml="<table border='0' cellspacing='0' cellpadding='0'>";
    			var items=data.d.results;
    			for(var i=0;i<items.length/rowlimit;i++){
    				tableHtml+="<tr>";
    				for(var j=0;j<rowlimit;j++){
    					if((i*4+j)<items.length){
    						tableHtml+="<td><input type='button' style='margin:5px 5px 5px 5px' onclick='openItemPopup("+items[i*rowlimit+j].Id+")' value='"+items[i*rowlimit+j].Title+"'/></td>";
    					}else{
    						tableHtml+="<td></td>";
    					}
    				}				 
    				tableHtml+="</tr>";
    			}
    			tableHtml+="</table>";
    			$("#AnnouncementList").html(tableHtml);
    		},
    		error: function (err) {
                console.log(JSON.stringify(err));
            }
    	});
    });
    function openItemPopup(itemId){
    	var url=siteUrl+"/Lists/"+listName+"/DispForm.aspx?ID="+itemId;
    	var title=listName+"-"+itemId;
    	SP.UI.ModalDialog.showModalDialog({title: title, url: url });
    }
    </script>
    <div id="AnnouncementList"/>
    

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Friday, August 16, 2019 6:58 AM
    Thursday, August 15, 2019 3:07 AM
    Moderator
  • Hello,

    You do not need to write code for this requirement. You can use OOB content by query web part to list the announcements and on click on announcements you can pass Item ID as query string parameter to another content by query web part to display details about that announcement. You need to customize the itemstyle for both the web part according to your need and passing the query string parameter. 

    You can get more information on this in below articles.

    What is CQWP:- 

     https://www.c-sharpcorner.com/UploadFile/Roji.Joy/working-with-content-query-web-part-in-sharepoint-2010/

    Query String Filtering in CQWP:- 

    http://www.sharepointnadeem.com/2011/09/cqwp-pagequerystring-and-pagefieldvalue.html

    How To change Item Style:- 

    https://blog.trigent.com/customizing-content-query-web-part-itemstyle-using-xslt-in-share-point-2013

    Thursday, August 15, 2019 8:52 AM
  • Hi,

    Thanks its working 

    I am trying to set background color and size for  button size:10px; background-color: #000000 in the below line but its not working

    tableHtml+="<td><input type='button' size:10px background-color: #000000 style='margin:5px 5px 5px 5px' onclick='openItemPopup("+items[i*rowlimit+j].Id+")' value='"+items[i*rowlimit+j].Title+"'/>


    Blitz

    Friday, August 16, 2019 6:58 AM
  • Hi,

    If you want to set background color and size for the button, please add the CSS into the style attribute of the input tag.

    tableHtml+="<td><input type='button' style='height:50px;width:80px;font-size:15px;color:#fff;background-color:#000000;margin:5px 5px 5px 5px' onclick='openItemPopup("+items[i*rowlimit+j].Id+")' value='"+items[i*rowlimit+j].Title+"'/></td>";

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by sree_23 Friday, August 16, 2019 7:27 AM
    Friday, August 16, 2019 7:13 AM
    Moderator
  • Hi,

    To simulate paging using SharePoint 2010 listdata.svc REST API, you can do the following:

    1.Use the $skip=n parameter to skip the first n entries according to the $orderby parameter.

    2.Use the $top=n parameter to return the top n entries according to the $orderby and $skip parameters.

    If you have a new question, I would suggest you post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Monday, August 19, 2019 8:21 AM
    Moderator