React zur Anzeige von News im SharePoint

Heute wollen wir News im SharePoint mit Hilfe von React anzeigen. Für die Entwicklung verwenden wir Visual Studio Code. Dazu öffnen wir mit Visual Studio Code den Ordner, in dem das Projekt erstellt werden soll. Im Anschluss wird mit den folgenden Befehlen das Projekt „newsview“ erstellt.

npm install -g create-react-app
create-react-app newsview

Da wir das Script später im SharePoint über ein Inhaltseditor-Webpart ausführen wollen, benötigen wir die App nicht.
Wir erstellen jetzt eine neue Datei „newsview.js“ im Ordner „src“.

Die Datei wird unser JavaScript zum Abrufen der Daten und der Darstellung der News enthalten. In diese Datei fügen wir folgenden Code ein.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var NewsView = React.createClass({
    startUrl: "http://austin/react/_api/Web/Lists/GetByTitle('News')/items?$orderby=Id&$top=5",
    next: function () {
        var url = "";
        if (this.state.nextUrl != "") {
            url = this.state.nextUrl;
        } else {
            url = this.startUrl;
        }
        this.getItems(url);
    },
    getItems: function (url) {
        var th = this;
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                var prevUrl = th.state.currentUrl;
                var curUrl = url;
                th.setState({
                    newsItems: data.d.results,
                    nextUrl: data.d.__next
                });
            },
            error: function (data, second) {
                //Fehlerbehandlung
            }
        });
    },
    render: function () {
        return (
            <div>
                <div style={{ 'font-size': '20px' }}>Ankündigungen:</div>
                {this.state.newsItems.map(function (item) {
                    return (
                        <div>
                            <div style={{ 'font-size': '16px', 'font-weight': 'bold', 'padding-top': '10px' }}>{item.Title}</div>
                            <div dangerouslySetInnerHTML={{ __html: item.Body }}></div>
                        </div>
                    );
                })}
                <div style={{ 'text-align': 'right' }}>
                    <button style={{ 'margin-top': '20px' }} type="button" onClick={this.next}>weiter</button>
                </div>
            </div>
        );
    },
    getInitialState: function () {
        return {
            newsItems: [],
            nextUrl: ""
        }
    },
    componentDidMount: function () {
        this.next();
    }
});

ReactDOM.render(<NewsView />, document.querySelector('#divNewsView'));

 

Da unser Code noch JSX enthält, benötigen wir noch eine Komponente, die uns das JSX in React Funktionsaufrufe übersetzt. Dazu nutzen wir „babel-plugin-transform-react-jsx“. https://www.npmjs.com/package/babel-plugin-transform-react-jsx
Um das Plugin verwenden zu können, installieren wir dieses mit den folgenden Befehlen:

npm install –save-dev babel-cli
npm install –save-dev babel-plugin-transform-react-jsx

Nun führen wir den folgenden Befehl aus, um das JSX in JavaScript zu übersetzen:

node_modules\.bin\babel src\newsview.js –presets react

Wir sollten folgenden Code erhalten:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
var NewsView = React.createClass({
    displayName: "NewsView",

    startUrl: "http://austin/react/_api/Web/Lists/GetByTitle('News')/items?$orderby=Id&$top=5",

    next: function () {
        var url = "";
        if (this.state.nextUrl != "") {
            url = this.state.nextUrl;
        } else {
            url = this.startUrl;
        }

        this.getItems(url);
    },

    getItems: function (url) {
        var th = this;
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            success: function (data) {
                var prevUrl = th.state.currentUrl;
                var curUrl = url;
                th.setState({
                    newsItems: data.d.results,
                    nextUrl: data.d.__next
                });
            },
            error: function (data, second) {
                //Fehlerbehandlung
            }
        });
    },
    render: function () {
        return React.createElement(
            "div",
            null,
            React.createElement(
                "div",
                { style: { 'font-size': '20px' } },
                "Ank\xFCndigungen:"
            ),
            this.state.newsItems.map(function (item) {
                return React.createElement(
                    "div",
                    null,
                    React.createElement(
                        "div",
                        { style: { 'font-size': '16px', 'font-weight': 'bold', 'padding-top': '10px' } },
                        item.Title
                    ),
                    React.createElement("div", { dangerouslySetInnerHTML: { __html: item.Body } })
                );
            }),
            React.createElement(
                "div",
                { style: { 'text-align': 'right' } },
                React.createElement(
                    "button",
                    { style: { 'margin-top': '20px' }, type: "button", onClick: this.next },
                    "weiter"
                )
            ));
    },
    getInitialState: function () {
        return {
            newsItems: [],
            nextUrl: ""
        };
    },

    componentDidMount: function () {
        this.next();
    }

});

ReactDOM.render(React.createElement(NewsView, null), document.querySelector('#divNewsView')); 

 

Als Nächstes erstellen wir eine Datei in einer Bibliothek im SharePoint, z.B. „Websiteobjekte“ und fügen folgenden Code ein:

1
2
3
4
5
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="divNewsView"></div>
 <script type="text/javascript">

</script>

 

Den generierten Code fügen wir innerhalb des Script Tags ein. Im Anschluss referenzieren wir dieses Script in einem Inhaltseditor-Webpart und rufen die Seite auf.
Das Ergebnis sollte wie folgt aussehen:

Leave a Comment

Your email address will not be published. Required fields are marked *