EXERCISE 5-1: CREATE CUSTOM OPEN GRAPH OBJECTS FOR THE SPDS University APP

In this exercise you learn to create Open Graph’s custom objects. First take a look at Table 5-7, which describes custom objects and their actions used in this exercise.

We will create the objects mentioned in Table 5-7 using the Yammer user interface. Let’s start:

1. Navigate to https://www.yammer.com/client_applications.
2. Alternatively, you can navigate to the registered apps using the Ellipsis button (…) and then choose Created Apps from drop-down menu, as illustrated in Figure 5-11.

   

   Figure 5-11. Registered Applications view

3. Click on the SPDS University app from the Registered Application screen.
4. From the Yammer App configuration page, click on Open Graph on the left side of the screen.

   

   Figure 5-12. Yammer App configuration page

5. You will be presented with the screen shown in Figure 5-13. Enter training_object for the namespace of the custom Open Graph object.

   

   Figure 5-13. The Yammer app's Open Graph page to configure namespace

6. After entering the namespace, we will configure the object type called seminar. In the Type textbox, enter seminar. In the singular form, enter a seminar and the plural form should be seminars. Finally, click on Save.

   

   Figure 5-14. The Yammer app’s Open Graph types

7. Configure the object type called survey. In the Type textbox, enter survey, and in singular form, enter a survey. The plural form should be surveys. Finally, click on Save.

   

   Figure 5-15. The Yammer app’s Open Graph type definitions

8. Now you’ll configure the object type called training_material. In the Type textbox, enter training_material. In the singular form, enter a training material. The plural form should be training materials. Then click on Save.

   

   Figure 5-16. The Yammer app’s Open Graph type definitions

9. In this step, you’ll configure the object type called training_monthly_calendar. In the Type textbox, enter a training monthly calendar. In the singular form, enter a training monthly calendar. The plural form should be training monthly calendars. Then click on Save.

   

   Figure 5-17. The Yammer app’s Open Graph type definitions

10. Now configure the object type called training_video, In the Type textbox, enter training_video. In the singular form, enter a training video. The plural form is training videos. Then click on Save.

At this point of time, you have successfully configured the Open Graph custom objects for the Yammer app called SPDS University. We will use those objects in the next exercise to write data into Yammer’s activity.

EXERCISE 5-2: BUILD ASP.NET SPDS University WEB APPLICATION INTEGRATION WITH YAMMER USING OPEN GRAPHS

In this exercise, we are going to use the same web application that we developed in Exercise 4-1 to implement writing data into Yammer using Open Graph. We are going to add more classes, methods, and UI control to write data into Yammer from an ASP.NET web applications using the Open Graph protocol.

Open the Existing Project

In Chapter 4, you learned about implementing authentication by developing ASP.NET web application. If you have not developed that ASP.NET web application by following the detailed steps in Exercise 4-1, we strongly recommend that you read Chapter 4 and create a new project by following the step-by-step guide to implement authentication.

1. Launch Microsoft Visual Studio and open the existing project that you created in Exercise 4-1. The structure of the project should look like Figure 5-19.

   

   Figure 5-19. Existing ASP.NET web application project structure developed in Exercise 4-1

   Classes for Yammer Activity

   Yammer REST APIs exchange data using XML (Extensible Mark-Up Language) and JSON (JavaScript Object Notation) textual data formatting. When you make a request to Yammer, Yammer responds by returning XML or JSON data, depending on which data format you request. You can then parse that data and go joyfully on your programming way. We’ll write a bunch of .NET classes that we can use to serialize and deserialize back and forth. Let’s take a look at a few classes required at this stage.

   Table 5-8. .NET Classes to Write Data into Yammer Using Open Graph

   Class	Description
   OG_GraphObj_Instance	This class represents the actual Graph Object that describes the object using attributes like URL (unique property), type of object, image, name, and title of the object.
   OG_Actor	This class represents the actor—a user who acts on the object, using attributes name and email.
   OG_Activity	This class represents the activity with attributes for actor and action.
   OG_GraphObj	This class represents the activity object and a function to convert the object into a string.
   YammerUtility	We have already designed this class in a previous chapter and we going to add few methods to this class to enhance the functionality of our web applications.

2. OG_GraphObj_Instance.cs: Add a class to the App_Code folder and name it OG_GraphObj_Instance.cs, as illustrated in Figure 5-20.

   

   Figure 5-20. Add a new class to the project

3. Open the class file and add the following code to the class. This class defines properties such as URL, Type, Title, Image, and Description for the Open Graph object.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Xml.Serialization;
   using System.Diagnostics;
   using System.Runtime.Serialization;
   using System.Runtime.Serialization.Json;
   
   namespace SPDS UniversityWebApplication.App_Code
   {
       /// <summary>
       /// This class represents the actual Graph Object which describes the object using attributes
       /// like URL (Unique property), type of object, image, name and title of the object
       /// </summary>
       [DataContract]
       public class OG_GraphObj_Instance
       {
           [DataMember(Name = "url")]
           public string Url { get; set; }
   
           [DataMember(Name = "type")]
           public string Type { get; set; }
   
           [DataMember(Name = "title")]
           public string Title { get; set; }
   
           [DataMember(Name = "image")]
           public string Image { get; set; }
   
           [DataMember(Name = "description")]
           public string Description { get; set; }
       }
   
   }

   An Open Graph object is the key piece of any activity. It represents an entity instance in your app, such as an URL, Title, Page, Place, Person, Team, Project, and Folder, and so on.

   Table 5-9. OG_GraphObj_Instance Class’s Attributes

   Property	Description
   URL	This URL property represents the URL of the object, such as the URL of the document path or the web URL.
   Type	The type represents the object type, such as document, page, and link.
   Title	The title property represents the title that will be shown in the recent activity widget.
   Image	Represents an image that can be associated with an object.
   Description	Represents the details description for the object.

4. OG_Actor.cs: Add another class to the App_Code folder and name it OG_Actor.cs. After that, open the class file and add the following code to the class. This class represents an actor, which defines properties such as name and email.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Runtime.Serialization;
   using System.Runtime.Serialization.Json;
   using System.IO;
   using System.Xml.Serialization;
   using System.Diagnostics;
   
   namespace SPDS UniversityWebApplication.App_Code
   {
       /// <summary>
       /// This class represents the Actor, user who acts on the object, using attributes name and email
       /// </summary>
       [DataContract]
       public class OG_Actor
       {
           [DataMember(Name = "name")]
           public string Name { get; set; }
   
           [DataMember(Name = "email")]
           public string Email { get; set; }
   
           public OG_Actor() { }
   
           public OG_Actor(string name, string email)
           {
               this.Name = name;
               this.Email = email;
           }
       }
   }

   The actor class defines the properties listed in Table 5-10.

   Table 5-10. OG_Actor Class’s Attributes

   Property	Description
   Name	This property represents the Yammer’s username
   Email	This property represents the Yammer user email as per the Yammer account.

5. OG_Activity.cs: Add another class to the App_Code folder and name it OG_Activity.cs. Open the class file and add the following code to the class. This class represents the actual Yammer activity that defines properties such as an instance of OG_Actor, an instance of OG_GraphObj_Instance, and a list object for users, messages, and actions such as create, update, delete, like, and follow.

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Runtime.Serialization;
   using System.Runtime.Serialization.Json;
   using System.IO;
   using System.Xml.Serialization;
   using System.Diagnostics;
   
   namespace SPDS UniversityWebApplication.App_Code
   {
       /// <summary>
       /// Summary description for YammerOG_Activity
       /// </summary>
       [DataContract]
       public class OG_Activity
       {
           [DataMember(Name = "actor")]
           public OG_Actor Actor { get; set; }
   
           [DataMember(Name = "action")]
           public string Action { get; set; }
   
           [DataMember(Name = "object")]
           public OG_GraphObj_Instance Object { get; set; }
   
           [DataMember(Name = "message")]
           public string Message { get; set; }
   
           [DataMember(Name = "private")]
           public bool Private { get; set; }
   
           [DataMember(Name = "users")]
           public List<OG_Actor> Users { get; set; }
   
           public OG_Activity()
           {
               this.Actor = new OG_Actor();
               this.Object = new OG_GraphObj_Instance();
               this.Users = new List<OG_Actor>();
               this.Private = false;
           }
       }
   }

   Table 5-11. OG_Activity Class’s Attributes

   Property	Description
   Action	This property represents the action on an object, such as Create, Update, Delete, Like, and Follow.
   Message	This property represents the message for the activity post, such as “This is for the new sales proposal”.
   Private	This property represents the visibility of the pot, whether you want to mark it as private or public.
   Users	This property represents the user collection object in which more users can be added to the activity who will be notified when this activity is posted.
   Actor	This property represents a user who performing the activity.
   Object	The object property represents the OG_GraphObj_Instance, which is described in the OG_GraphObj_Instance.css class, which contains properties like URL, Title, Description, Image, and the types.

6. OG_GraphObj.cs: Finally, add a class to the App_Code folder and name it OG_GraphObj.cs to the project and add the following code to the class file:

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Web;
   using System.Runtime.Serialization;
   using System.Runtime.Serialization.Json;
   using System.IO;
   using System.Xml.Serialization;
   using System.Diagnostics;
   
   namespace SPDS UniversityWebApplication.App_Code
   {
       /// <summary>
       /// This class represents the Activity Object and a function to convert object into string
       /// </summary>
       [DataContract]
       public class OG_GraphObj
       {
           [DataMember(Name = "activity")]
           public OG_Activity Activity { get; set; }
   
           public OG_GraphObj()
           {
               this.Activity = new OG_Activity();
           }
   
           public override string ToString()
           {
               string jsonData = string.Empty;
   
               try
               {
                   DataContractJsonSerializer ys = new DataContractJsonSerializer(typeof(OG_GraphObj));
                   MemoryStream msBack = new MemoryStream();
                   ys.WriteObject(msBack, this);
                   msBack.Position = 0;
                   StreamReader sr = new StreamReader(msBack);
                   jsonData = sr.ReadToEnd();
   
                   //replace \ with / as in jsonData
                   jsonData = jsonData.Replace("\/", "/");
               }
               catch (Exception ex)
               {
                   Debug.WriteLine("An Error occurred in serializing into string: " + ex.Message);
               }
   
               return jsonData;
           }
       }
   }

7. YammerUtility.cs: This sample application has a class (YammerUtility.cs) that contains all common methods to support the integration. Open YammerUtility.cs.
8. Add the following namespace in the YammerUtility.cs file:

   using System.Text;

9. Add the following to the class named PostRequesttoYammer in YammerUtility.cs:

   /// <summary>
   ///
   /// </summary>
   /// <param name="postBody"></param>
   /// <param name="url"></param>
   /// <param name="authHeader"></param>
   /// <param name="contentType"></param>
   /// <returns></returns>
   public static string PostRequesttoYammer(string postBody, string url, string authHeader = null, string contentType = null)
   {
       string results = string.Empty;
   
       try
       {
   
           HTTPWebReq = WebRequest.CreateHttp(url);
           HTTPWebReq.Method = "POST";
   
           if (!string.IsNullOrEmpty(authHeader))
               HTTPWebReq.Headers.Add("Authorization", "Bearer " + authHeader);
   
           byte[] postByte = Encoding.UTF8.GetBytes(postBody);
   
           if (string.IsNullOrEmpty(contentType))
               HTTPWebReq.ContentType = "application/x-www-form-urlencoded";
           else
               HTTPWebReq.ContentType = contentType;
   
           HTTPWebReq.ContentLength = postByte.Length;
           Stream postStream = HTTPWebReq.GetRequestStream();
           postStream.Write(postByte, 0, postByte.Length);
           postStream.Close();
   
           HTTPWebRes = (HttpWebResponse)HTTPWebReq.GetResponse();
           postStream = HTTPWebRes.GetResponseStream();
           StreamReader postReader = new StreamReader(postStream);
   
           results = postReader.ReadToEnd();
   
           postReader.Close();
           postStream.Close();
       }
       catch (Exception ex)
       {
       }
   
       return results;
   }

   This method takes four parameters, as described in Table 5-12.

   Table 5-12. PostRequesttoYammer Method’s Parameters

   Property	Description
   postBody	The actual body of the post. For Open Graph, the string should be in the <Actor> <Action> <Object> on <App Name>: <Message> format.
   url	The endpoint URL of the Yammer API. In this case, it is https://www.yammer.com/api/v1/activity.json.
   authHeader	The access token received so the user can make subsequent calls.
   contentType	The content type HTTP web request object. In this case, it’s application/x-www-form-urlencoded.

   Posting Object Type: Document

   Default.aspx: You have added all the necessary classes to the App_Code folder, so now it’s time to add the user interface to the web page. This includes adding a button to the default.aspx page, which will include an on click event to trigger the method to write data into Yammer using Open Graph.

10. In the App_Data folder, add the following XML and name it Courses.xml:

    <?xml version="1.0" encoding="utf-8" ?>
    <Courses>
      <Course>
        <Name>SharePoint 2013 App Development</Name>
        <Level>Advanced</Level>
        <Duration>3 Days</Duration>
        <Trainer>Alex Darrow</Trainer>
        <Noofseats>10</Noofseats>
      </Course>
      <Course>
        <Name>Yammer Integration</Name>
        <Level>Advanced</Level>
        <Duration>3 Days</Duration>
        <Trainer>Alex Darrow</Trainer>
        <Noofseats>10</Noofseats>
      </Course>
      <Course>
        <Name>Microsoft AX for Developer</Name>
        <Level>Advanced</Level>
        <Duration>3 Days</Duration>
        <Trainer>Alex Darrow</Trainer>
        <Noofseats>10</Noofseats>
      </Course>
      <Course>
        <Name>C# 4.5 for Developer</Name>
        <Level>Advanced</Level>
        <Duration>2 Days</Duration>
        <Trainer>Alex Darrow</Trainer>
        <Noofseats>10</Noofseats>
      </Course>
    </Courses>

11. Add the following <div> control in Default.aspx, just after </ol>.

    <div id="CourseDiv" runat="server">
            <h3>Upcoming Training&nbsp;</h3>
            <p>
                <asp:XmlDataSource ID="XmlDataSourceCourse"
                runat="server" DataFile="~/App_Data/Courses.xml"></
                asp:XmlDataSource>
    
                <asp:GridView ID="GridView1" runat="server" XPath="/
                Employees/Employee" DataSourceID="XmlDataSourceCourse"
                    AutoGenerateColumns="False" HeaderStyle-
                    BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                    BackColor="White" BorderColor="#336666"
                    BorderStyle="Double" BorderWidth="3px"
                    CellPadding="4" GridLines="Horizontal"
                    Height="124px" Width="985px">
                    <Columns>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Name") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Level") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Duration") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Trainer") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                           <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Noofseats") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
    
                    </Columns>
                    <FooterStyle BackColor="White" ForeColor="#333333" />
    
                    <HeaderStyle BackColor="#336666" ForeColor="White" Font-Bold="True"></HeaderStyle>
                    <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="White" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#F7F7F7" />
                    <SortedAscendingHeaderStyle BackColor="#487575" />
                    <SortedDescendingCellStyle BackColor="#E5E5E5" />
                    <SortedDescendingHeaderStyle BackColor="#275353" />
                </asp:GridView>
            </p>
    
        </div>

12. Add the following key in <AppSettings> in the web.config file.

    <add key="activityURL" value="https://www.yammer.com/api/v1/activity.json" />

13. Add the following HTML markup for a button in the Default.aspx file.

    <table>
        <tr><td><asp:Button ID="btnWriteDataOG" CssClass="button" runat="server" OnClick="btnWriteDataOG_Click" Text="Write Document into Yammer Using OG" Width="363px" /></td></tr>
    </table>

    The button will look like the one shown in Figure 5-21.

    

    Figure 5-21. The Write Document button

14. Default.aspx.cs: You will now add the code in the code-behind file Default.aspx.cs, which is a button’s click event handler code to create the Open Graph object by using the classes you created in the previous steps. The following code creates an object of the class OG_GraphObj and assigns values to properties like actor, message, and actions. The next few lines create an instance of the class YammerGraphObjectInstance, which is used to specify the URL property, the title of the activity, the description of the activity, including an image and type of object (document).

    /// <summary>
            /// Event Handler to write Document object
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void btnWriteDataOG_Click(object sender, EventArgs e)
            {
                SPDS UniversityWebApplication.App_Code.OG_GraphObj
                yammergraphobject = new SPDS UniversityWebApplication.
                App_Code.OG_GraphObj();
    
                yammergraphobject.Activity.Actor = new
                SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik
                Rawal", "[email protected]");
                yammergraphobject.Activity.Message = "Learn the sales
                process in Microsoft Dynamics CRM.";
                yammergraphobject.Activity.Action = "create";
    
                SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yammergraphobjectinst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
                yammergraphobjectinst.Url = "https://spdsuniversity.sharepoint.com/_layouts/15/WopiFrame.aspx?sourcedoc=%7B7614951D-3C30-4924-B815-1354570EE805%7D&file=2014%20Expenses.xlsx&action=default";
                yammergraphobjectinst.Title = "Microsoft Dynamics CRM 2015 User Guide";
                yammergraphobjectinst.Description = "Microsoft Dynamics CRM 2015 User Guide";
                yammergraphobjectinst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
                yammergraphobjectinst.Type = "document";
    
                yammergraphobject.Activity.Object = yammergraphobjectinst;
    
                string postData = yammergraphobject.ToString();
                string activityURL = WebConfigurationManager.AppSettings["activityURL"];
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
            }

    When the page is posted to Yammer using Open Graph, the post will look like Figure 5-22, showing the Recent Activity view.

    

    Figure 5-22. Document Object activity on Yammer

    Posting Object Type: Page

    The Page Object type represents a web page that can be posted as an object into Yammer using the Open Graph. The important object attributes for page are URL of the Page, Title, and Description, Image, and Type.

    Action type: Create, Update, and Delete can be used on object page. Use the right action term provided in the code snippet (such as action: create, action: update, and action: delete).

15. Add the Write Page Object into Yammer Using OG button to the markup in Default.aspx below the button control in the previous step.

    <tr><td><asp:Button ID="btnWriteDataOGPage" runat="server" OnClick="btnWriteDataOGPage_Click" Text="Write Page Object into Yammer Using OG" Width="363px" /></td></tr>

    The button will look like the one shown in Figure 5-23.

    

    Figure 5-23. The Write Page Object button

16. Add a button click event in Default.aspx.cs. Add the following code to Default.aspx.cs:

    /// <summary>
           /// Write a Page Object into Yammer.
           /// </summary>
           /// <param name="sender"></param>
           /// <param name="e"></param>
           protected void btnWriteDataOGPage_Click(object sender, EventArgs e)
           {
               SPDS UniversityWebApplication.App_Code.OG_GraphObj yammergraphobject = new SPDS UniversityWebApplication.App_Code.OG_GraphObj();
    
               yammergraphobject.Activity.Actor = new SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik Rawal", "[email protected]");
               yammergraphobject.Activity.Message = "SPDS University's Training Calendar- View updated calendar";
               yammergraphobject.Activity.Action = "create";
    
               SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yammergraphobjectinst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
               yammergraphobjectinst.Url = "https://spdsuniversity.sharepoint.com/sites/SPDS/Lists/Modern%20Calendar/calendar.aspx";
               yammergraphobjectinst.Title = "SPDS University's Training Calendar";
               yammergraphobjectinst.Description = "SPDS University's Training Calendar- upcoming trainings";
               yammergraphobjectinst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
               yammergraphobjectinst.Type = "page";
    
               yammergraphobject.Activity.Object = yammergraphobjectinst;
    
               string postData = yammergraphobject.ToString();
               string activityURL = WebConfigurationManager.AppSettings["activityURL"];
               string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
           }

    Table 5-13. Object Attribute for a Page Object

    Object Attribute	Description
    Title	This property represents the title of the page.
    URL	This property represents the URL of the page.
    Image	Thumbnail image displayed as a title.
    Description	Page description.

    When the page is posted to Yammer using Open Graph, the post will look as shown in Figure 5-24, the Recent Activity view.

    

    Figure 5-24. Page Object activity on Yammer

    Posting Object Type: Place

    The Page Object type represents a place that can be posted as an object into Yammer using Open Graph. This object type represents a place—such as a venue, a business, a landmark, or any other location—that can be identified by longitude and latitude.

17. Add the Write Place Object into Yammer Using OG button markup in Default.aspx, below the button you added in the previous step.

    <tr><td><asp:Button ID="btnWriteDataOGPlace" runat="server" OnClick="btnWriteDataOGPlace_Click" Text="Write Place Object into Yammer Using OG" Width="363px" /></td></tr>

18. Add a button click event in Default.aspx.cs. Add the following code to Default.aspx.cs.

    /// <summary>
            ///  Write a Place Object into Yammer.
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void btnWriteDataOGPlace_Click(object sender, EventArgs e)
            {
                SPDS UniversityWebApplication.App_Code.OG_GraphObj yammergraphobject = new SPDS UniversityWebApplication.App_Code.OG_GraphObj();
    
                yammergraphobject.Activity.Actor = new SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik Rawal", "[email protected]");
                yammergraphobject.Activity.Message = "SPDS's new Training Venue";
                yammergraphobject.Activity.Action = "create";
                SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yammergraphobjectinst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
                yammergraphobjectinst.Url = "https://www.google.co.uk/maps/place/Oxford+St,+London/@51.5154003,-0.1412821,17z/data=!3m1!4b1!4m2!3m1!1s0x48761ad554c335c1:0xda2164b934c67c1a?hl=en";
                yammergraphobjectinst.Title = "SPDS's new Training Venue";
                yammergraphobjectinst.Description = "We are in process of moving our training location to a new address in the heart of the city";
                yammergraphobjectinst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
                yammergraphobjectinst.Type = "place";
                yammergraphobject.Activity.Object = yammergraphobjectinst;
                string postData = yammergraphobject.ToString();
                string activityURL = WebConfigurationManager.AppSettings["activityURL"];
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
            }

    Table 5-14. Object Attribute for a Place Object

    Object Attribute	Description
    Title	This property represents the title of the place.
    URL	This property represents the URL of the place, possibly the maps in Google.
    Image	Thumbnail image displayed as a title.
    Description	Page description.

    When the place is posted to Yammer using Open Graph, the post will look like Figure 5-25, which shows the activity details view. Figure 5-26 shows the Activity Details page.

    

    Figure 5-25. Yammer Open Graph activity showing a place object

    

    Figure 5-26. Yammer Open Graph activity showing a place object in detail view

    Posting Object Type: Person

    The person object type represents a person or Yammer user that can be specified as an object into Yammer using Open Graph.

    This object type represents a person.

19. Add the Write Person Object into Yammer Using OG button markup in Default.aspx, just below the button markup you added in the previous step.

    <tr><td><asp:Button ID="btnWriteDataOGPerson" runat="server" OnClick="btnWriteDataOGPerson_Click" Text="Write Person Object into Yammer Using OG" Width="363px"  /></td></tr>

20. Add the button click event in Default.aspx.cs.

    /// <summary>
            /// Write Data into Yammer using object type Person
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void btnWriteDataOGPerson_Click(object sender, EventArgs e)
            {
                SPDS UniversityWebApplication.App_Code.OG_GraphObj yOG_obj = new SPDS UniversityWebApplication.App_Code.OG_GraphObj();
    
                yOG_obj.Activity.Actor = new SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik Rawal", "[email protected]");
                yOG_obj.Activity.Message = "Brian Johnson is now #certified  #DynamicCRM2014 expert ";
                yOG_obj.Activity.Action = "create";
                SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yOGobjInst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
                yOGobjInst.Url = "https://www.yammer.com/SPDSpetro.com/users/brianj";
                yOGobjInst.Title = "CRM Certificed";
                yOGobjInst.Description = "Please join me in conguratulating Brian Johnson on his achievement";
                yOGobjInst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
                yOGobjInst.Type = "person";
                yOG_obj.Activity.Object = yOGobjInst;
                string postData = yOG_obj.ToString();
                string activityURL = WebConfigurationManager.AppSettings["activityURL"];
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
            }

    When the person object is posted to Yammer using Open Graph, the post will look as illustrated in Figure 5-27, which shows the activity details view. Figure 5-28 shows the Activity Details page.

    

    Figure 5-27. Yammer Open Graph activity showing a person object

    

    Figure 5-28. Yammer Open Graph activity showing a person object in detail view

    Posting Object Type: Videos

    Similar to the page object, the video object type represents a video file that can be posted to Yammer using Open Graph.

    Action type: create, update, and delete can be used. Use the right action term provided in the code snippet; for example action: create, action: update, and action: delete.

    This object type represents a video object.

21. Add the Write Video Object into Yammer Using OG button to the markup in Default.aspx.

    <tr><td><asp:Button ID="btnWriteDataOGVideo" class="btn btn-primary btn-lg" runat="server" OnClick="btnWriteDataOGVideo_Click" Text="Write Video Object  " Width="363px" /></td></tr>

22. Add the button click event in Default.aspx.cs.

    /// <summary>
            /// Posting a Video using Open Graph
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void btnWriteDataOGVideo_Click(object sender, EventArgs e)
            {
                SPDS UniversityWebApplication.App_Code.OG_GraphObj yOG_obj = new SPDS UniversityWebApplication.App_Code.OG_GraphObj();
    
                yOG_obj.Activity.Actor = new SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik Rawal","[email protected]");
                yOG_obj.Activity.Message = "Explore Microsoft Dynamics CRM more deeply-Introduction to Microsoft Dynamics CRM 2013 .";
                yOG_obj.Activity.Action = "create";
                SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yammergraphobjectinst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
                yammergraphobjectinst.Url = "http://video.ch9.ms/ch9/62c8/87663cbb-5485-4264-b23d-371d2b7362c8/IntroToDynamicsCRM2013M02.mp3";
                yammergraphobjectinst.Title = "Introduction to Microsoft Dynamics CRM 2013";
                yammergraphobjectinst.Description = "Find out about accounts and contacts (and the relationship between them), activities, Yammer, views, importing data, and processes..";
                yammergraphobjectinst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
                yammergraphobjectinst.Type = "video";
    
                yOG_obj.Activity.Object = yammergraphobjectinst;
                string postData = yOG_obj.ToString();
                string activityURL = WebConfigurationManager.AppSettings["activityURL"];
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
            }

    When the video object is posted to Yammer using Open Graph, the post will show the video icons illustrated in Figure 5-29, which shows the activity details view. Figure 5-30 shows the Activity Details page.

    

    Figure 5-29. Yammer Open Graph activity showing a video object

    

    Figure 5-30. Yammer Open Graph activity showing a video object in detail view

    Posting Custom Object Type: Training Object

    The training_object object type is custom object that represents a training object for the web application SPDS University web application, which can be posted as an object into Yammer using Open Graph.

    Action type: create can be used. Use the right action term provided in the code snippet; for example action: create. This exercise only defines the create action for training_object, but you can enhance the object’s actions by creating more actions like update and delete.

    This object type represents a video object.

23. Add the Write Training Object into Yammer Using OG button markup in Default.aspx.

    <tr><td>
    <asp:Button ID="btnWriteDataOG_Custom" runat="server" OnClick="btnWriteDataOGCustom_Click" Text="Write Custom (trainingobject) Object into Yammer Using OG" Width="573px" />
    </td></tr>

24. Add the button click event in Default.aspx.cs.

    /// <summary>
            /// Writing to Yammer using Open Graph's Custom Objects
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void btnWriteDataOGCustom_Click(object sender, EventArgs e)
            {
                SPDS UniversityWebApplication.App_Code.OG_GraphObj yOG_obj = new SPDS UniversityWebApplication.App_Code.OG_GraphObj();
    
                yOG_obj.Activity.Actor = new SPDS UniversityWebApplication.App_Code.OG_Actor("Pathik Rawal","[email protected]");
                yOG_obj.Activity.Message = "A Survey on upcoming trainings.";
                yOG_obj.Activity.Action = "create";
                SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance yammergraphobjectinst = new SPDS UniversityWebApplication.App_Code.OG_GraphObj_Instance();
    
                yammergraphobjectinst.Url = "http://localhost:43615/Survey.aspx";
                yammergraphobjectinst.Title = "A Survey on upcoming trainings";
                yammergraphobjectinst.Description = "A survey on upcoming trainings";
                yammergraphobjectinst.Image = "https://www.yammer.com/api/v1/uploaded_files/29860625/version/28812608/preview/UAPP_LOGO.png";
                yammergraphobjectinst.Type = "training_object:survey";
    
                yOG_obj.Activity.Object = yammergraphobjectinst;
                string postData = yOG_obj.ToString();
                string activityURL = WebConfigurationManager.AppSettings["activityURL"];
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.PostRequesttoYammer(postData, activityURL, txtaccesstoken.Text.ToString(), "application/json");
    
            }

    When the custom object is posted to Yammer using Open Graph, the post will look like Figure 5-31, which shows the activity details view. Figure 5-32 shows the Activity Details page.

    

    Figure 5-31. Yammer Open Graph activity showing a custom object

    

    Figure 5-32. Yammer Open Graph activity showing a custom object in detail view

25. Default.aspx. The complete default.aspx code is as follows:

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SPDS UniversityWebApplication._Default" %>
    
    <asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
        <h3>Welcome to SPDS University Application:</h3>
        <ol class="round">
            <li class="one">
                <h2>
                    <asp:Label ID="lbllogin" runat="server" Text="You are not Loged in, You can login using Yammer Credential, click on Log In button on top right"></asp:Label>
                </h2>
            </li>
        </ol>
        <div id="CourseDiv" runat="server">
            <h3>Upcoming Training&nbsp;</h3>
            <p>
                <asp:XmlDataSource ID="XmlDataSourceCourse" runat="server" DataFile="~/App_Data/Courses.xml"></asp:XmlDataSource>
    
                <asp:GridView ID="GridView1" runat="server" XPath="/Employees/Employee" DataSourceID="XmlDataSourceCourse"
                    AutoGenerateColumns="False" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" BackColor="White" BorderColor="#336666" BorderStyle="Double" BorderWidth="3px" CellPadding="4" GridLines="Horizontal" Height="124px" Width="985px">
                    <Columns>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Name") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Level") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Duration") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Trainer") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
                           <asp:TemplateField HeaderText="Name" HeaderStyle-Width="50">
                            <ItemTemplate>
                                <%# XPath("Noofseats") %>
                            </ItemTemplate>
    
    <HeaderStyle Width="50px"></HeaderStyle>
                        </asp:TemplateField>
    
                    </Columns>
                    <FooterStyle BackColor="White" ForeColor="#333333" />
    
                    <HeaderStyle BackColor="#336666" ForeColor="White" Font-Bold="True"></HeaderStyle>
                    <PagerStyle BackColor="#336666" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="White" ForeColor="#333333" />
                    <SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#F7F7F7" />
                    <SortedAscendingHeaderStyle BackColor="#487575" />
                    <SortedDescendingCellStyle BackColor="#E5E5E5" />
                    <SortedDescendingHeaderStyle BackColor="#275353" />
                </asp:GridView>
            </p>
    
        </div>
        <table>
            <tr><td> <asp:Button ID="btnWriteDataOG" CssClass="button" runat="server" OnClick="btnWriteDataOG_Click" Text="Write Document into Yammer Using OG" Width="363px" /></td></tr>
             <tr><td> <asp:Button ID="btnWriteDataOGPage" runat="server" OnClick="btnWriteDataOGPage_Click" Text="Write Page Object into Yammer Using OG" Width="363px"/></td></tr>
            <tr><td><asp:Button ID="btnWriteDataOGPlace" runat="server" OnClick="btnWriteDataOGPlace_Click" Text="Write Place Object into Yammer Using OG" Width="363px" /></td></tr>
             <tr><td><asp:Button ID="btnWriteDataOGPerson" runat="server" OnClick="btnWriteDataOGPerson_Click" Text="Write Person Object into Yammer Using OG" Width="363px"  /></td></tr>
              <tr><td><asp:Button ID="btnWriteDataOGVideo" class="btn btn-primary btn-lg" runat="server" OnClick="btnWriteDataOGVideo_Click" Text="Write Video Object " Width="363px" /></td></tr>
               <tr><td><asp:Button ID="btnWriteDataOGImage" runat="server" OnClick="btnWriteDataOGImage_Click" Text="Write Image Object into Yammer Using OG" Width="363px" /></td></tr>
             <tr><td><asp:Button ID="btnWriteDataOG_Custom" runat="server" OnClick="btnWriteDataOGCustom_Click" Text="Write Custom (trainingobject) Object into Yammer Using OG" Width="573px" /></td></tr>
        </table>
    
        <asp:TextBox ID="txtCode" runat="server" Visible="False"></asp:TextBox>
        <asp:TextBox ID="txtaccesstoken" runat="server" Visible="false"></asp:TextBox>
    
    </asp:Content>
    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="HeadContent">
        <style type="text/css">
            .auto-style1 {
                width: 100%;
            }
        </style>
    </asp:Content>

26. Here is the Default.aspx.cs's page_load event code:

    /// <summary>
            /// Page load event to check if query string contains a key called "Code"
            /// </summary>
            /// <param name="sender"></param>
            /// <param name="e"></param>
            protected void Page_Load(object sender, EventArgs e)
            {
    
                string qsCode = Request.QueryString["Code"];
                if (qsCode != null)
                {
                    txtCode.Text = qsCode;
                    Obtain_Access_Token();
                }
                else
                {
                    CourseDiv.Visible = false;
                    btnWriteDataOG.Visible = false;
                    btnWriteDataOGPage.Visible = false;
                    btnWriteDataOGPlace.Visible = false;
                    btnWriteDataOGPerson.Visible = false;
                    btnWriteDataOGVideo.Visible = false;
                    btnWriteDataOG_Custom.Visible = false;
    
                }
            }

27. Here is the Default.aspx.cs’s Obtain_Access_Token method:

    /// <summary>
            /// Obtain the access Token
            /// </summary>
            private void Obtain_Access_Token()
            {
                string accessToken = default(string);
                string AccesTokenURL = WebConfigurationManager.AppSettings["AccessTokenURL"] + "client_id=" + WebConfigurationManager.AppSettings["client_id"] + "&client_secret=" + WebConfigurationManager.AppSettings["client_secret"] + "&code=" + txtCode.Text;
                string response = SPDS UniversityWebApplication.App_Code.YammerUtility.InvokeHttpGetRequest(AccesTokenURL);
                if (!string.IsNullOrEmpty(response))
                {
                    SPDS UniversityWebApplication.App_Code.AccessToken jat = SPDS UniversityWebApplication.App_Code.AccessToken.GetInstanceFromJson(response);
    
                    if (!string.IsNullOrEmpty(jat.TokenResponse.Token))
                    {
                        accessToken = jat.TokenResponse.Token;
                        lbllogin.Text = "Welcome " + jat.CurrentUser.FullName;
                        txtaccesstoken.Text = accessToken;
                    }
                }
            }

Run Application

1. In Visual Studio, click on the Debug button, as illustrated in Figure 5-33. Then select your desired browser from the drop-down menu.

   

   Figure 5-33. Visual Studio’s debug application feature

2. You will be presented with the screen shown in Figure 5-34. Click on the Log In button.

   

   Figure 5-34. SPDS University's home page

3. You will be presented with a Login screen as illustrated in Figure 5-35. Our SPDS University web Application provides the “Sign In with Yammer” button. Click on it.

   

   Figure 5-35. SPDS University’s Login page

4. Yammer will present the Login page, shown in Figure 5-36.

   

   Figure 5-36. Yammer’s Login page

5. Yammer will redirect users to the redirect_uri with code in the URL as a query string parameter, as illustrated in Figure 5-37. The home page also displays the Welcome <<User name>> message. The <<User Name>> is retrieved from the access token response in the Obtain_Access_Token() method.

At this point of time, you have implemented how to write data into Yammer using Open Graph out-of-the-box and created custom objects for the Yammer app SPDS University as a ASP.NET web application.