Use default rendering in JSLink

SP2013

Hello everyone,

Today I will talk about the JsLink we use to make custom displays in our good old classic 2013 interface.

A typical example is the following

In this example, we change the rendering of the “AssignedTo” field with a custom html of our own.

This example can sometimes be too much for simple requests such as “I want to display this field in Read-Only”.

To do this, you can use the default SharePoint rendering!

I want to thank the person who took time to compile this really useful information!

For my part, my source is the following: https://sharepoint.stackexchange.com/questions/112506/sharepoint-2013-js-link-return-default-field-rendering

Hoping this helps !

Christopher.

Advertisements

Quick Win – Display attachments in list

win

Hello everyone,

Today, in the Quick Win series, I’ll talk about the possibility to view attachments in a list view.

By default, when you have one or more attachments to a list item, you see this

attachment1

If you open the properties of the item, you see the full list of attachments

attachment2

To display the full list of attachments in the view of your list, simply add the following JSLink (don’t forget to fix the path for the JQuery file)

(function () { 

// jQuery library is required
(window.jQuery || document.write('<script src="PATH/jquery.min.js"><\/script>'));
// Create object that have the context information about the field that we want to change it output render  

var linkFiledContext = {};
linkFiledContext.Templates = {};
linkFiledContext.Templates.Fields = {
"Attachments": { "View": AttachmentsFiledTemplate }
}; 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFiledContext); 

})(); 

// This function provides the rendering logic for list view
function AttachmentsFiledTemplate(ctx) {
var itemId = ctx.CurrentItem.ID;
var listName = ctx.ListTitle;
return getAttachments(listName, itemId);
} 

function getAttachments(listName,itemId) {
var url = _spPageContextInfo.webAbsoluteUrl;
var requestUri = url + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles";
var str = "";
// execute AJAX request
$.ajax({
url: requestUri,
type: "GET",
headers: { "ACCEPT": "application/json;odata=verbose" },
async: false,
success: function (data) {
for (var i = 0; i < data.d.results.length; i++) {
str += "<a href='" + data.d.results[i].ServerRelativeUrl + "'>" + data.d.results[i].FileName + "</a>";
if (i != data.d.results.length - 1) {
str += "
";
}
}
},
error: function (err) {
console.log(err)
}
});
return str;
}

Et voila!

attachment3

I wish I had the idea but I did not write this code, I found it on this msdn topic (Thanks Denis Guo)

Hoping this helps!

Christopher

Quick Win – Show PDF file preview in classic mode

win

Hello everyone,

Today, in the “Quick Wins” series I will talk about the preview of pdf document in SharePoint in “Classic” mode.

Problematic

As a user,

I want to see the preview of my pdf documents in my library and in my search result

In order to take advantage of this functionality in the same way as for office documents.

Cause

By default PDF files do not display the preview in the call-out menu

In libraries

pdfpreview01

In search result
pdfpreview02

Resolution

In order to use the preview of a PDF, we will tell SharePoint to use Word’s functionality for PDF files.

In libraries

We will use a jsLink file to integrate on desired views. The script to use is the following

window.onload = function () {

SP.SOD.executeFunc('filePreview.js', null, function () {

embeddedWACPreview.dimensions["pdf"] = embeddedWACPreview.dimensions["docx"];

filePreviewManager.previewers.extensionToPreviewerMap["pdf"] = filePreviewManager.previewers.extensionToPreviewerMap["docx"];

});

};

Put this script in a .js file, store it in a library in your site collection, and populate the jsLink in the view.

In search result
Simply create a result type based on the one used for Word and tell it to target pdf documents..

Go to the “Site settings”

In the “Search” section, click “Result Types”

pdfpreview03

Scroll down to Result Type “Microsoft Word” and click “Copy”

pdfpreview04

Give the name you want (PDF) ,choose the “PDF” content type and click “Save”

pdfpreview05.png

Results

In libraries

pdfpreview06

In search result

pdfpreview07.png

Hoping this helps!

Christopher

Quick Win – Display more view in the selector

win

Hello everyone,

Today I will inaugurate a new type of post that I want to set up, quick wins.

The purpose of these articles is to show a quick configuration to meet a common business need.

Problematic

As a user

I want to see more views in the view selector

In order to have more choice without clicking the ellipse

Cause

By default, the SharePoint view selector (in classic view) shows only 3 views among the views defined.

viewselector1

Resolution

By adding a JavaScript on the page, you can display more views. (Replace the 5 number by the number of view you want to display).

ExecuteOrDelayUntilScriptLoaded(overrideSurfacePivotCount, 'clienttemplates.js');
function overrideSurfacePivotCount() {
ClientPivotControl.prototype.SurfacedPivotCount = 5;
};

viewselector2

Hoping this helps.

Christopher.

JavaScript not running on Published pages

SP2013


Hello everyone,

Today I will talk about a problem concerning JavaScript.

Recently I had to integrate a script to one of my pages and I’ve realized that the code works correctly while the page status was not « Published ».

The code was:

$(document).ready(function () { ExecuteOrDelayUntilScriptLoaded(MyCustomFunction, “sp.js”); });

After doing some research, I came across this post msdn with an example of JavaScript use in SharePoint 2013 : http://msdn.microsoft.com/en-us/library/jj245759.aspx

So use the function SP.SOD.executeFunc() ; that will load the required JavaScript and not ExecuteOrDelayUntilScriptLoaded() to make sure JavaScript is loaded, the script is loaded only if it is explicitly required.

The correct code is:

$(document).ready(function () { SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, MyCustomFunction); });

Hope this helps.

 

Christopher

 

Display ribbon on page with multiple ListViewWebPart


Hello everyone,

Today I’ll talk about a code snippet I found for a discussion on msdn. (see the discussion here: http://social.msdn.microsoft.com/Forums/en/sharepoint2010programming/thread/0372bae3-6e10-4b1f-a77a-49c892086538)

The person wanted that the behavior of a standard ListViewWebPart list remains the same even if we added other webparts on the page.

After some research I came across this tip:

http://stackoverflow.com/questions/4848892/list-tools-tab-is-no-longer-available-after-adding-webpart-to-the-page?answertab=oldest#tab-top

The proposed answer is to add a script in the page simulating a click on the ListViewWebPart.

Here’s the script:


setTimeout(function() {
    var elem = document.getElementById("MSOZoneCell_WebPartWPQ2");
    if(elem != null) {
        var dummyevent = new Array();
        dummyevent["target"] = elem;
        dummyevent["srcElement"] = elem;
        WpClick(dummyevent);
    }
}, 2000);

I tested it successfully on a team site by adding this code into a Content Editor Web Part on the page. I just changed the timeout to 2 so that it goes faster.

Well done to the person who found it!

Christopher

Add color to list


Hello everyone,

Today I will talk about a little query I received recently from a client.

He wanted a list of tasks in color!

The principle was simple: If a task is completed, it appears in green, if the task is not completed and has the highest priority (level (1) High), it must be displayed in red.

For once I tried to use JavaScript instead of starting in a custom development. It did not look that complicated!

Here is an overview of our task list.

To begin , we need to add a Content Editor Web Part to the page where the list is displayed. We must add ListViewWebPart below the list.

If we check the classes applied to the cells, we can see that the class used for a list of fields is the class’ ms-VB2 “. So we will recover all the cells of the page and test those whose class is “ms-VB2”. Then we will check the contents of each cell and apply the desired style if needed. If the task is finished (“Completed”), we apply the color “lightgreen” to the entire line. If the job status is important (“(1) High”) and not completed, we apply the color “red” to the line.

 <script language="javascript" type="text/javascript"> var x = document.getElementsByTagName("TD") var i=0; for (i=0;i<x.length;i++) { if (x[i].className=="ms-vb2") { if (x[i].innerHTML=="Completed") { x[i].parentNode.style.backgroundColor='lightgreen'; } if (x[i].innerHTML=="(1) High" && x[i].parentNode.style.backgroundColor!='lightgreen') { x[i].parentNode.style.backgroundColor='red'; } } } </script> 

Result:

A simple code to display the tasks in color!

This small code will look at the contents of each cell in the list and if it finds the corresponding text he applies the right color. But be careful, if you have “Completed” or “(1) High” as content of another field that will change color.

For further testing jQuery is necessary, I will perhaps talk about this in a future article.

Christopher.