Post
Ask Question

Display Dynamic Data On Web Part Page In SharePoint Online Using List And Rest API

Hi Guys.

Hope you are doing great today!!

In this blog, we will see how to display dynamic data on SharePoint web part page using REST API.

Suppose we have one custom list and in that, we have the columns as below,
  • Title: Single line of text to show page heading,
  • Description: Rich text with images and style,
  • Pageurl: we are storing page URL with parameter pageID,
  • PageImage: Single line of text to show an image below heading section.
We have one web part page and on that page, we need to show dynamic data. That is, depending on ID we need to display Description field in a well-styled manner.
  1. Create one web part page with name "dynamicpage"

  2. Create one text file in site assets or style library with name "dynamictext" and add below code into it.

    First add jQuery reference
    1. <script src="/SiteAssets/JS/jquery.min.js"></script>  
    2. <style>  
    3.     div#sect1 {  
    4.         font-size: 25px;  
    5.         text-align: center;  
    6.         border-bottom: 2px solid #dcdcdc;  
    7.         padding-bottom: 10px;  
    8.     }  
    9.  
    10.     #imgSect img {  
    11.         border: 1px solid grey;  
    12.     }  
    13.   
    14.     div#imgSect {  
    15.         text-align: center;  
    16.         padding-top: 30px;  
    17.         padding-bottom: 10px;  
    18.     }  
    19. </style>  
    20. <div id="Contents">  
    21.     <div id="sect1"> </div>  
    22.     <div id="imgSect"> </div>  
    23.     <div id="sect2"> </div>  
    24. </div>  
    25. <script>  
    26.     $(document).ready(function() {  
    27.         var strID = getUrlParameter('pageID');  
    28.         getItems(strID, _spPageContextInfo.webAbsoluteUrl, function(data) {  
    29.             $("#sect1").html(data.d.Title);  
    30.             $("#imgSect").html("<img alt='' src='" + data.d.PageImage + "'>");  
    31.             $("#sect2").html(data.d.Description);  
    32.         }, function(data) {  
    33.             alert("Ooops, an error occured. Please try again");  
    34.         });  
    35.     });  
    36.   
    37.     function getItems(itemID, siteurl, success, failure) {  
    38.         $.ajax({  
    39.             url: siteurl + "/_api/web/lists/getbytitle('CustomListName')/items(" + itemID + ")",  
    40.             method: "GET",  
    41.             headers: {  
    42.                 "Accept": "application/json; odata=verbose"  
    43.             },  
    44.             success: function(data) {  
    45.                 success(data);  
    46.             },  
    47.             error: function(data) {  
    48.                 failure(data);  
    49.             }  
    50.         });  
    51.     }  
    52.   
    53.     function getUrlParameter(name) {  
    54.         name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');  
    55.         var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');  
    56.         var results = regex.exec(location.search);  
    57.         return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));  
    58.     };  
    59. </script>  
    Save the file and copy the URL of text file to add it in content editor web part (Step 3).

  3. Edit "dynamicpage.aspx" click on add web part -> add content editor web part -> select web part and edit web part properties- >add url of text file -> add Title or set Chrome type to "none"-> click on apply -> ok

  4. Save the page.

  5. Check-in and Publish it.

  6. The page will show contents based on the ID in URL.
G
M
T
 
Text-to-speech function is limited to 200 characters