Menu
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:
<Field ID="{A54A4AE0-CA79-47b0-819E-32DC1B3F5AFB}" ReadOnly="TRUE" Type="Computed" Name="Book" Sortable="FALSE" Filterable="FALSE" DisplayName="Book" ClassInfo="Icon" AuthoringInfo="(link to book item)" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="Book" FromBaseType="TRUE">
<DisplayPattern>
<HTML><![CDATA[<a href="javascript:" OnClick="javascript:this.href=L_Menu_BaseUrl + '/Lists/Bookings/NewForm.aspx?Session_x0020_Name=]]></HTML>
<Column Name="ID" />
<HTML><![CDATA[';GoToLink(this);return false;" target="_self">]]></HTML>
<HTML><![CDATA[<img border="0" alt="]]></HTML>
<HTML>Book</HTML>
<HTML><![CDATA[" src="/_layouts/images/Book.GIF">]]></HTML>
<HTML><![CDATA[</a>]]></HTML>
</DisplayPattern>
</Field>
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):
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
version="1.0"
exclude-result-prefixes="xsl msxsl ddwrt"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:SharePoint="Microsoft.SharePoint.WebControls"
xmlns:ddwrt2="urn:frontpage:internal">
<xsl:template match="FieldRef[@ID='A54A4AE0-CA79-47b0-819E-32DC1B3F5AFB']" mode="Computed_body" priority="1">
<xsl:param name="thisNode" select="."/>
<span>Hello.</span>
</xsl:template>
</xsl:stylesheet>
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.
642
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.
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 '<img src="/SiteAssets/' + item.Title + '.png" />';
}
There are at least two options available:
Option 1:
Site Assets
libraryJS Link property for List View web part Example: ~site
collection/SiteAssets/Phones.jsOption 2:
Here is how to apply the changes using the second option:
Script Editor webpart right below the list view web part.script tag into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>Result
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
