how do i create a custom UI for a list column

Question

What is the best way to create a custom feature to customize the UI of a list by filling in the column and/or field green when the value for row item = yes/no?

Since SP2013 with Client Side Rendering.. plenty of blogs around. For SP2010 you need to hack: http://viewmaster365.com/#/How — Danny '365CSI' Engelman, Mar 21 '16 at 21:51
You can also check out my step-by-step guides I wrote in my blog about CSR: https://afrait.com/blog/tag/csr/ and the properly best for your scenario will be this: https://afrait.com/blog/traffic-light-column-in-custom-list-en/ — Patrick, Mar 22 '16 at 06:56

score 0 · Answer 1 · answered Mar 21 '16 at 22:29

0

I used calculated column to achieve this tons of time. You can check Here or Here. They are both very quick solutions.

answered Mar 21 '16 at 22:29

YogaPanda

859
7
24

Danny '365CSI' Engelman · Answer 2 · 2020-06-26T08:42:53.860

Note:

in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

**Original answer:**

##no CSR (and no external script needed like the other answer refers to)

Details: https://www.365csi.nl/vm365com/#/How and more examples here on SO
Create a new Calculated Column
Set the datatype to Number !
Paste the Formula

change 'TR' to 'TD' if you only want to color the Cell

  =[YourYesNoColumn] 
  &"<img src=""/_layouts/images/blank.gif"" onload=""{" 
  &"var row=this;while(row.tagName!='TR'){row=row.parentNode}"
  &"row.style.backgroundColor='" & CHOOSE( [YourYesNoColumn] , "Green" , "Red") & "';"
  &"}"">"

CSR version

I am too lazy to rewrite the Priority example that uses no images

Rewrite colorIndex to match your Yes/No values

    function priorityFieldTemplate(ctx) {
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name],
        colorIndex=fieldValue.match(/(\d+)/g),//(extract x from '(x) Label'
        color=['none','red','orange','green','brown'][colorIndex],
        circleSize=15,
        H="<svg height={0} width={0}><circle cx={1} cy={1} r={1} fill='{2}'/></svg>";
    return String.format( H , circleSize, circleSize/2, color);
    }

ICC iCSR

how do i create a custom UI for a list column

2 Answers2

CSR version