Custom Field definition

Question

On SharePoint 2013 I am having troubles with a field on a list which i define through a schema.xml file. We upgraded from 2007 where it works fine, but after upgrading to 2013, it no longer works when creating list from new.

Historically:

The field is a custom field that outputs an image wrapped with a link which is dynamic using javascript. this is defined using display pattern and cdata.

We defined the field as follows in our schema.xml file:

When initiating the list from new with this schema it no longer works, it creates the book field, but its just blank.

What I have tried:

After research, i learnt that custom fields are now meant to be defined with an xsl file in:

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\XSL

So i created an xls file named: fldtypes_Book.xsl

of which the contents look like below (at the moment im just trying to output simple text to get it working):

  
  
    
    Hello.

Again this isnt working, it just outputs the field but the field is empty.

I know for a fact the the field is hooking up with the xsl file because if i input some wrong tags or random mess into the file the list breaks.

24/08/2015 - update

After research I have found this:

https://msdn.microsoft.com/en-us/library/office/jj220061.aspx

And tried to upload the js file to the master page and link to it on the list web part settings, but nothing happens, the contents of my js file:

(function () {

//   Initialize the variables for overrides objects
    var overrideCtx = {};
    overrideCtx.Templates = {};

//  alert("Override call worked");

//  Use BaseViewID and ListTemplateType to narrow focus/scope on 
//  which web parts on the page are affected
//  overrideCtx.BaseViewID = 1;
//  overrideCtx.ListTemplateType = 100;

    /*
     * Using the Fields override leaves the rest of the rendering intact, but 
     * allows control over one or more specific fields in the existing view
     */
    overrideCtx.Templates.Fields = {
        'Book': { 'View' : 'Hello' }
    };

    /*
     * Register the template overrides.
     */
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Any help greatly appreciated.

Vadim Gremyachev · Accepted Answer

In SharePoint 2013 was introduced a Client Side Rendering (aka CSR) which is used for rendering list views,list forms and search results. Unlike previous SharePoint rendering systems (XSLT in 2010 and CAML in 2007), CSR is client-side rendering mode and the default one in SharePoint 2013. To get acquainted with CSR i would recommend the following article: SharePoint 2013 Client Side Rendering: List Views.

How to customize field rendering in List View in SharePoint 2013 via CSR

The following example demonstrates how to customize LinkTitle column rendering in Phones list.

JavaScript template:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     Templates: {
        Fields: {
           'LinkTitle': {'View': phoneIconRenderer}
        }
     }
  });

});


function phoneIconRenderer(ctx) {
    var item = ctx.CurrentItem;
    return '';  
}

How to apply the changes

There are at least two options available:

Use JSLink property
Place JavaScript template on the page where list view resides

Option 1:

Save the specified template as a file
Upload the file into, for example, Site Assets library
Specify JS Link property for List View web part Example: ~site collection/SiteAssets/Phones.js

Option 2:

Here is how to apply the changes using the second option:

Switch the page into edit mode
Add Script Editor webpart right below the list view web part.
Put the specified code by enclosing it using script tag into the Script Editor, for example:
Save the page

Result

Custom Field definition

Answers (2)

How to customize field rendering in List View in SharePoint 2013 via CSR

How to apply the changes

Related Questions