none
Conditional formating and JSLINK

    Question

  • Hi

    I have a custom  list with with a  multiple choice field called

    "Check all external items"

    with three choices:

    Check not done
    Check OK
    Error

    I would like to format the row red, if "Check not done" is selected in the list view on AllItems.aspx.

    This must be quite simple.

    But how? :)



    • Edited by mrmk Thursday, November 14, 2013 4:27 PM
    Thursday, November 14, 2013 4:14 PM

Answers

All replies

  • Hi,

    According to your post, my understanding is that you wanted to format the row red if "Check not done" is selected using JSLINK.

    You can follow the steps as below:

    1. Create a JS File and Copy & Paste the below Script in your Js File.
    2. Upload your Js file in Master Page Gallery as a new JavaScript Display Template.
    3. Create a Custom List with choice column.
    4. Edit the Web Part and add JS Link reference path for the JavaScript File that you Upload in master Page Gallery.
    5. Once you hit apply the List Items, the row will become red if "Check not done" is selected.

    There's a great blog that covers how to color code List Items according to Status column using JS Link in SharePoint 2013.
    http://www.learningsharepoint.com/2013/04/04/color-code-list-items-with-javascript-using-js-link-in-sharepoint-2013/?goback=%2Egmp_3839320%2Egde_3839320_member_229365705#%21

    Best Regards,

    Linda Li


    Linda Li
    TechNet Community Support

    Friday, November 15, 2013 6:16 AM
  • Hi Linda!

    Yes i have seen that example before but in my case i still would like to have the page allitems.aspx as a list. I just would like to perhaps  make the table cell red if the value of the cell is "Check Not done" with Jquery this is quite simple....

    Friday, November 15, 2013 7:07 AM
  • I have done this and uploaded the js file to the site assets folder and then pasted the path to the js file into the wepbart settings js link field on the AllItems.aspx page.

    But with no result...

    PLS HELP! :)

    (function () {
        var myFieldCtx = {};
    
        // Define template variable  
        myFieldCtx.Templates = {};
    
        //alert();
    
        // Define your required fields
        myFieldCtx.Templates.Fields = {
            // The name of my field in the list
            "Check": {
                "View": TesFieldViewTemplate
            }
    
        };
    
        // Register the template override with SP2013 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myFieldCtx);
    
    })();
    
    // Override Check field with som other text
    function TesFieldViewTemplate(ctx) {
    
        var _Value = ctx.CurrentItem.Health;
    
        if (_Value == 'Check not done') //field value
        {
            return "OHH YES!!!"; 
        }
    
        
    }


    Friday, November 15, 2013 7:36 AM
  • Hi,

    I understand that you want to make the table cell red if the value of the cell is "Check Not done".

    You need to customise list field rendering in SharePoint 2013 using JS Link.

    Please refer to: http://www.eblogin.com/eblogin/post/2013/11/11/SP2013-renderListViewField.aspx

    Best Regards,

    Linda Li


    Linda Li
    TechNet Community Support

    Friday, November 15, 2013 8:18 AM
  • Yes that looks like the solution for me.

    Im using O365 and the script is uploaded to

    https://myO365site.sharepoint.com/my-subsite/SiteAssets/Forms/AllItems.aspx

    So what should the path in the js link field be?

    Friday, November 15, 2013 9:34 AM
  • Hi,

    You can right cilick the Js file to get the url and use /my-subsite/SiteAssets/xx.js

    Best Regards,

    Linda Li


    Linda Li
    TechNet Community Support

    Friday, November 15, 2013 10:00 AM
  • Thanks Linda!

    I hev done that but it doesnt seem like the script is executing. I have tried to set an alert in the script to se but no result at all...

    I must be some other error...

    Friday, November 15, 2013 11:30 AM