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.

Featured Post

Azure AI services | Language service | Azure Cognitive Search | Sentiment analysis and opinion mining

Azure AI services | Language service | Azure Cognitive Search | Sentiment analysis and opinion mining 1. Create a Language resource in Azure...

Popular posts