none
How to show Share point list data to show it in custom webpart as a Expand/collapse manner from drop down in editor webpart? RRS feed

  • Question

  • How  to show Share point list data to show it in custom webpart as a Expand/collapse manner.

    My requirement is to choose the list in custom editor webpart, there we have drop down to select the List.

    If i choose the List then chosen list data shown it in expand collapse manner in the webpart.

    If there is no list in the drop down,provide a link to create a new list based on the expand/collapse.stp template.

    After creation(list and items) user redirect back to webpart properties and choose the created list.

    Could you please provide the step by step approach from where i can start.How can i implement this using VS 2019 and SharePoint 2013/2019.


    Monday, September 9, 2019 9:31 AM

All replies

  • Hi,

    We can get lists using REST API and bind the data to a drop down list. And get list items using REST API when select a list in dropdown list.

    The following example code for your reference, add the code into a script editor web part to make it works.

    <select id="AllLists">
    <option value="-1">-select a list-</option>
    </select>
    <div id="ListItems">
    </div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {  
        getAllLists();
    	$("#AllLists").change(function(){
    		if($(this).val()!=-1){
    			getListItems($(this).val());
    		}
    	});
    });
    
    function getAllLists(){
    	$.ajax({
    		url:  _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists?$select=Title&$filter=IsCatalog eq false and Hidden eq false",								
    		type: "GET",
    		headers: {"Accept": "application/json;odata=verbose" },
    		success: function(data){
    			$.each(data.d.results,function(index, list) {
    				$("#AllLists").append("<option value='"+list.Title+"'>"+list.Title+"</option>");				
    			});
    		},
    		error: function () {
    			//console.log("Failed to get details");
    		}
    	});
    }
    function getListItems(listTitle){
    	$.ajax({
    		url:  _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('"+listTitle+"')/items",			
    		type: "GET",
    		headers: {"Accept": "application/json;odata=verbose" },
    		success: function(data){
    			var html="";
    			$.each(data.d.results,function(index, item) {
    				html+="<h3>"+item.Title+"</h3>";
    				html+="<div><p>"+item.Created+"</p></div>";
    			});
    			$("#ListItems").html(html);
    		},
    		error: function () {
    			//console.log("Failed to get details");
    		}
    	});
    }
    </script>

    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.

    Tuesday, September 10, 2019 7:45 AM
  • Hi,

    Any update?

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    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, September 16, 2019 8:07 AM
  • Hi Sudhir,

    Would you please provide us with an update on the status of your issue?

    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, September 23, 2019 7:18 AM