Thursday, July 17, 2014


In journey of Yammer - SharePoint integration till now we have seen various available approaches. We have taken some real time scenarios and saw how we can implement them. We saw how to use Yammer web part's various options and create community in  SharePoint. After web part we saw Yammer Embed integration options.

Yammer  web part and embeds are just ready made  solution and we don't have controls to modify them.  We cannot control what data needs to be display, how it should get displayed. But in case of Yammer REST API we have better control on data display and behave of application. You can do implementation as per the requirement. With these REST endpoint you can fetch and submit information to Yammer. These end points supports JSON and xml.

Following Yammer objects have REST endpoints: Messages, Groups, Users, Relationship, Notification, Suggestions, Subscription, Autocomplete, Invitation, Search and Networks.

Now lets see how  to write code for Yammer REST API. This is simple, you just need to know REST and JavaScript. The SDK has been provided by Yammer which makes life more easier for developers. Just use the api as it is and start coding against Yammer. In Apr/May Yammer Team has published new REST libraries due to security reasons. So we will discuss here only on new way of writing code.

Following code snippets is standard and I  will explain each line for you.

1.     <script type="text/javascript" data-app-id="YOUR-APP-CLIENT-ID" src="https://assets.yammer.com/assets/platform_js_sdk.js"></script>       
2.      yam.getLoginStatus(
3.             function (response) {
4.                if (response.authResponse) {
5.                        //WRITE CODE TO CALL REST ENDPOINTS
6.                }
7.                        else {
8.                    yam.platform.login(function (response) {
9.                        if (!response.authResponse) {
10.                                    //WRITE CODE TO CALL REST ENDPOINTS
11.                        }
12.                   });
13.               }
14.            });

Lets see every code line in detail:

Line 1. This line loads the required sdk through this library. This is important library and must be included. You also need to provide data-app-id.
Line 2. Next line gets the Yammer login status of user using method yam.getLoginStatus which returns login status.
Line 3. This line has function which gets called in response to getLoginStatus call.
Line 4. This line has if loop which checks auth response is true or not if it is true then it execute next line means control comes in if loop that means user has already logged in. But if auth response is false then it goes to else block.
Line 5. At line 5 start writing your code and calls to REST endpoints.
Line 7. Else block gets executed when user is not logged in.
Line 8. At this line yam.platform.login opens pop up for user to login to Yammer.
Line 10. Write the logic and Yammer REST endpoints calls same as at line 5. This if block gets executed when user gets logged in successfully.

So in this way you can start Yammer REST API coding. Is it simple? Yes it is simplest. With these APIs you can write powerful components for integration with SharePoint. We will see each endpoint in detail.

Happy SharePoint coding.



Tuesday, July 8, 2014


In previous post we saw how to put multiple groups feed on the single page. This is one of the advantages of Yammer embed over web part. In this post we will see how to show different important personals feed on the page.

Sometime Organization wants to display updates from their key personal on the portal. This helps employees to get updates from these key personals on the portal and on the single page; no need of extra page navigation. You can implement this with Yammer embedding for user.Lets see how we can do it.

Steps to add multiple User’s feed on SharePoint page:

      1.      Create a html file with below code.
  
        <select id="selectGroup">
        <option value="userid1">User 1 </option>
        <option value="userid2">User 2 </option>
        </select>
        <div id="embedded-feed" style="height:800px;width:400px;"></div>  
        <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="https://assets.yammer.com/assets/platform_embed.js"></script>
        <script>
                yam.connect.embedFeed({
                container: "#embedded-feed",
                network: "network.com",
                feedType: "user",
                feedId: "userid1"}); 
                $( "#selectGroup" ).change(function() {               
                $( "#embedded-feed" ).html("");
                yam.connect.embedFeed({ 
                container: "#embedded-feed", 
                network: "network.com", 
                feedType: "user", 
                feedId: this.value});
               }); 
     </script>


      2.      Upload file to the Site assets library.
      3.      Go to the SharePoint page where you want to implement multiple Users’s feed.
      4.      Open page in edit mode.
      5.      Add content editor web part and edit properties.

      


      6.      Give above html file path in content link of web part.

      7.      Save and close the page. You are ready to use your new component.



Now all employees can see updates from key personal easily. They can also post reply, they can like and share posts from their itself. Embeds are easy way to implement such requirements easily and quickly. Embed coding takes less time to develop components in compare with REST coding. They also provides real time updates also.


In this way we learn how to put multiple users feed on the page.

Happy SharePoint coding.

Monday, July 7, 2014


In last two posts we saw how to use Comments Embed to implement Conversations or Commenting on documents and blogs. In this post we will see how to use group embed. The question will come in your mind that if there is Yammer web part with which group feeds can be integrated or displayed on page then why Embeds? Embed will be helpful in case where farm deployment is not allowed. Also take scenario where you want to display multiple group's feeds on single page. This cannot be done with web part as only one instance of web part is allowed.

In such scenarios embeds can be used. In this post we will take above scenario where feeds of multiple groups needs to be display on page.  The requirement is there will be drop down which shows groups and whenever group is selected in drop down it's feeds should get displayed. Lets see how we can achieve it.


Steps to add multiple Group’s feed on SharePoint page:

      1.    Create a html file with below code.
      <select id="selectGroup">
      <option value="all">All Company </option>
      <option value="feedid1">Development </option>
      <option value="feedid2">Unit Test </option>
      </select>
     <div id="embedded-feed" style="height:800px;width:400px;"></div> 
      <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
      <script src="https://assets.yammer.com/assets/platform_embed.js"></script> 
      <script>
      yam.connect.embedFeed({
                container: "#embedded-feed",
                network: "network.com",
                feedType: "group",
                feedId: "all"}); 
      $( "#selectGroup" ).change(function() {               
                $( "#embedded-feed" ).html("");
                yam.connect.embedFeed({ 
                container: "#embedded-feed", 
                network: "network.com", 
                feedType: "group", 
                feedId: this.value});
         }); 
     </script>


2.      Upload file to the Site assets library.
      3.   Go to the SharePoint page where you want to implement multiple group’s feed.
      4.   Open page in edit mode.
      5.      Add content editor web part and edit properties.



      6.      Give above html file path in content link of web part.



      7.      Save and close the page. You are ready to use your new component.



You can make it fully dynamic by using Groups REST to load group drop down control. We will see this in coming posts. You can customize Yammer integration as much as you want with various options.


Happy SharePoint coding.

Sunday, July 6, 2014


In last post we saw how we can enable Yammer conversations around documents which is also known as Open Graph (OG) conversations. Now lets see how to implement same here for blogs. SharePoint Blog is one of social feature which is used vastly in intranets. The blog templates comes with default comment section. But if you have Yammer then it is better than default comment section.

The benefits of Yammer Comments Embed is that it will reach to maximum number of users quickly and collect replies and thoughts of other people on the blog's content. And this is what the person or dept or organization wants about their blogs. Blogs are nothing but the Voice of person or department or organization, it should reach to maximum people and in quick time. And here the Yammer helps you. Yammer Comments embed helps to allow replies or comments on post, liking post, sharing posts, etc. The best thing this embed gives is the 2 way communication. Both publisher and listeners can take part in conversations or discussion. Another advantage is publisher can get notification quickly on post through Yammer notification.

Now lets see how to configure Yammer Comments Embed on Blog page.

Steps to put the embed code:

1.Create html file and put below code (replace network with your network) in it and save it.
<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script> 
yam.connect.embedFeed({
 network: "network.com",
 container: "#embedded-feed",
 feedType: "open-graph"
});
</script>

2.Upload the file to the Site Asset library of the SharePoint.

3.Go to the Blog site where you want to implement Comment embed code.

4.Open any blog; all blog gets open in Posts.aspx by default. So we will put our embed code on this page.

5.Open Posts.aspx page in edit mode.



6.Add content editor web part.

7.Give the url of uploaded html file in Content link section of content editor web part(web part properties) .


8.Save the page. You are ready to use comment feed.



Is it simple to use Yammer embed? Yes it is. Anyone who knows html and JavaScript can configure it.
HappySharePoint coding.

Saturday, July 5, 2014

SharePoint is Content Management Portal (CMP). And being CMP it has facility to store the documents. SharePoint not only stores documents but also manage them. Manage means: Upload, Edit, Manage versions, and important one is collect the feedbacks from others and save it. The feedback is collected in the form of comments and rating. SharePoint 2013 provides comment feature for all document libraries.

Now if you have Yammer as social site then you will want: Update everyone within group/network about document being uploaded or updated. Start the social conversations around the documents which is called as conversations in Yammer and Commenting in SharePoint. SharePoint commenting feature is there but it does not help to do anything with Yammer. Now the question arises how to get Yammer conversations on SharePoint documents? The answer is Yammer Embed code.

In previous article we saw all options of integration with Embedding code. And the Comment Embed code is important in this scenario. Now let see how we can use Yammer Comments embed to start conversations around each document in document library. Each document has its own conversations. When the first end user posts something about document then open graph object gets created. It is also known as OG (Open Graph) object. Users can do all social activities: Liking, replying, sharing, etc. To achieve this we will put Comment embed code on Document library's view properties page : Dispform.aspx page.

Steps to put the embed code:

1. Create a html file and put below code (replace network with your network) in it and save it.

<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://assets.yammer.com/assets/platform_embed.js"></script>
<script> 

yam.connect.embedFeed({
 network: "network.com",
 container: "#embedded-feed",
 feedType: "open-graph"
});

</script>

2. Upload the file to the Site Asset library of the SharePoint.

3. Go to the document library where you want to implement Comment embed code.

4. Open properties page(dispForm.aspx) of any document.

5. Open this page in edit mode.

6. Add content editor web part.

7. Give the url of uploaded html file in Content link section of content editor web part(web part properties) .

8. Save the page. You are ready to use comment feed.



Now when the first user posts something with this embed section a open graph object gets created in yammer and it starts conversation for that document. Each document in this library will have separate open graph object, it means every document will have unique conversation thread.
In this way embed is integrated with SharePoint document. The document sharing with all instantly; Collaboration is so easy.

About security and permission on document? The document library is placed in SharePoint so it will take SharePoint permissions and security. And security of post/ Object graph comes under Yammer security and permissions.In this way we saw how to use OG object.

Happy SharePoint coding.

Wednesday, July 2, 2014

Yammer embeds are self functional JavaScript widgets which displays specified feeds. They also give option to post update, reply to post, like to post, etc. This is simplest way with which you can integrate Yammer in your html based applications. In previous posts we saw how to use Yammer web part but it is tightly coupled with SharePoint. What if you want Yammer integration with ASP.net application, java application? So in these cases you can opt Yammer embeds.

With the help of Yammer Embeds you can show following feeds on your application pages: My feed, user feed, group feed, Topic feed and commenting - OG object feed. Users need to login to Yammer to see the feed. New version works with SSO; will see it later.

Apart from feeds there are two Action buttons have been provided: Like and Follow. You can put those Action buttons on pages and can start social conversations; for example you can place it on blog page, on display page of list or library. The first user logged in with Yammer creates the OG (Open Graph) object in Yammer. We will see them in details in coming blogs.

To start with embed feeds you should know what is permalink, feed type, feed id.

Permalink: It is nothing but your network name with which you have crated network on Yammer. So let say if you created yammer network with name 'abc.com' then permalink is abc.com . This is important parameter for embed feeds.

Feed id: This is nothing but the yammer id of User, Group, conversations, topics, etc.

Feed type: This depicts the type of feed it may be user , group, topic.


Difference between Yammer web part and Yammer Embed:

Sr. No.
Web Part
Embed Feeds
1
Only one web part can be placed on page.
Multiple embed code can be placed on page.
2
One time settings and can’t be changed on run time.
Settings can be changed.
3
Tightly coupled with SharePoint.
Not tightly coupled with SharePoint
4
File Link available
File Link option not available
5
Comment feed not available.
Comment feed is available.




Now lets see how to use them. I am going to explain Yammer embed uses through some scenarios. So all posts will have a specific scenario and accordingly the feed will be used. The posts will be like below:

1. Yammer - SharePoint Embed integration: How to start OG conversations on documents in document library?

2. Yammer - SharePoint Embed integration: How to start OG conversations/commenting on Blogs ?

3. Yammer - SharePoint Embed integration: How to display multiple groups feed on page?

4. Yammer - SharePoint Embed integration: How to display multiple Users feed on a page?

5. Yammer - SharePoint Embed integration: How to display My Feeds?

So prepare for another great journey with yammer embed integration.