To display Sharepoint List Item in SpFx Webpart Service folder using Ui Controller and React Framework

Question

question

MahimaK-6741 asked Apr 21, '22 TongZhangMSFT-7548 commented Apr 25, '22

To display Sharepoint List Item in SpFx Webpart Service folder using Ui Controller and React Framework

I want to retrieve Sharepoint list item and display on Spfx Webpart using React Framework & Rest API Call.

My Requirements-
1. I want to use Service folder in vs code and ts file inside that.
2. RestApi function (to get item from the list) should be present in service file.
3. use of componentDidMount Method
4. Use of DetailsList Ui Controller to display List data.

office-sharepoint-online office-sharepoint-server-administration office-sharepoint-server-development

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-04-21T15:17:58.583Z

sadomovalex answered Apr 21, '22

you need to construct and send HTTP request to SP REST API which retrieves list item Retrieve specific list item:

 GET https://{site_url}/_api/web/lists/GetByTitle('Test')/items({item_id})
 Authorization: "Bearer " + accessToken
 Accept: "application/json;odata=verbose"

Here is example of how to do that in SPFx: Display SharePoint list items using SPFx.

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 2 · 2022-04-22T06:04:58.207Z

TongZhangMSFT-7548 answered Apr 22, '22 TongZhangMSFT-7548 commented Apr 25, '22

Hi @MahimaK-6741,

Based on my research and testing, you can follow this document to create a SPFx Web Part to retrieve SharePoint list items using REACT and REST API.

Hope it can help you, thanks for your understanding and support.

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

TongZhangMSFT-7548 · Apr 25 at 08:05 AM

Hi @MahimaK-6741,

I am checking to see if the problem has been resolved. If you have any questions or progress, you can contact me in time.

0 ·

question