0

I'm using client side rendering/jslink for a list view. In most cases I want to completely transform the displayed value, for example This bit of my code which makes the version number a clickable link to open the version history window (instead of the three awkward links in the current way of getting that window!)

(function () {
    var overrideCtx = {}; 
    overrideCtx.Templates = {}; 
    overrideCtx.Templates.Fields = {
        ...
        "_UIVersionString": { "View": linkify },
        ...  
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function linkify(ctx){
    var listGuid = ctx.listName;
    var httpRoot = ctx.HttpRoot;
    var itemId = ctx.CurrentItem["ID"];
    var version = ctx.CurrentItem["_UIVersionString"];

    var url = '<a href="#" onclick="SP.UI.ModalDialog.showModalDialog('
                    +"{url: '"+httpRoot+"/_layouts/Versions.aspx?list="+listGuid+"&ID="+itemId+"&IsDlg=1'} );"
                    + 'return false;" style="float:right;">'+version+'</a>';

    return url  
}

Most of this is working well, but one thing I want to do is align my dates to the right. I don't have any issue with how SharePoint does the friendly dates, I just want them to align to the right. I was hoping there was a way with the csr/jslink to say, "Hey get the value you would normally render, return it to me, and let me make just a little modification to it." But there doesn't seem to be.

If you use csr then you have to do all the rendering yourself. Is that correct?

I found this thread about using momentjs and a lot of code to format dates in a specific way. But that seems like an awful lot of work just to make something align on the right.

Anybody have a solution (really for any kind of column) where the csr override can be more of an extension? Just get what SP would have returned and then manipulating that?

Community
  • 1
Rothrock
  • 3,010
  • 7
  • 43
  • 92

3 Answers3

1

How about CSS 1 : text-align:right

There is nothing much simpler the Browser understands

      Fields: {
          "DueDate": {
              View: function(ctx, CurrentFieldSchema, CurrentItem, ListSchema){
                var name = CurrentFieldSchema.Name;
                var value = CurrentItem[name];
                return "<div style=width:300px;text-align:right>"+value+"</div>"; 
              },
Danny '365CSI' Engelman
  • 21,176
  • 7
  • 35
  • 79
  • This is awesome and helps me understand how to use the view overrides better, but it only gives me the value for the column, not the rendered value for the column. I want to get the value with the div and the style just as SP would have done it AND then add in my text-align:right (or what have you. – Rothrock Mar 31 '17 at 21:35
  • See the link in Dylans answer.. a bit more reading and learning – Danny '365CSI' Engelman Apr 01 '17 at 07:38
  • Note: The 3 Form functions get the one ctx parameter. only the View function gets 4 parameters from SharePoint, perfectly valid to use, you won't see them in any blogs as none of the early examples explained them, so everyone sticks to the one ctx... Which BTW often is a Global variable.. so you don't even have to declare it as a variable, because in SharePoint Objects are passed by reference – Danny '365CSI' Engelman Apr 01 '17 at 07:49
1

Absolutely you can. Check out this answer for a big list of the default CSR rendering functions.

For the View, you should be able to get the default SP rendering for a Date field by using:

var defaultHtml = RenderFieldValueDefault(ctx);
Community
  • 1
Dylan Cristy
  • 12,712
  • 3
  • 31
  • 71
  • This is what I'm looking for, but it doesn't seem to work for me defaultHtml is always "". Can you explain a bit more? – Rothrock Mar 31 '17 at 21:28
  • @Rothrock it's been a while since I've used the default rendering stuff, so I'm not sure what's going wrong there, although after a quick test I do see what you mean, that function is returning an empty string for me too, on a date field. I did notice though that ctx.CurrentItem.YourDateFieldName has the formatted short date string (not an ISO formatted string), maybe you can use that? The default HTML looks like it's not much more than a span with the class noWrap anyway, so it's not like you would be losing much just using your own HTML. – Dylan Cristy Apr 03 '17 at 14:26
  • Thanks. This specific example is for date, but I'm really trying to find a solution that works for any type -- including taxonomy. So far the best example is using Jim Brown's example in the thread you linked to. I extended that solution to wok on taxonomy fields by going through the sp.taxonomy.js file as well. – Rothrock Apr 03 '17 at 14:45
1

You can set this in onPostRender function as follows

overrideCtx.OnPostRender = formatTable;
function formatTable(ctx) {
$(".ms-listviewtable tr").find("td:eq(<<date column index>>)").css("text-align","right")}

If you don`t want to hard code the date column index you can find using below code

or you can create a field templte as follows

overrideCtx.Templates.Fields = {
    'Created': {'View': dateFieldTemplate}     
};

function dateFieldTemplate(ctx) {
    var date = ctx.CurrentItem.Created;
    return "<label style='text-align: right'>"+date+"</label>";
}

function formatTable(ctx) {
var colIndex;
$(".ms-listviewtable th[role='columnheader']").each(function(index){
    var type= $(this).find("div.ms-vh-div").attr("fieldtype");

    if(type=="DateTime")
    {
        colIndex = index;
    }
});

$(".ms-listviewtable tr").find("td:eq(" + colIndex + ")").css("text-align","right");}
Gautam Sheth
  • 30,881
  • 1
  • 35
  • 62
Venkat Konjeti
  • 4,959
  • 1
  • 10
  • 19
  • Thank you for this suggestion. I have used the OnPostRender to go in and clean up some stuff afterwards, but I would prefer to find a method that allows me to rework the pieces as they are made. The multiple iterations through each of the columns and td makes it a little harder to follow what is going on. – Rothrock Mar 31 '17 at 21:37