Applying ellipsis in NewsFeed Content

Introduction

As all we know we have NewsFeed webpart to display our activities in Mysite. The NewsFeed contents are not applied with ellipsis style. So, the content height will get enlarge automatically. Here, i am going to share an idea to apply ellipsis for content.

NewsFeed Webpart

First, We need to place the newsfeed webpart in our page. The method is our choice whether it may be applied directly or programmatically. If you need to go with programmatically, Click here. 

Cutomization

Customization will differ based on way we chose to place the webpart directly / programmatically in the page. Let we see both customization here.

Directly

First place the Newsfeed webpart in sitepage. Then, upload the jquery library in Site Assets. 

Add ScriptEditor in the page. Open the ScriptEditor and place the below script.

<script type='text/javascript' src="/SiteAssets/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function ($) {
$('.ms-microfeed-replyText span').addClass('replyEllipsis');

 $(.ms-microfeed-replyText span').click(function () {
        if ($(this).hasClass('replyEllipsis')) {
            $(this).removeClass('replyEllipsis')
        }
        else {
            $(this).addClass('replyEllipsis')
        }

    });
});
</script>

CSS for replyEllipsis

<style> .replyEllipsis {
    width:250px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>

Here, I did code for ellipsis for reply text in Newsfeed. I have found <div> tag of reply container, they form <span> for reply text. I am getting <span> and added new class in it. Already made css for that class (replyEllipsis). The jquery has added the class in <span> tag at page load. And i did toggle type of code to apply ellipsis for reply text (ON/OFF).

Programmatically

Add the <script> in the sitepage and paste the above script. Deploy the solution. The Ellipsis will apply in Newsfeed webpart.

Showing My Site's Newsfeed in SharePoint Web Application Programmatically

Introduction

 In My Site (SharePoint 2013), We have an option to track our activity using News Feed webpart. This webpart will show all the activities of logged in person in Mysite. Let see the note about Newsfeed webpart

NewsFeed

NewsFeed is the user's social hub where user can see the updates from people, documents, sites and tags which is followed by user. It displays the feeds of recent activities related to a user's specified interests. User can customize their interest by adding (Follow) / removing (Unfollow) colleagues, tags and documents.

This is short note about NewsFeed webpart. Let's see how we can integrate this into normal SharePoint site collection programmatically.

After the creation of farm solution using visual studio. Just add your sitepage under SitePages module.

Add Microsoft.SharePoint.Portal Reference

Then, Register portal dll in created sitepage.

<%@ Register TagPrefix="Portal" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

Paste the MicroFeedwebpart at where you want to display it within page. This webpart is used to get the feeds which is in My Site Newsfeed

<Portal:MicroFeedWebPart runat="server" id="sfwNewssFeed" ChromeType="none"></Portal:MicroFeedWebPart>  

That's all. Deploy your solution in SP web application. Newsfeed will display in SitePage.