Pages

Showing posts with label SharePoint 2013 JSLink. Show all posts
Showing posts with label SharePoint 2013 JSLink. Show all posts

Wednesday, May 21, 2014

SharePoint 2013 JSLink Not working on Taxanomy Field - Workaround Solution

Overriding JSLink property via field xml definition or c# code is a nice way to link your JavaScript file to the particular field. However, not all the fields could be overwritten this way.
For example, Taxonomy field has the following JSLink definition
// Microsoft.SharePoint.Taxonomy.TaxonomyField
public override string JSLink
{
    get
    {
        return "SP.UI.Taxonomy.js|SP.UI.Rte.js(d)|SP.Taxonomy.js(d)|ScriptForWebTaggingUI.js(d)";
    }
}
?
This means you cannot modify the look and feel for your Taxonomy field. Also, you can’t do that for Taxonomy, Related Items or Task Outcome field. All of these fields return particular JSLink which can’t be changed.
Frankly saying, you still may change look and feel of these fields, but you need to register your JavaScript file on the site collection level and make sure it gets loaded on every page. It could be done with custom action or any other methods to deliver JavaScript file within the site collection scope.

Tuesday, May 20, 2014

SharePoint 2013 JSLink Not working on LinkTitle Column - Workaround Solution

When I applied JSlink for LinkTitle Column I am not able to see the JS is loading at all. But all for other Columns and my custom columns too I can apply.
Is their any difference over here..Yes it is..The workaround for this is
Below is demonstrated how to customize LinkTitle column rendering
1) Create template
(function () {


   function titleRenderer(ctx) {
       var item = ctx.CurrentItem;
       return '<img src="/SiteAssets/' +  item.Title + '.png" />';  
    }



    function registerRenderer()
    {
      var context = {};
      context.Templates = {};
      context.Templates.Fields = {
        "LinkTitle": {
            "View": titleRenderer
        }
      };

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();
where we override LinkTitle field rendering
2) Upload template file into, for example, Site Assets library
3) Specify JS Link property for List View web part Example: ~site/SiteAssets/Phones.js

Sameway if you see issues in any of the below fields please follow with above way,
 //ID,PermMask,FSObjType,HTML_x0020_File_x0020_Type,ContentType,File_x0020_Type,
 //File_x0020_Type.mapapp,HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon,
 //HTML_x0020_File_x0020_Type.File_x0020_Type.mapico,serverurl.progid,
 //ServerRedirectedEmbedUrl,File_x0020_Type.progid,File_x0020_Type.url,
 //FileRef,FileLeafRef,CheckoutUser,CheckedOutUserId,IsCheckedoutToLocal,Title,
 //Created,Created.FriendlyDisplay,firstRow