Post/Reply a post by Social feed REST API in SharePoint 2013

As we know, we can post/reply a post in Newsfeed for my site, but how can we apply by JS? SharePoint provide the REST API for developer to apply it.

You can use the SharePoint 2013 Representational State Transfer (REST) service to do the same things that you can do with the .NET client object models and the JavaScript object model. The REST service exposes resources that correspond to SharePoint objects, properties, and methods. To use the REST service, you build and send HTTPGET andPOST requests to the resource endpoints that represent the tasks you want to do

The endpoint URIs for most feed tasks begin with the SocialRestFeedManager resource (social.feed), followed by themy resource or thepost resource:

  • The my resource represents the current user. When used inline in the endpoint URI, it sets the context of the request to the current user. For example,http://contoso.com/_api/social.feed/my/news gets the newsfeed for the current user.


here is the result:

a. Create the UI via html

b. New and Reply a post via my js code


c. Verify the result in Newsfeed

a. you can new a post (Post)

b. you can reply a specify post via getting the post id when click any post title(Reply)

c. you can view all post by current user (All)

here is the rest api in detail:

New a post:

$.ajax( {
        url: weburl + "/_api/social.feed/my/Feed/Post",
        type: "POST",
        data: JSON.stringify( { 
            'restCreationData':{
                '__metadata':{ 
                    'type':'SP.Social.SocialRestPostCreationData'
                },
                'ID': null, 
                'creationData':{ 
                    '__metadata':{ 
                        'type':'SP.Social.SocialPostCreationData'
                    },
                    'ContentText': “the post content text”,
                    'UpdateStatusText':false
                } 
            } 
        }),
        headers: { 
            "accept": "application/json;odata=verbose",
            "content-type":"application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function(){console.log("success to post ");},
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("POST error:\n" + xhr.status + "\n" + thrownError);
        }
    });


Reply a post:

    $.ajax( {
        url: weburl + "/_api/social.feed/post/reply",
        type: "POST",
        data: JSON.stringify( { 
            'restCreationData':{
                '__metadata':{ 
                    'type':'SP.Social.SocialRestPostCreationData'
                },
                'ID': PostID 
                'creationData':{ 
                    '__metadata':{ 
                        'type':'SP.Social.SocialPostCreationData'
                    },
                    'ContentText': ”the reply content text”,
                    'UpdateStatusText':false
                } 
            } 
        }),
        headers: { 
            "accept": "application/json;odata=verbose",
            "content-type":"application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function(){console.log("reply to success");},
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("POST error:\n" + xhr.status + "\n" + thrownError);
        }
    });


The complete code:

Note: just add the code inside the Script Editor web part in page

Post : <input type="text" class="postcontent"/>  
<div class="newpost" style="width:40px; background-color:gray; padding-left:10px"> Post </div>

Reply : <input type="text" class="replycontent"/>  
<div class="replypost" style="width:40px; background-color:gray; padding-left:10px;margin-top:10px"> Reply </div>

    <div class="allpost" style="width:40px; background-color:gray; padding-left:10px;margin-top:10px"> All </div>
<div class="message"></div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var feedManagerEndpoint;

// Get the SPAppWebUrl parameter from the query string and build
// the feed manager endpoint.
$(document).ready(function () {
    var appweburl= "http://tristan-02";
    
    feedManagerEndpoint = decodeURIComponent(appweburl)+ "/_api/social.feed";

    $(".newpost").on("click", function(){
        postToMyFeed();
    });
    $(".replypost").on("click", function(){
        Reply();
    });

   
    $(".allpost").on("click", function(){
        getMyFeed();
    
    });
});

//reply post

function Reply() {
    $.ajax( {
        url: feedManagerEndpoint + "/post/reply",
        type: "POST",
        data: JSON.stringify( { 
            'restCreationData':{
                '__metadata':{ 
                    'type':'SP.Social.SocialRestPostCreationData'
                },
                'ID': $(".postcontent").val(), 
                'creationData':{ 
                    '__metadata':{ 
                        'type':'SP.Social.SocialPostCreationData'
                    },
                    'ContentText':$(".replycontent").val(),
                    'UpdateStatusText':false
                } 
            } 
        }),
        headers: { 
            "accept": "application/json;odata=verbose",
            "content-type":"application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function(){console.log("reply to success");},
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("POST error:\n" + xhr.status + "\n" + thrownError);
        }
    });
}


// Publish a post to the current user's feed by using the 
// "<app web URL>/_api/social.feed/my/Feed/Post" endpoint.
function postToMyFeed() {
    $.ajax( {
        url: feedManagerEndpoint + "/my/Feed/Post",
        type: "POST",
        data: JSON.stringify( { 
            'restCreationData':{
                '__metadata':{ 
                    'type':'SP.Social.SocialRestPostCreationData'
                },
                'ID': null, 
                'creationData':{ 
                    '__metadata':{ 
                        'type':'SP.Social.SocialPostCreationData'
                    },
                    'ContentText':$(".postcontent").val(),
                    'UpdateStatusText':false
                } 
            } 
        }),
        headers: { 
            "accept": "application/json;odata=verbose",
            "content-type":"application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function(){console.log("success to post ");},
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("POST error:\n" + xhr.status + "\n" + thrownError);
        }
    });
}

// Get the current user's feed by using the 
// "<app web URL>/_api/social.feed/my/Feed" endpoint.
function getMyFeed() {
    $.ajax( {
        url: feedManagerEndpoint + "/my/Feed",
        headers: { 
            "accept": "application/json;odata=verbose"
        },
        success: feedRetrieved,
        error: function (xhr, ajaxOptions, thrownError) { 
            alert("GET error:\n" + xhr.status + "\n" + thrownError);
        }
    });    
}

// Parse the JSON data and iterate through the feed.
function feedRetrieved(data) {
    var stringData = JSON.stringify(data);
    var jsonObject = JSON.parse(stringData); 
 
    var feed = jsonObject.d.SocialFeed.Threads; 
    var threads = feed.results;
    var feedContent = "";
    for (var i = 0; i < threads.length; i++) {
        var thread = threads[i];
        var participants = thread.Actors;
        var owner = participants.results[thread.OwnerIndex].Name;
        feedContent += "<div class='postitem'>" + "<span class='owner'>" + owner + " : </span>"+ "<span class = 'posttext'>" +thread.RootPost.Text + "</span>"+ "<div class='postid'>"+ thread.RootPost.Id+"</div>" +"</div>" ;
    }  
    $(".message").html(feedContent); 

    $(".postitem").on("click", function(){
        var id = $(this).find(".postid").text();
        $(".postcontent").val(id);
    
    });
}

</script>

<style>
.postitem {
    margin-top:10px;
}
.postitem > .owner{
    color: green;
}
.postitem > .postid{
    display:none;
}

.postitme > .posytext{
   //
}

</style>




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章