Tuesday, October 31, 2017

Read SharePoint list Items using REST API and ReactJS

Read SharePoint list Items using REST API and ReactJS

Step1: Create a "ReactDemo" list and list columns as shown below.

Step2: Create an HTML page and saved as "react.html" and upload into Site Assets library in SharePoint. Copy the "react.html" file full url from for future reference. Update below in "react.html" file.

react.html:
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style></style>
</head>
<body>
  <div id="container"></div> 
  <script type="text/babel">
    var destination = document.querySelector("#container");
    class LinksClass extends React.Component {
        debugger;
        constructor() {
            super();
            this.state = {
                Links: [
                    {
                        "Link_x0020_Title": "",
                        "Title": ""
                    }
                ]
            };
        }
        componentDidMount() {
            debugger;
            this.RetrieveLinksData();
        }
        RetrieveLinksData() {
            var reactHandler = this;
            var objHeaders = {
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose"
                },
                mode: 'cors',
                cache: 'default',
                credentials: 'include'
            }
            fetch("https://sharepointonline01.sharepoint.com/sites/dev/_api/web/lists/getbytitle('ReactDemo')/items",
                objHeaders).then(function (response) {
                return response.json()
            })
            .then(function (json) {
                var results = json.d.results;
                reactHandler.setState({Links: results});    
            })
            .catch(function (ex) {
                console.log('parsing failed', ex)
            })
        }
        render() {
            debugger;
            return (
                <div>
                    <h4>Links</h4>
                    <ul>
                        {this
                            .state
                            .Links
                            .map(function (item, key) {
                                return (
                                    <li key={key}>
                                        <a href={item.Link_x0020_Title.Url}>
                                            {item.Title}
                                        </a>
                                    </li>
                                );
                            })
                          }
                    </ul>
                </div>                  
            );
        }
    }
    ReactDOM.render(
      <LinksClass/>,
      document.getElementById('container')
    );
</script>
</body>
</html>


Step3: Create a webpart page and add content editor webpart in to the page. update content link url with "react.html" page url.

Step4: final result.

27 comments:

  1. Nice Blog!
    I've gone through all the the blog regarding Sharepoint with react to design and develop the great app and I believe that this is the best blog one can learn with. I was looking to hire reactjs development company in India and got your blog.
    Thanks for such a great article.

    ReplyDelete
  2. Good one to begin। With SharePoint and reactjs You may please add other crud operationd in it।

    ReplyDelete
  3. Can you let me know how we can get people or group field value

    ReplyDelete
  4. Thank you for some other informative blog. You can fill your Indian business visa application form online within 5 to 10 minutes and then pay India business visa cost online.

    ReplyDelete
  5. There's a strong recipe I'll impart to you in a second that will assist you with taking on new technology quicker in your business. managed it services newcastle

    ReplyDelete
  6. Directory For PlacesMarch 16, 2023 at 1:33 PM

    https://bit.ly/directory-for-places Directory for Places is a platform that values the power of storytelling, as evidenced by its focus on user-generated content. By sharing their experiences and recommendations, users can inspire others and create a sense of community around travel and adventure.
    A business guide provides information and guidance on various aspects of business management and ownership.

    ReplyDelete
  7. In addition to its user-friendly features, https://mapishere.com/ is also committed to providing a safe and secure experience for all its users. The website takes data privacy and security seriously, and employs advanced encryption and authentication measures to protect user data and ensure that all transactions are secure.
    This way you can get a lot of information. Keep researching and reviewing.

    ReplyDelete

Featured Post

Azure Scripts

 Azure Scripts: Azure > Storage account > File shares > SMB File share To connect to this Azure file share from Windows, run the Po...

Popular posts