Navneet Chanalia's SharePoint Blog: How to create SharePoint App (App-Part or Client WebPart) to embed Yammer feed in SharePoint 2013/Online?

Step 1. Create an App for SharePoint 2013 in Visual Studio.

Step 2. Add an App-Part or Client Web-Part in your App.

Step 3. Go to the Element.xml of your App Part (Client Web Part) and prepare it like this:

<?xml version="1.0" encoding="utf-8"?>

<!-- Content element identifies the location of the page that will render inside the client web part

         Properties are referenced on the query string using the pattern _propertyName_
         Example: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->

    <Content Type="html" Src="~appWebUrl/Pages/YammerFeed.aspx?network=_network_&feedId=_feedId_&feedType=_feedType_&header=_header_&footer=_footer_&hideNetworkName=_hideNetworkName_&{StandardTokens}" />

<!-- Define properties in the Properties element.

Remember to put Property Name on the Src attribute of the Content element above. -->

<Property

        Type="string"
        Name="feedId"
        WebBrowsable="true"
        WebDisplayName="Feed ID"
        WebCategory="Yammer Settings"
        RequiresDesignerPermission="true"
        DefaultValue="5512843">
      </Property>

<Property

        Name="feedType"
        Type="enum"
        RequiresDesignerPermission="true"
        DefaultValue="group"
        WebCategory="Yammer Settings"
        WebDisplayName="Feed Type">
        <EnumItems>
        <EnumItem WebDisplayName="Group" Value="group"/>
         <EnumItem WebDisplayName="Topic" Value="topic"/>
         <EnumItem WebDisplayName="User" Value="user"/>
        </EnumItems>
      </Property>

<Property

        Name="header"
        Type="boolean"
        RequiresDesignerPermission="true"
        DefaultValue="false"
        WebCategory="Yammer Settings"
        WebDisplayName="Header">
      </Property>

<Property

        Name="footer"
        Type="boolean"
        RequiresDesignerPermission="true"
        DefaultValue="true"
        WebCategory="Yammer Settings"
        WebDisplayName="Footer">
      </Property>

<Property

            Name="hideNetworkName"
            Type="boolean"
            RequiresDesignerPermission="true"
            DefaultValue="false"
            WebCategory="Yammer Settings"
            WebDisplayName="Hide Network Name">
            </Property>

</Properties>

</ClientWebPart>

</Elements>

Step 4. Add an ASPX page under 'Pages' module and add the following HTML

<!DOCTYPE html>

</head>

</td>

</tr>
</table>

</td>

</tr>

</table>

        "use strict";
        window.Communica = window.Communica || {};

        $(document).ready(function () {
            Communica.Part.init();

});

Communica.Part = {

senderId: '',

init: function () {

var params = document.URL.split("?")[1].split("&");

for (var i = 0; i < params.length; i = i + 1) {

var param = params[i].split("=");

if (param[0].toLowerCase() == "senderid")

this.senderId = decodeURIComponent(param[1]);

}

this.adjustSize();

adjustSize: function () {

var step = 30,

newHeight,

contentHeight = $('#userDataContent').height(),

resizeMessage = '<message senderId={Sender_ID}>resize({Width}, {Height})</message>';

               resizeMessage = resizeMessage.replace("{Sender_ID}", this.senderId);
                resizeMessage = resizeMessage.replace("{Height}", "500px");
                resizeMessage = resizeMessage.replace("{Width}", "100%");
                window.parent.postMessage(resizeMessage, "*");
            }
        };
</script>

</body>

</html>

Step 5. YammerFeed.js

// Login to yammer

function yamLogin() {
    try {
        yam.getLoginStatus(
      function (response) {
          if (response.authResponse) {
              yamGroupFeeed();
          }
          else {
              yam.connect.loginButton('#yammer-login', function (resp) {
                  if (resp.authResponse) {
                      yamGroupFeeed();

}

             });
          }
      }

);

    }
   catch (err) {
        //alert(err.message);
    }

}

//Fetch yammer feed

function yamGroupFeeed() {
    try {
        //fetch app configurations
        var yamNetwork = decodeURIComponent(getQueryStringParameter('network'));
        var yamFeedId = decodeURIComponent(getQueryStringParameter('feedId'));
        var yamFeedType = decodeURIComponent(getQueryStringParameter('feedType'));
        var yamHeader = decodeURIComponent(getQueryStringParameter('header'));
        var yamFooter = decodeURIComponent(getQueryStringParameter('footer'));
        var yamHideNetworkName = decodeURIComponent(getQueryStringParameter('hideNetworkName'));

        //request feed
        yam.connect.embedFeed(
            {
                container: '#embedded-feed',
                network: yamNetwork,
                feedType: yamFeedType,                // can be 'group', 'topic', or 'user'
                feedId: yamFeedId,                 // feed ID from the instructions above
                config: {
                use_sso: true
                //defaultGroupId: XXXXXXX      // specify default group id to post to

, header: yamHeader

                    , footer: yamFooter
                    ////, showOpenGraphPreview: false
                    ////, defaultToCanonical: false
                    , hideNetworkName: yamHideNetworkName
                }
            });

       document.getElementById('tblBeforeLogin').style.display = "none";
       document.getElementById('embedded-feed').style.display = "block";
    }
    catch (err) {
        //alert(err.message);
    }
}

Step 6. App.css

.fullWidth

{
width:100%;
}

.loginStyle

{

width:100%;
font-family:Calibri;
border:solid;
border-color:#0078C9;
border-width:thin

}

.loginButtonYam

{

width:70px;

border-style:none;
font-family:Calibri;
color:white;
font-size:14px;
background-color:#007ACC;
}

.body

{

background-color: #EAEAEA;
color: white;
font-family: Calibri;
border:solid;
border-color:#0078C9;
border-width:thin;
width:100% !important;
height:100% !important;
}

.yamLogoHeader

{
background-color:#0078C9;
vertical-align:top;
vertical-align:text-top;
text-align:center;
}

Step 6. Deploy your App to target SharePoint site or add it to your companies app catalog.

Step 7. Go to the page where you want to embed the yammer feed > Edit > Add Web Part > Add 'YammerFeed' app part created above.

Step 8. Edit the YammerFeed web part and set the required configuration under 'Yammer Settings'.

Navneet Chanalia's SharePoint Blog

Tuesday, 13 October 2015

How to create SharePoint App (App-Part or Client WebPart) to embed Yammer feed in SharePoint 2013/Online?

No comments:

Post a Comment