Add Read more link in list view for a multiline rich textbox in SharePoint 2013/2016/Online

This SharePoint tutorial, we will see, how to add a read more link in list view for the multiline rich textbox in SharePoint 2013/2016 or SharePoint Online.

We can use JavaScript code to add a read more link in the SharePoint list view.

Add Read more link in list view for a multiline rich textbox in SharePoint

Here I have a SharePoint list which has two columns Title and Description. The Description is a multi-line rich text box which can contain more data. So if you display all the contains in the list view then the formatting will be odd like below:

Instead of like above, my requirement is it should display few letters (in this example first 200 letters) and then it shows a read more link and when a user clicks on that it should display the item in disp view mode. The UI in the SharePoint list view should appear like below:

This can be possible without using any SharePoint server-side code.

Open the list view page, then click on Edit the page and then in the page edit mode, Insert a script editor web part into it. Then put the below code inside the script editor web part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
function bodyFieldRenderer(ctx) {
var item = ctx.CurrentItem;
var len = $(ctx.CurrentItem.Description).text().length;
var headline = $(ctx.CurrentItem.Description).text().substring(0,200);

if(len>200)
{
return String.format(‘{0}<br/><a href="{1}&ID={2}" class="ms-accentText">Read more…</a>',headline, ctx.displayFormUrl,ctx.CurrentItem.ID);
}
else
return headline;
}

function init() {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
"Description": {
View:bodyFieldRenderer,
}
}
}
});

}

RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens(""), init);
init();
});
</script>

Then Save the page, Now it should display with a read more link like in the above page.

You may like following SharePoint customization tutorials:

This is how we can add a read more link in list view for the multiline rich textbox in SharePoint 2013/2016 or SharePoint Online.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • >