none
Content Editor Javascript throws error after goes from Edit mode to Display Mode

    Question

  • Following this instruction for using javascript in SP 2013 view: http://sharepoint.stackexchange.com/questions/132857/color-code-item-row-based-on-column-value-in-sharepoint-foundation-2013

    I put a content editor on my list view page, put in my javascript into the content editor, and it works great to turn my Status column a different color based on the value, as long as I'm in display mode for the view.  If I click "edit this list" link, the color goes away but the list is still shown, but if I click "Stop Editing this list", I get the following errors:

    TypeError: Unable to get property 'cells' of undefined or null referenceTypeError: Unable to get property 'cells' of undefined or null reference

    TypeError: Unable to get property 'cells' of undefined or null referenceTypeError: Unable to get property 'cells' of undefined or null referenceTypeError: Unable to get property '_events' of undefined or null reference

    If I exit the page and go back into the list view in display mode, it's okay.  I'm not sure why it's a null reference when I'm going from Edit mode to Display mode?

    Thanks for any help!

    Wednesday, March 15, 2017 3:18 PM

Answers

  • Hi Kim,

    I was able to re-create your scenario from the list columns you provided in your past post and it worked for me. This is what I came up with:

    /*Use this JSLink file for the Status Color Rendering*/
    (function(){
        /*This section controls the Status color*/
        var ctxStatusColor = {};
        ctxStatusColor.Templates = {};
        ctxStatusColor.Templates.Fields = {
            'Status' : { 'View' : StatusColor }
        };
    
        /*Register the Override template*/
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxStatusColor);
    })();
    
    /*This function provides the rendering logic for the Status view*/
    function StatusColor(ctx)
    {
        /*Variable for the Status field*/
        var fldStatus = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    
        /*Return the HTML element with the appropriate color based on the status */
        switch(fldStatus){
            case "Pending":
                return "<div style='background-color: #F1BA0F; display: block; width: auto; color: #000000; font-weight: bold;'>" + fldStatus + "</div>";
                break;
            case "Approved":
                return "<div style='background-color: #C1FFB7; display: block; width: auto; color: #000000; font-weight: bold;'>" + fldStatus + "</div>";
                break;
            case "Disapproved":
                return "<div style='background-color: #BF0302; display: block; width: auto; color: #FFFFFF; font-weight: bold;'>" + fldStatus + "</div>";
                break;
        }
    }
    This is what my view looks like with some sample data after applying the JSLink file.
    JSLinkTest

    This is the format of the link you have to set in the webpart JSLink property (~sitecollection/Style Library/JSLink/RequestStatus.js). In my case, I used the Style Library, but can use any path. Just make sure you have the ~sitecollection in from of the path. And here's a screenshot of the webpart property just in case. Please let us know the outcome.
    JSLink Property


    Fausto Capellan, Jr - SharePoint Admin

    • Marked as answer by KimFromPA Thursday, March 16, 2017 3:23 PM
    Thursday, March 16, 2017 2:10 PM

All replies

  • Hi Kim, how's Pennsylvania?

    A null reference refers to a field that's empty. Do you have empty fields? Instead of using JS, I suggest using a calculated column to change the colors instead.


    cameron rautmann

    Wednesday, March 15, 2017 7:39 PM
  • Hi Kim,

    Can you please post the name of the columns used in the view and the JS code? It'd be easier to pinpoint the issue you are experiencing.


    Fausto Capellan, Jr - SharePoint Admin

    Wednesday, March 15, 2017 8:39 PM
  • Hi Kim,

    Use the JSLink concept to indicate status column in color format. This is approach most recommended will give you consistent result always.

    You can refer the following link to get sample code for your scenario.

    https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

    Thanks,

    Venkat Konjeti

    Thursday, March 16, 2017 1:09 AM
  • Hi, the column names are: Location, Name, Phone, Fax, Requested For, Request Date, Status.  Status is the column I want to change the color for. Again, the view renders with the colors fine on the initial load - it's going from edit mode back to display mode where I'm getting the error.  Here's my code:

    <script type="text/javascript">SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

       SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
         OnPostRender: function(ctx) {

           var statusColors =  {
              'Pending' : '#F1BA0F', 
              'Approved' : '#C1FFB7',
              'Disapproved' : '#BF0302'
           };

           var rows = ctx.ListData.Row;
           for (var i=0;i<rows.length;i++)
           {
              var status = rows[i]["Status"];
              var rowId = GenerateIIDForListItem(ctx, rows[i]);
              var row = document.getElementById(rowId);
             
      row.cells(8).style.backgroundColor = statusColors[status];
           }
         }
       });

    });</script>

    Thursday, March 16, 2017 11:48 AM
  • Hi, I tried the JSLink, but it isn't working.  Here's my JS link code for my column.  I put it into Site Assets, set the link on the web part, but it's not rendering at all.  The column I want to change is Status.

    // List View – Priority Color Sample
    // Muawiyah Shannak , @MuShannak

    (function () {

        // Create object that have the context information about the field that we want to change it's output render
        var priorityFiledContext = {};
        priorityFiledContext.Templates = {};
        priorityFiledContext.Templates.Fields = {
            // Apply the new rendering for Priority field on List View
            "Status": { "View": priorityFiledTemplate }
        };

        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

    })();

    // This function provides the rendering logic for list view
    function priorityFiledTemplate(ctx) {

        var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

        // Return html element with appropriate color based on priority value
        switch (priority) {
            case "Pending":
                return "<span style='color :#F1BA0F'>" + priority + "</span>";
                break;
            case "Approved":
                return "<span style='color :#C1FFB7'>" + priority + "</span>";
                break;
            case "Disapproved":
                return "<span style='color :#BF0302'>" + priority + "</span>";
        }
    }

    Thursday, March 16, 2017 11:56 AM
  • Hi Kim,

    I was able to re-create your scenario from the list columns you provided in your past post and it worked for me. This is what I came up with:

    /*Use this JSLink file for the Status Color Rendering*/
    (function(){
        /*This section controls the Status color*/
        var ctxStatusColor = {};
        ctxStatusColor.Templates = {};
        ctxStatusColor.Templates.Fields = {
            'Status' : { 'View' : StatusColor }
        };
    
        /*Register the Override template*/
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxStatusColor);
    })();
    
    /*This function provides the rendering logic for the Status view*/
    function StatusColor(ctx)
    {
        /*Variable for the Status field*/
        var fldStatus = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    
        /*Return the HTML element with the appropriate color based on the status */
        switch(fldStatus){
            case "Pending":
                return "<div style='background-color: #F1BA0F; display: block; width: auto; color: #000000; font-weight: bold;'>" + fldStatus + "</div>";
                break;
            case "Approved":
                return "<div style='background-color: #C1FFB7; display: block; width: auto; color: #000000; font-weight: bold;'>" + fldStatus + "</div>";
                break;
            case "Disapproved":
                return "<div style='background-color: #BF0302; display: block; width: auto; color: #FFFFFF; font-weight: bold;'>" + fldStatus + "</div>";
                break;
        }
    }
    This is what my view looks like with some sample data after applying the JSLink file.
    JSLinkTest

    This is the format of the link you have to set in the webpart JSLink property (~sitecollection/Style Library/JSLink/RequestStatus.js). In my case, I used the Style Library, but can use any path. Just make sure you have the ~sitecollection in from of the path. And here's a screenshot of the webpart property just in case. Please let us know the outcome.
    JSLink Property


    Fausto Capellan, Jr - SharePoint Admin

    • Marked as answer by KimFromPA Thursday, March 16, 2017 3:23 PM
    Thursday, March 16, 2017 2:10 PM
  • This worked!  Once I put it into the Style Library (instead of the Site Assets where I'd had it) and I used your code.  The color stays when the view goes into Edit mode and when it returns to Display mode.  Thank you so much for your help!
    Thursday, March 16, 2017 3:24 PM
  • Hi Kim,

    You're welcome and I'm glad that worked for you.


    Fausto Capellan, Jr - SharePoint Admin

    Thursday, March 16, 2017 3:36 PM