Как изменить столбец с именем задачи с помощью JSLink в Sharepoint 2013

Я пытаюсь изменить цвет столбца Имя задачи SharePoint 2013 в списке с помощью JSLink. Я могу переопределить любой другой столбец, используя этот код:

var overrideCtx = {
    Templates: {
        Fields: {
            ‘Title': {‘View’ : taskSample.TitleRendering },
            ‘PercentComplete': {‘View’ : taskSample.PercentCompleteRendering}
        }
    }
};

По какой-то причине, когда я отлаживаю код в Google Chrome, функция TitleRendering всегда пропускается, а функция PercentCompleteRendering выполняется нормально.

У кого-нибудь есть понимание этой проблемы?

Спасибо

Я попробовал предложение LinkTitle в ответах ниже; это не решило мою проблему. Я включаю весь мой код для обзора. Любые другие предложения?

var taskSample = taskSample || {};

taskSample.CustomizeFieldRendering = function () {
  RegisterSod('hierarchytaskslist.js', '/_layouts/15/hierarchytaskslist.js');
  LoadSodByKey('hierarchytaskslist.js', null);
debugger;
    // Intialize the variables for overrides objects
  var overrideCtx = {
    Templates: {
      Fields: {
   'Unit': { 
          'View' : taskSample.UnitRendering
        },
    'LinkTitle': { 
          'View' : taskSample.TitleRendering
        },
        'PercentComplete': { 
          'View' : taskSample.PercentCompleteRendering
        }  
      }
    }
  };

  // Register the override of the field
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}
taskSample.PercentCompleteRendering = function (ctx) {
debugger;
 var output = [];
 var _dueDate = new Date(ctx.CurrentItem.DueDate);         
 var _now = new Date();    
 var nowPlus = new Date();    
 nowPlus.setDate(_now.getDate()+7);
 output.push('<div style="background: #dbdbdb; display:block; height: 20px; width: 150px;">');
 if ((_dueDate >= _now && _dueDate <= nowPlus)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {   
     output.push('<span style="color: #dbc900; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
  }     
 else if ((_dueDate < _now)&& (ctx.CurrentItem.PercentComplete.replace(" %", "") === "0") ) {   
     output.push('<span style="color: #CC0000; font-weight: bold; position:absolute; text-align: center; width: 150px;">');
  }     
 else{
  output.push('<span style="color: #fff; font-weight: bold; position:absolute; text-align: center; width: 150px;">'); 
 } 
 output.push(ctx.CurrentItem.PercentComplete);
 output.push('</span>');
 output.push('<div style="height: 100%; width: '); 
    if (_dueDate == 'Invalid Date') {   
      output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #757575;');    //grey 
   }   
  else if (ctx.CurrentItem.PercentComplete.replace(" %", "") === "100")      {       
   output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;'); //gree  
  }   
  else if (_dueDate < _now)     {       
   output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #CC0000;'); //red   
  }         
  else if (_dueDate >= _now && _dueDate <= nowPlus)     {        
  output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #dbc900;');  //yellow   
   }    
    else if (_dueDate > _now)     {        
  output.push(ctx.CurrentItem.PercentComplete.replace(" %", "") + '%; background: #339900;');  //green    
   }   
 output.push('"></div></div>');
 return output.join('');
}
taskSample.UnitRendering = function (ctx) {
debugger;
 var output = [];
 var _Unit = ctx.CurrentItem.Unit;
    switch(_Unit) {
      case "Unit 1":
          output.push('<span style="color: DarkMagenta;">');
    output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
      case "Unit 2":
          output.push('<span style="color: DarkRed;">');
    output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
   case "Unit 3":
         output.push('<span style="color: MidnightBlue;">');
    output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
   case "Unit 4":
          output.push('<span style="color: DarkOliveGreen ;">');
     output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
   case "Unit 5":
          output.push('<span style="color: GoldenRod;">');
     output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
   case "Unit 6":
         output.push('<span style="color: Coral;">');
    output.push(ctx.CurrentItem.Unit);
    output.push('</span>');
         break;
      default:
    output.push(ctx.CurrentItem.Unit);
         break;
   }  
 return output.join('');
}
taskSample.TitleRendering = function (ctx) {
debugger;
 var output = [];
 var _Unit = ctx.CurrentItem.Unit;  
  switch(_Unit) {
      case "Unit 1":
          output.push('<span style="color: DarkMagenta;">');
    output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
      case "Unit 2":
          output.push('<span style="color: DarkRed;">');
    output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
   case "Unit 3":
         output.push('<span style="color: MidnightBlue;">');
    output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
   case "Unit 4":
          output.push('<span style="color: DarkOliveGreen ;">');
     output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
   case "Unit 5":
          output.push('<span style="color: GoldenRod;">');
     output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
   case "Unit 6":
         output.push('<span style="color: Coral;">');
    output.push(ctx.CurrentItem.Title);
    output.push('</span>');
         break;
      default:
    output.push(ctx.CurrentItem.Title);
         break;
  }  
 return output.join('');
 }
taskSample.CustomizeFieldRendering();

Источник

1 ответ

В представлении задач по умолчанию Task Name (linked to item with edit menu) столбец по умолчанию используется для отображения имени задачи. Если так, то вы должны использовать LinkTitle внутреннее имя вместо Title,

пример

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

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     Templates: {
        Fields: {
            'LinkTitle' : { 
                'View' : function(ctx){
                          var percentValue = ctx.CurrentItem.PercentComplete; 
                             if(percentValue == "100 %"){
                                 return String.format('<span style="background-color:#00ff00">{0}</span>',ctx.CurrentItem.Title);
                             }
                             else {
                                 return String.format('<span>{0}</span>',percentValue = ctx.CurrentItem.Title);
                             }
                         } 
             }
        }
     }
   }); 

});

Результат

Источник
Другие вопросы по тегам